首页 > 程序开发 > web前端 > JavaScript >

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

2013-04-03

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"...

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 &#39;x&#39; 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 &#39;x&#39; icon.</p>

36 </div>

37 <button id="opener">Open Dialog</button>

38

39 </body>

40 </html>

20130320005

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

相关文章
最新文章
热点推荐