jQueryUI的Dialog的简单封装 |
本文标签:jQueryUI,Dialog 写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙 。思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见 。 DialogHelper的源代码如下: 复制代码 代码如下: //--对话框辅助对象-begin //现在这个对象只是简单的封装(未来可能会复杂些) 。 //其作用就是简化jQuery UI的dialog的的调用方式,不在需要改动独立的DOM结构,参数传递方式更直接 。 DialogHelper = function() { var m_title = ""; //设置标题 var m_msg = ""; //设置消息正文 var m_btns = null; //设置按钮 this.dlgDiv = $("<div><p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin: 0 7px 20px 0;\"></span></p></div>");//这部分可根据情况自定义 //todo:图标、高度、宽度、弹出模式等都应该可以设置 。 this.set_Title = function(val) { this.m_title = val; } this.get_Title = function() { return this.m_title; } this.set_Msg = function(val) { this.m_msg = val; } this.get_Msg = function() { return this.m_msg; } this.set_Buttons = function(val) { this.m_btns = val; } this.get_Buttons = function() { return this.m_btns; } this.open = function() { $dlg = this.dlgDiv.clone(); //这个克隆很重要,否则反复添加正文 。 $dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() + this.get_Msg()); //增加自定义消息 $dlg.dialog({ autoOpen: true, show: blind, hide: explode, position: center, height: 260, width: 460, modal: true, title: this.get_Title(), buttons: this.get_Buttons() }); } //todo:考虑是否有内存泄露的可能 } //--对话框辅助对象-end 使用DialogHelper辅助类的代码如下: 复制代码 代码如下: $(document).ready(function() { $(#opener).click(function() { //初始化一个辅助对象,这个对象可以作为全局对象只创建一次后反复使用更好! dlgHelper = new DialogHelper(); //设置个性化信息 dlgHelper.set_Title("确认要删除现有项目吗?"); dlgHelper.set_Msg("执行这个操作,原来的项目将被删除,你确认要这么做吗?"); dlgHelper.set_Buttons({ 确定: function(ev) { //这里可以调用其他公共方法 。 $(this).dialog(close); }, 取消: function() { //这里可以调用其他公共方法 。 $(this).dialog(close); } }); //打开窗体 dlgHelper.open(); }); }); 代码打包下载 http://xiazai.jb51.net/201006/yuanma/jQueryUI_DialogDemo.rar |