欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

22.JavaScript制作一个简单的提示框插件

程序员文章站 2022-04-13 09:09:44
JavaScript制作一个简单的提示框插件 下面是制作的提示框插件文件 window.myPlugin = window.myPlugin || {}; window.myPlugin.showMsg = (function () { var *, //蒙层 promptBox, / ......

javascript制作一个简单的提示框插件

下面是制作的提示框插件文件

window.myplugin = window.myplugin || {};

window.myplugin.showmsg = (function () {
    var *, //蒙层
        promptbox, //提示框
        closespan, //关闭按钮
        titlespan, //提示标题
        contextspan, //提示信息
        okbtn, //确定按钮
        cancelbtn, //取消按钮
        isregevent, //是否注册事件
        option; //传入的参数



    /**
     * 初始化蒙层
     */
    function init*() {
        if (!*) { //没有蒙层则初始化
            //蒙层:覆盖整个窗口,半透明的黑色
            * = document.createelement("div");
            *.style.position = "fixed";
            *.style.width = *.style.height = "100%";
            *.style.left = *.style.top = 0;
            *.style.background = "rgba(0,0,0,.5)";
            document.body.appendchild(*);
        }
        *.style.display = "block"; //展示蒙层
    }

    /**
     * 初始化提示框
     */
    function initpromptbox() {
        //提示框:宽高300,位置居中
        if (!promptbox) {
            promptbox = document.createelement("div");
            promptbox.style.width = promptbox.style.height = "300px";
            promptbox.style.background = "#fff";
            promptbox.style.fontsize = "14px";
            promptbox.style.position = "absolute";
            promptbox.style.top = promptbox.style.left = "50%";
            promptbox.style.marginleft = promptbox.style.margintop = "-150px";
            promptbox.style["data-myplugin-id"] = "promptbox";
            initpromptcontext();
            *.appendchild(promptbox);
            titlespan = document.queryselector("[data-myplugin-id='title']"); //提示标题
            contextspan = document.queryselector("[data-myplugin-id='message']"); //提示信息
            closespan = document.queryselector("[data-myplugin-id='close']"); //关闭按钮
            okbtn = document.queryselector("[data-myplugin-id='ok']"); //确定按钮
            cancelbtn = document.queryselector("[data-myplugin-id='cancel']"); //取消按钮
        }

        okbtn.innertext = option.oktext || "确定";
        cancelbtn.innertext = option.canceltext || "取消";
        titlespan.innertext = option.title || "提示";
        contextspan.innertext = option.context || "";
    }

    /**
     * 初始化提示框中的内容
     */
    function initpromptcontext() {
        //内容包含:标题,关闭按钮,提示信息,确定按钮,取消按钮

        //创建标题,关闭按钮
        var div = document.createelement("div");
        div.innerhtml = `<span style="float:left;" data-myplugin-id="title"></span>
        <span  style="float:right;cursor:pointer;" data-myplugin-id="close">x</span>`;
        div.style.height = "50px";
        div.style.padding = "10px 20px";
        div.style.background = "#eee";
        div.style.boxsizing = "border-box";
        promptbox.appendchild(div);

        //创建提示信息
        div = document.createelement("div");
        div.innerhtml = `<span  data-myplugin-id="message"></span>`;
        div.style.height = "200px";
        div.style.padding = "10px 20px";
        div.style.boxsizing = "border-box";
        promptbox.appendchild(div);

        //创建确定按钮,取消按钮
        div = document.createelement("div");
        div.innerhtml = `<button style="float:right;margin:10px;cursor:pointer;" data-myplugin-id="cancel"></button><button style="float:right;margin:10px;cursor:pointer;" data-myplugin-id="ok"></button>`;
        div.style.height = "50px";
        div.style.padding = "10px 20px";
        div.style.boxsizing = "border-box";
        promptbox.appendchild(div);
    }

    //注册事件
    function regevent() {
        if (!isregevent) { //未注册事件
            //1.点击关闭,点击蒙层,点击取消按钮
            closespan.onclick = *.onclick = function () {
                *.style.display = "none"; //隐藏蒙层
            };

            okbtn.onclick = function () {
                option && option.okfunction && option.okfunction();
                *.style.display = "none"; //隐藏蒙层
            }

            cancelbtn.onclick = function () {
                option && option.cancelfunction && option.cancelfunction();
                *.style.display = "none"; //隐藏蒙层
            }

            //2.拖动提示框事件
            window.onmousedown = function (e) {
                var target = gettarget(e.target); //是否包含目标元素

                if (target) {
                    var style = window.getcomputedstyle(target);
                    var left = parseint(style.left);
                    var top = parseint(style.top);
                    var disx = parseint(e.pagex) - left;
                    var disy = parseint(e.pagey) - top;

                    window.onmousemove = function (e) {
                        var newleft = parseint(e.pagex) - disx;
                        var newtop = parseint(e.pagey) - disy;

                        promptbox.style.left = newleft + "px";
                        promptbox.style.top = newtop + "px";

                    };
                    window.onmouseup = window.onmouseleave = function () {
                        window.onmousemove = null;
                    }
                }
            };

            function gettarget(target) {
                while (target) {
                    if (target.tagname === "div" && target.style["data-myplugin-id"] === "promptbox") {
                        return target;
                    } else {
                        target = target.parentelement;
                    }
                }
                return false;
            }
        }
    }




    /**
     * @param {object} opts 
     * opts.title : 提示标题
     * opts.context : 提示信息
     * opts.canceltext:取消按钮内容
     * opts.oktext:确定按钮内容
     * opts.canceltext:取消按钮内容
     * opts.okfunction:确定按钮的回调函数
     * opts.cancelfunction:取消按钮的回调函数
     */
    function showmsg(opts) {
        if (typeof opts === "string") {
            option = {
                context: opts
            }
        } else {
            option = opts || {};
        }
        init*();
        initpromptbox();
        regevent();
    }

    return showmsg;
}());

 

引入并使用myplugin.js文件

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>

<body>
    <script src="./js/myplugin.js"></script>
    <script>
        window.myplugin.showmsg({
            title: "信息",
            context: "确定删除吗",
            oktext: "ok",
            canceltext: "cancel",
            okfunction: function(){
                console.log("点击ok按钮");
            },
            cancelfunction:function(){
                console.log("点击cancel按钮");
            }
        });
    </script>
</body>

</html>

 

效果展示:

22.JavaScript制作一个简单的提示框插件