你好,游客 登录 注册 搜索
背景:
阅读新闻

jQuery 入门教程(33): jQuery UI Dialog 示例(一) - 引路蜂移动软件

[日期:2013-04-02] 来源:  作者: [字体: ]

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支持的通用的动态效果。

 




收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