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

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

在奋斗的大道

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

阅读量734

点赞数

分类专栏： Jquery学习笔记

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18308507

版权

Jquery学习笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

jQuery Dialog组件用来显示对话框，模式或非模式的。

基本用法

 
<!doctype html>
 
<html lang="en">
 
<head>
 
    <meta charset="utf-8" />
 
    <title>jQuery UI Demos</title>
 
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    <script src="scripts/jquery-1.9.1.js"></script>
 
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
    <script>
 
        $(function () {
 
            $("#dialog").dialog();
 
        });
 
  </script>
 
</head>
 
<body>
 
  
 
<div id="dialog" title="Basic dialog">
 
    <p>This is the default dialog which
 
        is useful for displaying information.
 
        The dialog window can be moved,
 
        resized and closed with the 'x' icon.</p>
 
</div>
 
  
 
  
 
</body>
 
</html>

对话框的缺省显示有“X”关闭按钮，可以缩放，移动。

动画显示效果
可以为对话框显示和关闭添加动画效果，如果不希望对话框一开始就显示（这可能是大部分情况，在点击按钮或是某个事件发生后再显示对话框）可以通过配置autoOpen=false来设置。

 
<!doctype html>
 
<html lang="en">
 
<head>
 
    <meta charset="utf-8" />
 
    <title>jQuery UI Demos</title>
 
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    <script src="scripts/jquery-1.9.1.js"></script>
 
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
    <script>
 
        $(function () {
 
            $("#dialog").dialog({
 
                autoOpen: false,
 
                show: {
 
                    effect: "blind",
 
                    duration: 1000
 
                },
 
                hide: {
 
                    effect: "explode",
 
                    duration: 1000
 
                }
 
            });
 
 
 
            $("#opener").click(function () {
 
                $("#dialog").dialog("open");
 
            });
 
        });
 
  </script>
 
</head>
 
<body>
 
  
 
<div id="dialog" title="Basic dialog">
 
    <p>This is an animated dialog which is useful
 
        for displaying information.
 
        The dialog window can be moved,
 
         resized and closed with the 'x' icon.</p>
 
</div>
 
 <button id="opener">Open Dialog</button>
 
  
 
</body>
 
</html>

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

在奋斗的大道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入门教程(33): jQuery UI Dialog 示例（一）

jQuery Dialog组件用来显示对话框，模式或非模式的。基本用法12html lang="en">3head>4 meta charset="utf-8" />5
复制链接

扫一扫

专栏目录