这几天在做一个交互的原型，第一次大量采用jQueryUI，确实非常方便好用，其中一些功能点用到了弹出确认提示框，看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。
DialogHelper的源代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
//--对话框辅助对象-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
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$(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();
});
});
|
下载源代码：
本文转自Justin博客园博客，原文链接：http://www.cnblogs.com/justinw/archive/2010/06/04/1751194.html，如需转载请自行联系原作者
