jQuery UI API - 對話框部件（Dialog Widget）

所屬類別

小部件（Widgets）

用法

描述：在一個交互覆蓋層中打開內(nèi)容。

版本新增：1.0

對話框是一個懸浮窗口，包括一個標(biāo)題欄和一個內(nèi)容區(qū)域。對話框窗口可以移動，重新調(diào)整大小，默認(rèn)情況下通過 'x' 圖標(biāo)關(guān)閉。

如果內(nèi)容長度超過最大高度，一個滾動條會自動出現(xiàn)。

一個底部按鈕欄和一個半透明的模式覆蓋層是常見的添加選項。

焦點

當(dāng)打開一個對話框時，焦點會自動移動到滿足下面條件的第一個項目：

  1. 帶有 autofocus 屬性的對話框內(nèi)的第一個元素
  2. 對話框內(nèi)容內(nèi)的第一個 :tabbable 元素
  3. 對話框按鈕面板內(nèi)的第一個 :tabbable 元素
  4. 對話框的關(guān)閉按鈕
  5. 對話框本身

當(dāng)打開時，對話框部件（Dialog Widget）確保通過 tab 切換對話框內(nèi)元素間的焦點，不包括對話框外的元素。模態(tài)對話框防止鼠標(biāo)用戶點擊對話框外的元素。

當(dāng)關(guān)閉對話框時，焦點自動返回到之前對話框打開時獲得焦點的元素上。

隱藏關(guān)閉按鈕

在一些情況下，您可能想要隱藏關(guān)閉按鈕，例如，在按鈕面板中已經(jīng)有一個關(guān)閉按鈕的情況。最好的解決方法是通過 CSS。作為實例，您可以定義一個簡單的規(guī)則，比如：

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

然后，您可以添加 no-close class 到任意的對話框，用來隱藏關(guān)閉按鈕：

$( "#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：包含對話框標(biāo)題和關(guān)閉按鈕的標(biāo)題欄。
      • ui-dialog-title：對話框文本標(biāo)題周圍的容器。
      • ui-dialog-titlebar-close：對話框的關(guān)閉按鈕。
    • ui-dialog-content：對話框內(nèi)容周圍的容器。這也是部件被實例化的元素。
    • ui-dialog-buttonpane：包含對話按鈕的面板。只有當(dāng)設(shè)置了 buttons 選項時才呈現(xiàn)。
      • ui-dialog-buttonset：按鈕周圍的容器。

此外，當(dāng)設(shè)置了 modal 選項時，一個帶有 ui-widget-overlay class 名稱的元素被追加到 <body>。

依賴

附加說明

  • 該部件要求一些功能性的 CSS，否則將無法工作。如果您創(chuàng)建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。

實例

一個簡單的 jQuery UI 對話框（Dialog）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>對話框部件（Dialog Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
</head>
<body>
 
<button id="opener">打開對話框</button>
<div id="dialog" title="對話框標(biāo)題">我是一個對話框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

查看演示