jQuery UI - 對話方塊

上一頁
下一頁

對話方塊是在 HTML 頁面上呈現資訊的一種不錯的方式。對話方塊是一個帶有標題和內容區域的浮動視窗。預設情況下，可以使用“X”圖示移動、調整此視窗的大小，當然也可以關閉它。

jQuery UI 提供了 `dialog()` 方法，該方法將頁面上編寫的 HTML 程式碼轉換為 HTML 程式碼以顯示對話方塊。

語法

`dialog()` 方法可以用兩種形式使用：

$(selector, context).dialog (options) 方法

`dialog (options)` 方法宣告可以以對話方塊的形式管理 HTML 元素。`options` 引數是一個物件，用於指定該視窗的外觀和行為。

語法

$(selector, context).dialog(options);

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：

$(selector, context).dialog({option1: value1, option2: value2..... });

下表列出了可與此方法一起使用的不同`options`：

序號 選項和描述
1 appendTo

如果將此選項設定為`false`，則會阻止將`ui-draggable` 類新增到選定 DOM 元素列表中。預設值為`true`。

選項 - appendTo

此選項用於將對話方塊附加到指定的元素。預設值為`"body"`。

語法

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2 autoOpen

除非此選項設定為`false`，否則對話方塊將在建立時開啟。設定為`false` 時，對話方塊將在呼叫 dialog('open') 時開啟。預設值為`true`。

選項 - autoOpen

除非此選項設定為`false`，否則對話方塊將在建立時開啟。設定為`false` 時，對話方塊將在呼叫 dialog('open') 時開啟。預設值為`true`。

語法

$(".selector").dialog(
   { autoOpen: false }
);
3 buttons

此選項在對話方塊中新增按鈕。這些按鈕列為物件，每個屬性都是按鈕上的文字。其值是在使用者單擊按鈕時呼叫的回撥函式。預設值為`{}`。

選項 - buttons

此選項在對話方塊中新增按鈕。這些按鈕列為物件，每個屬性都是按鈕上的文字。其值是在使用者單擊按鈕時呼叫的回撥函式。預設值為`{}`。

此處理程式以對話方塊元素的函式上下文呼叫，並傳遞事件例項，其中按鈕設定為目標屬性。如果省略，則不會為對話方塊建立任何按鈕。

語法

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
4 closeOnEscape

除非此選項設定為`false`，否則當用戶在對話方塊具有焦點時按下 Esc 鍵時，對話方塊將關閉。預設值為`true`。

選項 - closeOnEscape

除非此選項設定為`false`，否則當用戶在對話方塊具有焦點時按下 Esc 鍵時，對話方塊將關閉。預設值為`true`。

語法

$(".selector").dialog(
   { closeOnEscape: false }
);
5 closeText

此選項包含要替換關閉按鈕預設“關閉”文字的文字。預設值為`"close"`。

選項 - closeText

此選項包含要替換關閉按鈕預設“關閉”文字的文字。預設值為`"close"`。

語法

$(".selector").dialog(
   { closeText: "hide" }
);
6 dialogClass

如果將此選項設定為`false`，則會阻止將`ui-draggable` 類新增到選定 DOM 元素列表中。預設值為`""`。

選項 - dialogClass

如果將此選項設定為`false`，則會阻止將`ui-draggable` 類新增到選定 DOM 元素列表中。預設值為`""`。

語法

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 draggable

除非您將此選項設定為`false`，否則可以透過單擊並拖動標題欄來拖動對話方塊。預設值為`true`。

選項 - draggable

除非您將此選項設定為`false`，否則可以透過單擊並拖動標題欄來拖動對話方塊。預設值為`true`。

語法

$(".selector").dialog(
   { draggable: false }
);
8 height

此選項設定對話方塊的高度。預設值為`"auto"`。

選項 - height

如果此選項設定對話方塊的高度。預設值為`"auto"`。此選項可以是以下型別：

可以是以下型別：

  • 數字 - 指定以毫秒為單位的持續時間

  • 字串 - 唯一支援的字串值是`auto`，它將允許對話方塊高度根據其內容進行調整。

語法

$(".selector").dialog(
   { height: 400 }
);
9 hide

此選項用於設定關閉對話方塊時要使用的效果。預設值為`null`。

選項 - hide

此選項用於設定關閉對話方塊時要使用的效果。預設值為`null`。

