[jQuery]关于jQueryUI的Dialog的简单封装
这几天在做一个交互的原型，第一次大量采用jQueryUI，确实非常方便好用，其中一些功能点用到了弹出确认提示框，看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。
DialogHelper的源代码如下：
01 |
//--对话框辅助对象-begin |
02 |
//现在这个对象只是简单的封装(未来可能会复杂些)。 |
03 |
//其作用就是简化jQuery UI的dialog的的调用方式，不在需要改动独立的DOM结构，参数传递方式更直接。 |
04 |
DialogHelper = function() { |
05 |
var m_title = ""; //设置标题 |
06 |
var m_msg = ""; //设置消息正文 |
07 |
var m_btns = null; //设置按钮 |
08 |
this.dlgDiv = $("<div><p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin: 0 7px 20px 0;\"></span></p></div>");//这部分可根据情况自定义 |
09 |
//todo:图标、高度、宽度、弹出模式等都应该可以设置。 |
10 |
this.set_Title = function(val) { |
11 |
this.m_title = val; |
12 |
} |
13 |
this.get_Title = function() { |
14 |
return this.m_title; |
15 |
} |
16 |
this.set_Msg = function(val) { |
17 |
this.m_msg = val; |
18 |
} |
19 |
this.get_Msg = function() { |
20 |
return this.m_msg; |
21 |
} |
22 |
this.set_Buttons = function(val) { |
23 |
this.m_btns = val; |
24 |
} |
25 |
this.get_Buttons = function() { |
26 |
return this.m_btns; |
27 |
} |
28 |
this.open = function() { |
29 |
$dlg = this.dlgDiv.clone(); //这个克隆很重要,否则反复添加正文。 |
30 |
$dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() + this.get_Msg()); //增加自定义消息 |
31 |
$dlg.dialog({ |
32 |
autoOpen: true, |
33 |
show: 'blind', |
34 |
hide: 'explode', |
35 |
position: 'center', |
36 |
height: 260, |
37 |
width: 460, |
38 |
modal: true, |
39 |
title: this.get_Title(), |
40 |
buttons: this.get_Buttons() |
41 |
}); |
42 |
} |
43 |
//todo:考虑是否有内存泄露的可能 |
44 |
} |
45 |
//--对话框辅助对象-end |
使用DialogHelper辅助类的代码如下：
01 |
$(document).ready(function() { |
02 |
$('#opener').click(function() { |
03 |
//初始化一个辅助对象，这个对象可以作为全局对象只创建一次后反复使用更好！ |
04 |
dlgHelper = new DialogHelper(); |
05 |
//设置个性化信息 |
06 |
dlgHelper.set_Title("确认要删除现有项目吗？"); |
07 |
dlgHelper.set_Msg("执行这个操作，原来的项目将被删除，你确认要这么做吗？"); |
08 |
dlgHelper.set_Buttons({ |
09 |
'确定': function(ev) { |
10 |
//这里可以调用其他公共方法。 |
11 |
$(this).dialog('close'); |
12 |
}, |
13 |
'取消': function() { |
14 |
//这里可以调用其他公共方法。 |
15 |
$(this).dialog('close'); |
16 |
} |
17 |
}); |
18 |
//打开窗体 |
19 |
dlgHelper.open(); |
20 |
}); |
21 |
}); |
下载源代码：
浙公网安备 33010602011771号