jQueryUI的Dialog的简单封装

所属分类：网络编程 / JavaScript 阅读数： 1013

收藏 0赞 0分享

写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的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(); 
}); 
}); 