可以是以下型別：

  • 布林值 - 值可以是`true/false`。如果為`false`，則不使用動畫，對話方塊將立即隱藏。如果為`true`，對話方塊將使用預設持續時間和預設緩動效果淡出。

  • 數字 - 對話方塊將使用指定的持續時間和預設緩動效果淡出。

  • 字串 - 對話方塊將使用指定的效果隱藏，例如`slideUp`、`fold`。

  • 物件 - 如果值為物件，則可以提供`effect`、`delay`、`duration` 和`easing` 屬性來隱藏對話方塊。

    10

語法

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11 maxHeight

此選項設定對話方塊可以調整到的最大高度（以畫素為單位）。預設值為`false`。

選項 - maxHeight

此選項設定對話方塊可以調整到的最大高度（以畫素為單位）。預設值為`false`。

語法

$(".selector").dialog(
   { maxHeight: 600 }
);
12 maxWidth

此選項設定對話方塊可以調整到的最大寬度（以畫素為單位）。預設值為`false`。

選項 - maxWidth

此選項設定對話方塊可以調整到的最大寬度（以畫素為單位）。預設值為`false`。

語法

$(".selector").dialog(
   { maxWidth: 600 }
);
13 minHeight

此選項是對話方塊可以調整到的最小高度（以畫素為單位）。預設值為`150`。

選項 - minHeight

此選項是對話方塊可以調整到的最小高度（以畫素為單位）。預設值為`150`。

語法

$(".selector").dialog(
   { minHeight: 200 }
);
14 minWidth

此選項是對話方塊可以調整到的最小寬度（以畫素為單位）。預設值為`150`。

選項 - minWidth

此選項是對話方塊可以調整到的最小寬度（以畫素為單位）。預設值為`150`。

語法

$(".selector").dialog(
   { minWidth: 200 }
);
15 modal

如果將此選項設定為`true`，則對話方塊將具有模態行為；頁面上的其他專案將被停用，即無法與之互動。模態對話方塊會在對話方塊下方但頁面元素上方建立一個覆蓋層。預設值為`false`。

選項 - modal

如果將此選項設定為`true`，則對話方塊將具有模態行為；頁面上的其他專案將被停用，即無法與之互動。模態對話方塊會在對話方塊下方但頁面元素上方建立一個覆蓋層。預設值為`false`。

語法

$(".selector").dialog(
   { modal: true }
);
16 position

此選項指定對話方塊的初始位置。可以是預定義位置之一：`center`（預設值）、`left`、`right`、`top` 或`bottom`。也可以是包含左值和上值（以畫素為單位）的 2 元素陣列，例如 `[left,top]`，或文字位置，例如 `['right','top']`。預設值為`{ my: "center", at: "center", of: window }`。

選項 - position

此選項指定對話方塊的初始位置。可以是預定義位置之一：`center`（預設值）、`left`、`right`、`top` 或`bottom`。也可以是包含左值和上值（以畫素為單位）的 2 元素陣列，例如 `[left,top]`，或文字位置，例如 `['right','top']`。預設值為`{ my: "center", at: "center", of: window }`。

語法

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17 resizable

除非將此選項設定為`false`，否則對話方塊可在所有方向上調整大小。預設值為`true`。

選項 - resizable

除非將此選項設定為`false`，否則對話方塊可在所有方向上調整大小。預設值為`true`。

語法

$(".selector").dialog(
   { resizable: false }
);
18 show

此選項是開啟對話方塊時要使用的效果。預設值為`null`。

選項 - show

此選項是開啟對話方塊時要使用的效果。預設值為`null`。

可以是以下型別：

  • 布林值 - 值可以是`true/false`。如果為`false`，則不使用動畫，對話方塊將立即顯示。如果為`true`，則對話方塊將使用預設持續時間和預設緩動效果淡入。

  • 數字 - 對話方塊將使用指定的持續時間和預設緩動效果淡入。

  • 字串 - 對話方塊將使用指定的效果顯示，例如`slideDown`、`fold`。

  • 物件 - 如果值為物件，則可以提供`effect`、`delay`、`duration` 和`easing` 屬性來顯示對話方塊。

    19

語法

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
20 title

此選項指定要在對話方塊標題欄中顯示的文字。預設值為`null`。

選項 - title

此選項指定要在對話方塊標題欄中顯示的文字。預設值為`null`。

語法

$(".selector").dialog(
   { title: "Dialog Title" }
);
21 width

此選項指定對話方塊的寬度（以畫素為單位）。預設值為`300`。

選項 - width

此選項指定對話方塊的寬度（以畫素為單位）。預設值為`300`。

語法

$(".selector").dialog(
   { width: 500 }
);

以下部分將向您展示一些對話方塊功能的工作示例。

預設功能

以下示例演示了對話方塊功能的簡單示例，未將任何引數傳遞給`dialog()` 方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

按鈕、標題和位置的使用

