首页 > 代码库 > 使用jquery dialog

使用jquery dialog

网页开发中,弹窗还是很有必要的。本人比较喜欢jquery ui的dialog。

但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义……

我自己简单地写了个使用jquery dialog封装函数,有兴趣的朋友看看。

JavaScript(看起来有点多,但放到vs里,ctrl+m+o,还是比较清楚明了的):

技术分享
$.ivanjs = $.ivanjs || {};$.ivanjs.com = $.ivanjs.com || {};$.ivanjs.com = {    //other function    //弹窗    showWin: function (content, options) {        var contentDiv = content;        //检查传递过来的参数类型是否为Jquery对象        if (!(content instanceof $)) {            //如果是字符串,则构造一个Jquery对象            if (typeof (content) == "string") {                contentDiv = $("<div>" + content + "</div>");            } else {                alert("弹窗内容参数无效,必须为jquery元素对象或者字符串");                return null;            }        }        //默认设置        var _options = {            autoOpen: true,            modal: true,            zIndex: null,            full: false,//是否全屏            destroyEnable: true,            afterOpen: function () {                //打开之后的回调            }        };        //避免为空对象        options = options || {};        //把按钮对象转换为jquery ui能识别的格式参数        var customBtns = options.buttons || [];        options.buttons = {};        for (var i = 0; i < customBtns.length; i++) {            var btnObj = customBtns[i];            options.buttons[btnObj.text] = btnObj.handler || function () {};        }        //调用者的设置优先        _options = $.extend({}, _options, options);        //关闭后的回调        var closeCallback = _options.close;        var isCodeElement = $("body").find(contentDiv).length == 0;        _options.close = function () {            if (closeCallback) {                closeCallback();            }            //如果是用代码构造的jquery元素,则销毁。避免下次构造时页面中反复存在            if (_options.autoOpen && _options.destroyEnable && isCodeElement) {                setTimeout(function () {                    contentDiv.remove();                }, 250);            }        };        //初始化之后立即打开的        if (_options.autoOpen && !contentDiv.length) {            alert("弹窗内容要显示的jquery元素不存在,selector:" + contentDiv.selector);            return null;        }        var dialogObj = contentDiv.dialog(_options);                updateDialogStyle();        if (_options.autoOpen && _options.afterOpen) {            _options.afterOpen();        }        //如果是初始化之后,再手动打开的,则添加一个打开的“开关”,供外部使用        dialogObj.open = function () {            if (!dialogObj.length) {                alert("弹窗内容要显示的jquery元素不存在,selector:" + dialogObj.selector);            }            dialogObj.dialog("open");            updateDialogStyle();            if (_options.afterOpen) {                _options.afterOpen();            }        };        return dialogObj;        //应用自定义的样式,更新弹窗样式        function updateDialogStyle() {            var uiDialog = contentDiv.parent(".ui-dialog");            //z-index            if (_options.zIndex) {                uiDialog.css({ "z-index": _options.zIndex });            }                        //按钮样式            if (customBtns.length) {                for (var j = 0; j < customBtns.length; j++) {                    var cbtn = customBtns[j];                    var btnArr = uiDialog.find("button:contains(‘" + cbtn.text + "‘)");                    var btn = btnArr;                    if (btnArr.length > 1) {                        for (var k = 0; k < btnArr.length; k++) {                            btn = $(btnArr[k]);                            var res = $(btn.children()).filter(function (index) {                                return $(this).text() == cbtn.text;                            });                            if (res.length>0) {                                break;                            }                        }                    }                                         //覆盖全部class样式                    if (cbtn.className) {                        btn.attr("class", cbtn.className);                    }                    //增加                    if (cbtn.addClass) {                        btn.addClass(cbtn.addClass);                    }                    //移除                    if (cbtn.removeClass) {                        btn.removeClass(cbtn.removeClass);                    }                    //内嵌样式                    if (cbtn.style) {                        for (var styleName in cbtn.style) {                            btn.css(styleName, cbtn.style[styleName]);                        }                    }                    //图标                    if (cbtn.icon) {                        btn.prepend($("<span>" + cbtn.icon + "</span>"));                    }                    //ko绑定                    if (cbtn["data-bind"]) {                        btn.attr("data-bind", cbtn["data-bind"]);                    }                                    }                //只需更新一次,然后重置按钮参数变量,避免打开之后反复更新按钮样式                customBtns = [];            }            //宽和高            if (_options.full) {                setFullScreen();                $(window).resize(function () {                    setFullScreen();                }).resize();                //全屏样式                function setFullScreen() {                    var uiAllWidth = $(window).width() - 20,                        uiAllHeight = $(window).height() - 30;                    uiDialog.css("width", uiAllWidth);                    uiDialog.css("height", uiAllHeight);                    uiDialog.css("left", "5px");                    uiDialog.css("top", "5px");                    var uiFooter = uiDialog.find(".ui-dialog-buttonpane"),                        uiHeader = uiDialog.find(".ui-dialog-titlebar"),                        uiFooterH = uiFooter.height(),                        uiHeaderH = uiHeader.height();                    console.log("高:全部" + uiAllHeight + ";头" + uiHeaderH + ";脚" + uiFooterH);                    contentDiv.css("height", uiAllHeight - uiHeaderH - uiFooterH - 50);                }            }            else {                var uiWidth = parseInt(uiDialog.css("width")),                    winWidth = $(window).width();                if (winWidth <= uiWidth) {                    uiDialog.css("width", winWidth - 10);                } else if (_options.width) {                    uiDialog.css("width", _options.width);                }            }        }    }};
View Code

 

栗子-html:

技术分享
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>   </head>    <body>                      <div>            <input type="button" id="openFormDialog_body" value="打开子表单" />        </div>                <div id="dialogform" title="Create new user">            <input type="text"  value=" " />        </div>    </body></html>
View Code

 

栗子-js:

技术分享
//测试1:自动弹出    $.ivanjs.com.showWin("yes");        $.ivanjs.com.attachConsole();    //测试2:手动弹窗    var bodyDialog = $.ivanjs.com.showWin($("#dialogform"), {        autoOpen: false,        height: 300,        width: 550,        full: false,        zIndex:999,        modal: true,        buttons: [            { text: "确认", className: "yourClass", style: { color: "green" },icon:"<fa>123</fa>", "data-bind":"click:myClick", handler: function () { } },            {text:"确认取消"}        ],        close: function () {                   }    });
View Code

 

呃,如果要运行的话,当然要在示例的html里引入示例js……怎么引用JS,这个就不好说了吧……

另外,console.log,ie9及以下的浏览器不支持哦,以上代码里的console.log只是为了方便调试,可以注释掉的。

 

使用jquery dialog