首页 > 代码库 > 使用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); } } } }};
栗子-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>
栗子-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 () { } });
呃,如果要运行的话,当然要在示例的html里引入示例js……怎么引用JS,这个就不好说了吧……
另外,console.log,ie9及以下的浏览器不支持哦,以上代码里的console.log只是为了方便调试,可以注释掉的。
使用jquery dialog
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。