fPopover.js V1.0.0

最新推荐文章于 2024-08-16 09:34:33 发布

原创最新推荐文章于 2024-08-16 09:34:33 发布 · 735 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JAVASCRIPT 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个名为 fPopover.js 的轻量级弹出框插件，该插件支持 IE9 及以上浏览器，可用于快速实现 HTML 元素的弹出提示效果。文章详细解释了插件的使用方法、参数配置及 CSS 样式。

使用时候有问题，请与我联系，谢谢。
代码随便使用

/*!
 * fPopover.js v1.0.0
 * (c) 2017 Talent
 * Date: 2017-03-29
 * Support Broswer: IE9+ Firefox12+ Chrome4+ safair4+ Opera11.5+
 */
/**
 * @Other:for my girl friend:Fang Hong
 */
/**
 * 参数：option:
 * {
 * s：需要popover依附的元素(选择器) 必须有
 * x: popover在x轴上的位置（相对于目标元素,可无） 值有：left center right  n(n表示占百分之几不支持 px 默认为center) 以三角形的角尖作为定位的主体
 * y: popover在y轴上的位置（相对于目标元素,可无） 值有：top bottom（默认为top 即在目标元素的上方）
 * content: 展现在popover上的内容 字符串（html的字符串）
 * before:在popover生成后，需要执行的方法（必须是方法）
 * }
 * option可以只传入选择器（option为字符串）但是此使用方法必须在已经初始化之后，否则将直接抛错 不会执行之前的before操作
 * 
 * functionName: 需要执行的popover方法的名字（可无） 值有： show hidden destroy  默认为show  当未初始化的时候，functionName就是show 其余无效
 */
/**
 * 备注：getBoundingClientRect 中top left 是距离<视口>顶部 左边的距离
 */
/**
 * 使用方法 如下
 */
var option = {
    s: "#public",
    x: 'center',
    y: 'bottom',
    content: "<div><span>11111</span><div>2222</div></div>"
}
//当不是初始化的时候 可以如此：option = "#public"
fPopover(option,'show');

function fPopover(option, functionName) {
    "use strict"
    var type = 0; //0表示option为对象的模式 1表示option为字符串的模式
    var select //= window.$ 
    = function (selector) {
        return document.querySelector(selector);
    };
    //假如是字符串 则直接走已经初始化过的流程
    if (option.constructor === String) {
        if (select(option).fPopoverInit === undefined) throw 'fPopover has not been initialized!';
        type = 1;
    }
    var ele = type == 0 ? select(option.s) : select(option);
    var fPopoverInit = ele.fPopoverInit;
    var fName = functionName === undefined ? 'show' : functionName;
    var before = option.before === undefined ? function () {} : option.before;
    switch (type) {
        case 0:
            initialize(option, ele, fPopoverInit);
            before();
            break;
        case 1:
            exist(fPopoverInit, fName);
            break;
    }
    //执行before方法 此时主体已经加入body


    function initialize(option, ele, fPopoverInit) {
        var x = option.x === undefined ? 'center' : option.x.toString();
        var y = option.y === undefined ? 'top' : ((option.y === 'top' || option.y === 'bottom') === true ? option.y.toString() : 'top');
        var content = option.content === undefined ? '' : option.content;


        if (ele === undefined) {
            throw 'ele must be defined!';
        }

        //没有属性，表示没有初始化过popover 需要自己初始化创建
        if (fPopoverInit === undefined) {
            fPopoverInit = {};
            //创建popover的容器
            var pContiner = document.createElement('div');
            //创建popover内容的容器
            var pContext = document.createElement('div');;
            pContext.innerHTML = content; //插入内容
            //创建小三角的容器
            var pTri = document.createElement('div');
            if (y === 'top') {
                pContiner.appendChild(pContext);
                pContiner.appendChild(pTri);
            } else {
                pContiner.appendChild(pTri);
                pContiner.appendChild(pContext);
            }
            var id = 'fPopover' + Math.floor(Math.random() * 100000);
            pContiner.id = id;
            fPopoverInit['id'] = id; //插入id值，为了之后的popover定位
            document.body.appendChild(pContiner);

            //如果top 则为向下的三角 如果为bottom 则是向上的三角
            y === 'top' ? (pTri.className = 'fpopover-triangle fpopover-triangle-down') : (pTri.className = 'fpopover-triangle fpopover-triangle-up');
            pContiner.className = 'fpopover';
            pContext.className = 'fpopover-context';
            //获取元素的位置信息
            var matrix = ele.getBoundingClientRect();
            //开始对y进行处理 
            if (y === 'top') { //在选择元素的上方
                //确定三角形的位置
                pTri.style.top = pContiner.offsetHeight + 9 + 'px';
                pTri.style.left = pContiner.offsetWidth / 2 - 10 + 'px';

                //定位popover的位置
                var eWidth = ele.offsetWidth;
                pContiner.style.top = matrix.top - pContiner.offsetHeight - 10 + document.body.scrollTop + 'px';


            } else if (y === 'bottom') { //在选择元素的下方
                //先确定 小三角的位置
                pTri.style.top = (pTri.offsetHeight + 10) * (-1) + 'px';
                pTri.style.left = pContiner.offsetWidth / 2 - 10 + 'px';
                //确定大的popover的位置
                var eWidth = ele.offsetWidth;
                pContiner.style.top = matrix.top + ele.offsetHeight + 10 + document.body.scrollTop + 'px';


            } else {
                throw 'the value of "y" is illegal.'
            }
             //x影响的是popover的左右 left center right
            var leftOff = getXoffSet(x, ele);
            pContiner.style.left = matrix.left + leftOff - pContiner.offsetWidth / 2 + 'px';
            //给元素内部对象赋值 为了之后的 v1.0.1版本可以在初始化后重新进行定位组装
            fPopoverInit['x'] = x;
            fPopoverInit['y'] = y;
            ele.fPopoverInit = fPopoverInit;

        } else {
            exist(fPopoverInit, fName);
        }
    }
    /**
     * popover已经初始化后的方法
     */
    function exist(fPopoverInit, fName) {
        //popover已经被初始化过了，对于 hidden destroy两个方法，只要让其消失或者删除就可以了，无需重新进行定位计算
        switch (fName) {
            case "show":
                var id = fPopoverInit.id;
                select('#' + id).style.display = "block";
                break;
            case "hidden":
                var id = fPopoverInit.id;
                if (id === undefined) {
                    throw 'fPopover has error! ';
                }
                select('#' + id).style.display = 'none';
                break;
            case "destroy":
                select('#' + id).remove();
                break;
            default:
                throw 'the name of function is illegal.';
        }
    }
    //获取x轴上设定的偏移量
    function getXoffSet(x, ele) {
        var eWidth = ele.offsetWidth;
        var leftOff = 0;
        switch (x) {
            case "left":
                leftOff = 0;
                break;
            case "center":
                leftOff = eWidth / 2;
                break;
            case "right":
                leftOff = eWidth;
                break;
            default:
                if (!/^\d+\.{0,1}\d+$/.test(x) && x !== "0") {
                    return null;
                }
                leftOff = eWidth * x / 100;
                break;
        }
        return leftOff;
    }
}

cssd代码：

.fpopover {
    /*width: 100px;
    height: 100px;*/
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.24);
    border:1px solid #000;
    z-index: 999;
}

.fpopover-triangle {
    position: absolute;
}

.fpopover-triangle-up:after {
    content: " ";
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.fpopover-triangle-down:before {
    content: " ";
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.fpopover-context {
    margin: 4px;
}