jQuery 入门教程(33): jQuery UI Dialog 示例（一）
虾米哥
阅读：585
2021-04-01 09:58:23
评论：0
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支持的通用的动态效果。
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
