• jQuery UI (10)Dialog 对话框插件


    在一个交互覆盖层中打开内容。

    对话框是一个悬浮窗口,包括一个标题栏和一个内容区域。对话框窗口可以移动,重新调整大小,默认情况下通过 'x' 图标关闭。

    如果内容长度超过最大高度,一个滚动条会自动出现。

    一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。

    焦点

    当打开一个对话框时,焦点会自动移动到满足下面条件的第一个项目:

    1. 带有 autofocus 属性的对话框内的第一个元素
    2. 对话框内容内的第一个 :tabbable 元素
    3. 对话框按钮面板内的第一个 :tabbable 元素
    4. 对话框的关闭按钮
    5. 对话框本身

    当打开时,对话框部件(Dialog Widget)确保通过 tab 切换对话框内元素间的焦点,不包括对话框外的元素。模态对话框防止鼠标用户点击对话框外的元素。

    当关闭对话框时,焦点自动返回到之前对话框打开时获得焦点的元素上。

    隐藏关闭按钮

    在一些情况下,您可能想要隐藏关闭按钮,例如,在按钮面板中已经有一个关闭按钮的情况。最好的解决方法是通过 CSS。作为实例,您可以定义一个简单的规则,比如:

    .no-close .ui-dialog-titlebar-close {
      display: none;
    }

    然后,您可以添加 no-close class 到任意的对话框,用来隐藏关闭按钮:

    $( "#dialog" ).dialog({
      dialogClass: "no-close",
      buttons: [
        {
          text: "OK",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ]
    });

    主题化

    对话框部件(Dialog Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用对话框指定的样式,则可以使用下面的 CSS class 名称:

    • ui-dialog:对话框的外层容器。
      • ui-dialog-titlebar:包含对话框标题和关闭按钮的标题栏。
        • ui-dialog-title:对话框文本标题周围的容器。
        • ui-dialog-titlebar-close:对话框的关闭按钮。
      • ui-dialog-content:对话框内容周围的容器。这也是部件被实例化的元素。
      • ui-dialog-buttonpane:包含对话按钮的面板。只有当设置了 buttons 选项时才呈现。
        • ui-dialog-buttonset:按钮周围的容器。

    此外,当设置了 modal 选项时,一个带有 ui-widget-overlay class 名称的元素被追加到 <body>

    依赖

    附加说明

    • 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。

    快速导航

    选项

    • appendTo:dialog(和遮罩层,如果modal存在)应该被追加到哪个元素。
    • autoOpen:当设置为 true 时, dialog 会在初始化时自动打开. 如果为 false dialog 将会继续隐藏直到调用open()方法 。
    • buttons:指定哪些按钮应该在dialog上显示。 回调的上下文是dialog元素(注:this指向); 如果你需要访问按钮, 可以利用事件对象的目标元素。
    • closeOnEscape:指定具有焦点的dialog,在用户按下退出(ESC)键时,是否应该关闭 。
    • closeText:指定关闭按钮的文本。 注意,关闭文本在使用标准的主题时,是隐藏的(visibly:hidden)。
    • dialogClass:在使用额外附加的主题时,指定dialog的类名称,这些样式添加到dialog上。
    • draggable:如果设置为true, dialog将可以使用标题栏实现拖动。需要包含 jQuery UI Draggable 部件
    • height:设置对话框的高度(单位:像素)。
    • hide:dialog关闭(隐藏)时的动画效果。
    • maxHeight:dialog可以调整的最大高度,以像素为单位。
    • maxWidth:dialog可以调整的最大宽度,以像素为单位。
    • minHeight:dialog可以调整的最小高度,以像素为单位。
    • minWidth:dialog可以调整的最小宽度,以像素为单位。
    • modal:如果设置为true,该dialog将会有遮罩层; 页面上的其他项目将被禁用, 即,不能交互。 遮罩层创建对话框下方,但高于其它页面元素。
    • position:指定dialog显示的位置。该dialog将会处理冲突  ,使得尽可能多的dialog尽可能地可见。
    • resizable:如果设置为true, 那么dialog允许调整大小。需要包含jQuery UI Resizable widget
    • show:dialog打开(显示)时的动画效果。
    • title:指定dialog的标题文字。 如果值为null,那么该dialog 元素上的title属性将被使用。
    • width:设置dialog的宽度(单位:像素)。

    方法

    Extension Points

    事件

    事件参数ui

    • originalPosition:Type: Object
      对话框被调整大小 之前的CSS position(位置)对象 。
    • position:Type: Object
      对话框当前的CSS position(位置)对象。
    • originalSize:Type: Object
      对话框被调整大小 之前的size(尺寸)对象 。
    • size:Type: Object
      对话框当前的size(尺寸)对象。

    实例

    一个简单的 jQuery UI 对话框(Dialog)。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>对话框部件(Dialog Widget)演示</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    </head>
    <body>
     
    <button id="opener">打开对话框</button>
    <div id="dialog" title="对话框标题">我是一个对话框</div>
     
    <script>
    $( "#dialog" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
    </script>
     
    </body>
    </html>
    查看演示

    010_结果

  • 相关阅读:
    Win10 主题 美化 动漫
    Win10 主题 美化 动漫
    span 居中
    This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery
    10 Future Web Trends 十大未来互联网趋势
    10 Future Web Trends 十大未来互联网趋势
    使用pycharm进行简单的数据库管理
    使用pycharm进行简单的数据库管理
    Python开发利器PyCharm 2.7附注册码
    Python开发利器PyCharm 2.7附注册码
  • 原文地址:https://www.cnblogs.com/springsnow/p/9461720.html
Copyright © 2020-2023  润新知