本文介绍了一个用于简化 jQuery UI Dialog 调用的 DialogHelper 辅助类。该类通过封装标题、消息和按钮配置,避免了直接操作 DOM 结构的繁琐,提供了更直接的参数传递方式。文章提供了完整的源代码及调用示例,展示了如何初始化、配置并打开对话框,旨在为开发者提供清晰的封装思路与实用代码参考。
DialogHelper 封装思路与背景
编写出的代码逻辑略显复杂,因此需要进行进一步的封装优化。基于此,本文介绍了一个简单的 DialogHelper 辅助类。由于本文的核心在于分享设计思路,当前版本的代码实现尚显基础。只要核心思路正确,后续的形态调整只是形式问题。希望这一思路能带来启发,也欢迎读者提出更优的改进建议。
DialogHelper 的完整源代码如下:
DialogHelper 辅助类源码解析
具体实现代码如下:
--对话框辅助对象定义开始
当前对象仅进行了基础封装(未来版本可能会增加更多功能)。
其主要作用是简化 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>"); // 此部分可根据实际需求进行自定义调整
// 待办事项:图标、高度、宽度、弹出模式等属性均应支持配置。
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()
});
}
// 待办事项:需评估是否存在内存泄露风险
}
--对话框辅助对象定义结束 使用 DialogHelper 辅助类的调用代码如下:
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