jQuery 入门教程(33): jQuery UI Dialog 示例(一)分析

虾米哥 阅读:300 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>

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

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号