jQuery 入门教程(33): jQuery UI Dialog 示例(一)
jQuery Dialog组件用来显示对话框,模式或非模式的。
基本用法
1 |
<!doctype html> |
2 |
< html lang = "en" > |
3 |
< head > |
4 |
< meta charset = "utf-8" /> |
5 |
< title >jQuery UI Demos</ title > |
6 |
< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" /> |
7 |
< script src = "scripts/jquery-1.9.1.js" ></ script > |
8 |
< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script > |
9 |
< script > |
10 |
$(function () { |
11 |
$("#dialog").dialog(); |
12 |
}); |
13 |
</ script > |
14 |
</ head > |
15 |
< body > |
16 |
|
17 |
< div id = "dialog" title = "Basic dialog" > |
18 |
< p >This is the default dialog which |
19 |
is useful for displaying information. |
20 |
The dialog window can be moved, |
21 |
resized and closed with the 'x' icon.</ p > |
22 |
</ div > |
23 |
|
24 |
|
25 |
</ body > |
26 |
</ html > |
对话框的缺省显示有“X”关闭按钮,可以缩放,移动。
动画显示效果
可以为对话框显示和关闭添加动画效果,如果不希望对话框一开始就显示(这可能是大部分情况,在点击按钮或是某个事件发生后再显示对话框)可以通过配置autoOpen=false来设置。
1 |
<!doctype html> |
2 |
< html lang = "en" > |
3 |
< head > |
4 |
< meta charset = "utf-8" /> |
5 |
< title >jQuery UI Demos</ title > |
6 |
< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" /> |
7 |
< script src = "scripts/jquery-1.9.1.js" ></ script > |
8 |
< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script > |
9 |
< script > |
10 |
$(function () { |
11 |
$("#dialog").dialog({ |
12 |
autoOpen: false, |
13 |
show: { |
14 |
effect: "blind", |
15 |
duration: 1000 |
16 |
}, |
17 |
hide: { |
18 |
effect: "explode", |
19 |
duration: 1000 |
20 |
} |
21 |
}); |
22 |
23 |
$("#opener").click(function () { |
24 |
$("#dialog").dialog("open"); |
25 |
}); |
26 |
}); |
27 |
</ script > |
28 |
</ head > |
29 |
< body > |
30 |
|
31 |
< div id = "dialog" title = "Basic dialog" > |
32 |
< p >This is an animated dialog which is useful |
33 |
for displaying information. |
34 |
The dialog window can be moved, |
35 |
resized and closed with the 'x' icon.</ p > |
36 |
</ div > |
37 |
< button id = "opener" >Open Dialog</ button > |
38 |
|
39 |
</ body > |
40 |
</ html > |
show 和 hide支持的动画效果,后面再专门介绍,这些效果同时使用与其它方面,为jQuery支持的通用的动态效果。