jQuery 入门教程(33): jQuery UI Dialog 示例（一）

来源：互联网发布：mac文明编辑：程序博客网时间：2024/05/29 18:38

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>

20130320004

对话框的缺省显示有“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>

20130320005

show 和 hide支持的动画效果，后面再专门介绍，这些效果同时使用与其它方面，为jQuery支持的通用的动态效果。

0 0