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

     
  • 相关阅读:
    C语言基础课程 第二课 HelloWorld不为菜鸟所知的秘密
    C语言基础课程 第一课 Linux环境配置小实战httpserver
    Linux企业级开发技术(6)——libevent企业级开发之内存管理
    Linux企业级开发技术(7)——libevent企业级开发之锁和线程
    Linux内存管理学习笔记--概述
    5月16日云栖精选夜读:从0到1构建大数据生态系列1:数据蛮荒中的拓荒之举
    luoguP1063 能量项链
    bzoj1060 [ZJOI2007]时态同步
    bzoj1864 [Zjoi2006]三色二叉树
    bzoj1864 [Zjoi2006]三色二叉树
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/2995317.html
Copyright © 2011-2022 走看看