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

最新推荐文章于 2018-03-27 19:25:48 发布

引路蜂

最新推荐文章于 2018-03-27 19:25:48 发布

阅读量2.8k

点赞数 2

分类专栏：教程 jQuery JavaScript jQuery教程

教程同时被 3 个专栏收录

666 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 0 订阅

订阅专栏

jQuery

48 篇文章 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>