以下示例演示了在 jQuery UI 的對話方塊小部件中使用三個選項`buttons`、`title` 和`position`。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

hide、show 和 height 的使用

以下示例演示了在 jQuery UI 的對話方塊小部件中使用三個選項`hide`、`show` 和`height`。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

模態的使用

以下示例演示了在 jQuery UI 的對話方塊小部件中使用三個選項`buttons`、`title` 和`position`。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

$(selector, context).dialog ("action", [params]) 方法

`dialog (action, params)` 方法可以在對話方塊上執行操作，例如關閉對話方塊。`action` 在第一個引數中指定為字串，並且根據給定的操作，可以選擇提供一個或多個`params`。

基本上，這裡的操作只不過是以字串形式使用的 jQuery 方法。

語法

$(selector, context).dialog ("action", [params]);

下表列出了此方法的操作：

序號 操作和描述
1 close()

此操作關閉對話方塊。此方法不接受任何引數。

操作 - close()

此操作關閉對話方塊。此方法不接受任何引數。

語法

$(".selector").dialog("close");
2 destroy()

此操作完全刪除對話方塊。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

操作 - destroy()

此操作完全刪除對話方塊。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

語法

$(".selector").dialog("destroy");
3 isOpen()

此操作檢查對話方塊是否已開啟。此方法不接受任何引數。

操作 - isOpen()

此操作檢查對話方塊是否已開啟。此方法不接受任何引數。

語法

$(".selector").dialog("isOpen");
4 moveToTop()

此操作將相應的對話方塊定位到前臺（位於其他對話方塊的頂部）。此方法不接受任何引數。

操作 - moveToTop()

此操作將相應的對話方塊定位到前臺（位於其他對話方塊的頂部）。此方法不接受任何引數。

語法

$(".selector").dialog("moveToTop");
5 open()

此操作開啟對話方塊。此方法不接受任何引數。

操作 - open()

此操作開啟對話方塊。此方法不接受任何引數。

語法

$(".selector").dialog("open");
6 option( optionName )

此操作獲取當前與指定的 optionName 關聯的值。其中`optionName` 是要獲取的選項的名稱。

操作 - option( optionName )

此操作獲取當前與指定的 optionName 關聯的值。其中`optionName` 是要獲取的選項的名稱。

語法

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7 option()

此操作獲取一個物件，其中包含表示當前對話方塊選項雜湊的鍵值對。此方法不接受任何引數。

操作 - option()

此操作獲取一個物件，其中包含表示當前對話方塊選項雜湊的鍵值對。此方法不接受任何引數。

語法

var options = $( ".selector" ).dialog( "option" );
8 option( optionName, value )

此操作設定與指定的 optionName 關聯的對話方塊選項的值。

操作 - option( optionName, value )

此操作設定與指定的 optionName 關聯的對話方塊選項的值。

語法

$(".selector").dialog( "option", "disabled", true );
9 option( options )

此操作設定對話方塊的一個或多個選項。

操作 - option( options )

此操作設定對話方塊的一個或多個選項。

語法

$(".selector").dialog( "option", { disabled: true });
10 widget()

此操作返回對話方塊的小部件元素；用 ui-dialog 類名註釋的元素。此方法不接受任何引數。

操作 - widget()

此操作返回對話方塊的小部件元素；用 ui-dialog 類名註釋的元素。此方法不接受任何引數。

語法

$(".selector").dialog("widget");

示例

現在讓我們看看使用上表中操作的示例。以下示例演示了`isOpen()`、`open()` 和`close()` 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

對話方塊上的事件管理

除了我們在前面章節中看到的對話方塊（選項）方法外，JQueryUI 還提供事件方法，這些方法會在特定事件觸發時被呼叫。這些事件方法列在下面：

序號 事件方法 & 描述
1 beforeClose(event, ui)

當對話方塊即將關閉時觸發此事件。返回 false 可以阻止對話方塊關閉。對於表單驗證失敗的對話方塊非常有用。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - beforeClose(event, ui)

當對話方塊即將關閉時觸發此事件。返回 false 可以阻止對話方塊關閉。對於表單驗證失敗的對話方塊非常有用。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
2 close(event, ui)

當對話方塊關閉時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - close(event, ui)

當對話方塊關閉時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$(".selector").dialog (
   close: function(event, ui) {}
);
3 create(event, ui)

當對話方塊建立時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - create(event, ui)

當對話方塊建立時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$(".selector").dialog (
   create: function(event, ui) {}
);
4 drag(event, ui)

在拖動過程中，對話方塊移動時會重複觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - drag(event, ui)

