zoukankan      html  css  js  c++  java
  • 使用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,
             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只是为了方便调试,可以注释掉的。

  • 相关阅读:
    STS和Eclipse安装Lombok插件
    html5盒子模型
    SpringBoot整合Ribbon注入RestTemplate实例找不到原因
    Tomcat调整JVM大小,启动闪退
    quick cocos 设置屏幕大小
    quick cocos 多点触控,真机测试成功
    quick cocos 打包apk
    cocos3 多点触控 经过真机测试
    corona image sheet
    corona 杂类
  • 原文地址:https://www.cnblogs.com/oneivan/p/4267027.html
Copyright © 2011-2022 走看看