本文介绍如何使用jQuery EasyUI库创建弹出式对话框，并详细解释了如何配置对话框的属性，如标题、图标、尺寸、可折叠、最小化、最大化、可调整大小以及模态特性。此外，还展示了如何为对话框添加工具栏、按钮栏以及事件处理。
http://www.cnblogs.com/libingql/archive/2011/09/27/2193690.html
<head runat=
"server"
>
<title>Dialog</title>
<link href=
"/jquery-easyui-1.2.4/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"/jquery-easyui-1.2.4/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/jquery.easyui.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(function () {
$(
'#dlg'
).dialog({
title:
'对话框'
,
iconCls:
"icon-edit"
,
collapsible:
true
,
minimizable:
true
,
maximizable:
true
,
resizable:
true
,
width: 300,
height: 200,
modal:
true
});
});
</script>
</head>
<body>
<div id=
"dlg"
>
Content
</div>
</body>
</html>
|
或
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<head runat=
"server"
>
<title>Dialog</title>
<link href=
"/jquery-easyui-1.2.4/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"/jquery-easyui-1.2.4/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/jquery.easyui.min.js"
type=
"text/javascript"
></script>
</head>
<body>
<div id=
"dlg"
class
=
"easyui-dialog"
style=
"width:300px; height:200px;"
title=
"对话框"
iconCls=
"icon-edit"
>
Content
</div>
</body>
</html>
|
效果图：
2、工具栏、按钮栏
代码：
|
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
|
<script type=
"text/javascript"
>
$(
function
() {
$(
'#dlg'
).dialog({
title:
'对话框'
,
iconCls:
"icon-edit"
,
collapsible:
true
,
minimizable:
true
,
maximizable:
true
,
resizable:
true
,
width: 300,
height: 200,
modal:
true
,
href:
"Content.aspx"
,
onClose:
function
() {
alert(
"Close"
);
},
toolbar: [{
text:
'Add'
,
iconCls:
'icon-add'
,
handler:
function
() {
alert(
'add'
);
}
},
'-'
, {
text:
'Save'
,
iconCls:
'icon-save'
,
handler:
function
() {
alert(
'save'
);
}
}],
buttons: [{
text:
'Ok'
,
iconCls:
'icon-ok'
,
handler:
function
() {
alert(
'ok'
);
}
}, {
text:
'Cancel'
,
iconCls:
'icon-cancel'
,
handler:
function
() {
$(
'#dlg'
).dialog(
'close'
);
}
}]
});
});
</script>
|
效果图：
3、参数
| 属性名 | 类型 | 描述 | 默认值 |
| title | 字符串 | 对话框的标题文本 | New Dialog |
| collapsible | 布尔 | 定义是否显示可折叠按钮 | false |
| minimizable | 布尔 | 定义是否显示最小化按钮 | false |
| maximizable | 布尔 | 定义是否显示最大化按钮 | false |
| resizable | 布尔 | 定义对话框是否可编辑大小 | false |
| toolbar | 数组 | 对话框上的工具条，每个工具条包括: | text, iconCls, disabled, handler etc. null |
| buttons | 数组 | 对话框底部的按钮，每个按钮包括: | text, iconCls, handler etc. null |
4、事件
Dialog的事件和窗口(Window)的事件相同。
5、方法
Dialog的函数方法和窗口(Window)的相同。
扫一扫
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