在拖動過程中，對話方塊移動時會重複觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。ui 的可能值為：

  • position − 一個 jQuery 物件，表示對話方塊當前的 CSS 位置。

  • offset − 一個 jQuery 物件，表示對話方塊當前的偏移位置。

語法

$(".selector").dialog (
   drag: function(event, ui) {}
);
5 dragStart(event, ui)

當透過拖動標題欄開始重新定位對話方塊時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - dragStart(event, ui)

當透過拖動標題欄開始重新定位對話方塊時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。ui 的可能值為：

  • position − 一個 jQuery 物件，表示對話方塊當前的 CSS 位置。

  • offset − 一個 jQuery 物件，表示對話方塊當前的偏移位置。

語法

$(".selector").dialog (
   dragStart: function(event, ui) {}
);
6 dragStop(event, ui)

當拖動操作終止時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - dragStop(event, ui)

當拖動操作終止時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。ui 的可能值為：

  • position − 一個 jQuery 物件，表示對話方塊當前的 CSS 位置。

  • offset − 一個 jQuery 物件，表示對話方塊當前的偏移位置。

語法

$(".selector").dialog (
   dragStop: function(event, ui) {}
);
7 focus(event, ui)

當對話方塊獲得焦點時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - focus(event, ui)

當對話方塊獲得焦點時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$(".selector").dialog (
   focus: function(event, ui) {}
);
8 open(event, ui)

當對話方塊開啟時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - open(event, ui)

當對話方塊開啟時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

語法

$(".selector").dialog (
   open: function(event, ui) {}
);
9 resize(event, ui)

在調整對話方塊大小時會重複觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - resize(event, ui)

在調整對話方塊大小時會重複觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。ui 的可能值為：

  • originalPosition − 一個 jQuery 物件，表示對話方塊在調整大小之前 的CSS 位置。

  • position − 一個 jQuery 物件，表示對話方塊當前的 CSS 位置。

  • originalSize − 一個 jQuery 物件，表示對話方塊在調整大小之前的尺寸。

  • size − 一個 jQuery 物件，表示對話方塊當前的尺寸。

語法

$(".selector").dialog (
   resize: function(event, ui) {}
);
10 resizeStart(event, ui)

當開始調整對話方塊大小時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - resizeStart(event, ui)

當開始調整對話方塊大小時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。ui 的可能值為：

  • originalPosition − 一個 jQuery 物件，表示對話方塊在調整大小之前 的CSS 位置。

  • position − 一個 jQuery 物件，表示對話方塊當前的 CSS 位置。

  • originalSize − 一個 jQuery 物件，表示對話方塊在調整大小之前的尺寸。

  • size − 一個 jQuery 物件，表示對話方塊當前的尺寸。

語法

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
11 resizeStop(event, ui)

當對話方塊大小調整終止時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。

事件 - resizeStop(event, ui)

當對話方塊大小調整終止時觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。ui 的可能值為：

  • originalPosition − 一個 jQuery 物件，表示對話方塊在調整大小之前 的CSS 位置。

  • position − 一個 jQuery 物件，表示對話方塊當前的 CSS 位置。

  • originalSize − 一個 jQuery 物件，表示對話方塊在調整大小之前的尺寸。

  • size − 一個 jQuery 物件，表示對話方塊當前的尺寸。

語法

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

以下示例演示了上表中列出的事件的使用方法。

beforeClose 事件方法的使用

以下示例演示了beforeClose 事件方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

resize 事件方法的使用

以下示例演示了resize 事件方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

讓我們將上述程式碼儲存在名為`dialogexample.htm` 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

擴充套件點

對話方塊小部件使用小部件工廠構建，可以擴充套件。要擴充套件小部件，我們可以覆蓋或新增到現有方法的行為。以下方法提供擴充套件點，其 API 穩定性與對話方塊方法相同。列在上表中。

序號 方法 & 描述
1 _allowInteraction(event)

此方法允許使用者透過將非對話方塊子元素列入白名單來與給定目標元素互動，從而允許使用者使用。其中 event 的型別為 Event。

擴充套件點 - allowInteraction(event, ui)

此方法允許使用者透過將非對話方塊子元素列入白名單來與給定目標元素互動，從而允許使用者使用。其中 event 的型別為 Event。

程式碼示例

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • Select2 外掛用於模態對話方塊中

  • super() 呼叫確保仍然可以與對話方塊內的元素互動。
jQuery UI 小部件工廠是一個可擴充套件的基礎，所有 jQuery UI 的小部件都是基於它構建的。使用小部件工廠構建外掛提供了狀態管理的便利，以及對常見任務（如公開外掛方法和在例項化後更改選項）的約定。
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.