jquery ui dialog封装.doc

自己封装了一个JQuery UI Dialog的插件，这样就可以很方便的使用模态窗口了。先把代码post上来。后续说明再添加上去。我这里面加入了一个拖动事件，原因是有的页面会禁止鼠标选择页面文本和鼠标右键的功能，这会影响到窗口的拖动效果。所以不得已只好自己重新实现一个拖动效果，如果不需要的话可以自行去掉。发表与我的博客 http:/www.chihoo.me/archives/87 /模态窗口插件(function($) $.Dialog = option: title: dialog, height: 300, width: 500, modal: true, resizable: false, external: true, draggable: true , open: function(url, dlgid, options) var op = $.extend(, $.Dialog.option, options); var draggable = op.draggable; op.draggable = false; /关闭ui.dialog的默认拖动事件，改用自定义事件draggable dlgid += new Date().getTime(); / 加入当前时间戳，建立动态ID避免ID冲突 var tempDialog = document.getElementById(dlgid); if (tempDialog != undefined & tempDialog != null) $dialog = $(tempDialog); else $body = $(body); $div = $(); $div.attr(id, dlgid); $body.append($div); $dialog = $(# + dlgid); if (op.external) var iframeWidth = parseInt(op.width) - 10; var iframeHeight = parseInt(op.height); iframe = $().attr( src: url, frameborder: 0, marginwidth: 0, marginheight: 0 ) .css( width: iframeWidth + px, height: iframeHeight + px, margin: 5px ); $dialog.html(iframe); else /嵌入html alert(不支持external: false的模式); $dialog.dialog(op); $dialog.height(parseInt(op.height) - $($dialog).siblings(.ui-dialog-titlebar).outerHeight(); iframe.height(parseInt(op.height) - $($dialog).siblings(.ui-dialog-titlebar).outerHeight(); if (op.param) $dialog.data(param, op.param); $dialog.data(dlgid + callback, options.callback); $(body).data(dlgid, $dialog); /添加窗口拖动事件 if (draggable) $.Dialog.draggable(dlgid); var iframeObj = $(# + dlgid + iframe).get(0).contentWindow; /在iframe的页面中创建window.dialogVal方法，在iframe中使用window.dialogVal()取得传递的参数 iframeObj.dialogVal = function() if ($dialog.data(param) != undefined & $dialog.data(param) != null) return $dialog.data(param); else return ; /在iframe的页面中创建window.closeDialog方法，在iframe中使用window.closeDialog()关闭窗口 iframeObj.closeDialog = function() $.Dialog.close(dlgid); /在iframe的页面中创建window.closeDialogAndReturn方法， /在iframe中使用window.closeDialogAndReturn(returnValue)关闭窗口并返回参数,returnValue为返回的参数 iframeObj.closeDialogAndReturn = function(returnValue) $.Dialog.closeAndReturnVal(dlgid, returnValue); /除去原有的关闭事件并绑定自定义关闭动作 $(# + dlgid).siblings(.ui-dialog-titlebar).find(.ui-dialog-titlebar-close).unbind().bind(click, function() $.Dialog.close(dlgid); ); , /关闭dialog close: function(dialog) if (typeof dialog = string) dialog = $(body).data(dialog); if (dialog = undefined | dialog = null) dialog = $(# + dialog); $(iframe, dialog).remove(); dialog.dialog(close); dialog.parent().remove(); /移除新建的窗口 dialog.remove(); , /关闭dialog并执行返回函数 closeAndReturnVal: function(dlgid, returnValue) var dialog = dlgid; if (typeof dialog = string) dialog = $(body).data(dialog); if (dialog = undefined | dialog = null) dialog = $(# + dialog); if ($(dialog).data(dlgid + callback) != null) $(dialog).data(dlgid + callback).apply(this, returnValue); /执行回调函数并返回value,value可自行定义，在回调函数中自行操作 $.Dialog.close(dialog); , draggable: function(dlgid) $dialog = $(# + dlgid); var bool = false; $dialog.siblings(.ui-dialog-titlebar).css(cursor, move); $dialog.siblings(.ui-dialog-titlebar).unbind().select(function() return false; ).mousedown(function(e) bool = true; $dialog.data(offsetX, e.pageX); $dialog.data(offsetY, e.pageY); $dialog.data(left, $dialog.parent().offset().left); $dialog.data(top, $dialog.parent().offset().top); ).mouseleave(function() bool = false; ); $(document).mouseleave(function() bool = false; ).mouseup(function() bool = false; ).mousemove(function(e) if (!bool) return; var offsetX = $dialog.data(offsetX); var offsetY = $dialog.data(offsetY); var left = $dialog.data(left); var top = $dialog.data(top); v