zoukankan      html  css  js  c++  java
  • jQuery 入门教程(33): jQuery UI Dialog 示例(一)

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

     
  • 相关阅读:
    RecyclerView中装饰者模式应用
    Android中的Drawable和动画
    Android的线程和线程池
    Bitmap的加载和Cache
    Android的消息机制
    【Java基础】线程和并发机制
    Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
    Asp.Net MVC @Html.TextBox 只允许输入数字问题
    程序员编程10大原则,请牢牢记住
    Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/2995317.html
Copyright © 2011-2022 走看看