jQuery UI - 按鈕

jQuery UI 提供 `button()` 方法，可以將 HTML 元素（如按鈕、輸入和錨點）轉換為可主題化的按鈕，並自動管理滑鼠移動，所有這些都由 jQuery UI 透明地管理。

為了對單選按鈕進行分組，Button 還提供了一個附加的小部件，稱為 Buttonset。透過選擇一個容器元素（包含單選按鈕）並呼叫 .buttonset() 來使用 Buttonset。

語法

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

$(selector, context).button(options) 方法
$(selector, context).button("action", params) 方法

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

button(options) 方法宣告應將 HTML 元素視為按鈕。options 引數是一個物件，用於指定按鈕的行為和外觀。

語法

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

您可以使用 JavaScript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔：

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

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

序號	選項 & 描述
1	disabled 如果設定為 true，則此選項會停用按鈕。預設值為 false。選項 - disabled 如果設定為 true，則此選項會停用按鈕。預設值為 false。語法 $( ".selector" ).button({ disabled: true });
2	icons 此選項指定要在按鈕中顯示一個或兩個圖示：primary 圖示在左側，secondary 圖示在右側。主圖示由物件的 primary 屬性標識，輔助圖示由 secondary 屬性標識。預設值為 primary: null, secondary: null。選項 - icons 此選項指定要在按鈕中顯示一個或兩個圖示：primary 圖示在左側，secondary 圖示在右側。主圖示由物件的 primary 屬性標識，輔助圖示由 secondary 屬性標識。預設值為 primary: null, secondary: null。語法 $( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
3	label 此選項指定要在按鈕上顯示的文字，該文字會覆蓋自然標籤。如果省略，則顯示元素的自然標籤。對於單選按鈕和複選框，自然標籤是與控制元件關聯的 <label> 元素。預設值為 null。選項 - label 此選項指定要在按鈕上顯示的文字，該文字會覆蓋自然標籤。如果省略，則顯示元素的自然標籤。對於單選按鈕和複選框，自然標籤是與控制元件關聯的 <label> 元素。預設值為 null。語法 $( ".selector" ).button({ label: "custom label" });
4	text 此選項指定是否要在按鈕上顯示文字。如果指定為 false，並且 (且僅當) icons 選項指定至少一個圖示時，文字將被抑制。預設值為 true。選項 - text 此選項指定是否要在按鈕上顯示文字。如果指定為 false，並且 (且僅當) icons 選項指定至少一個圖示時，文字將被抑制。預設值為 true。語法 $( ".selector" ).button({ text: false });

預設功能

以下示例演示了按鈕小部件功能的簡單示例，未向 button() 方法傳遞任何引數。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

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

此示例演示了可用於按鈕的標記：按鈕元素、提交型別輸入和錨點。

圖示、文字和停用的用法

以下示例演示了在 jQuery UI 的 button 函式中使用兩個選項 icons、text 和 disabled。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

在這裡您可以看到一個只有圖示的按鈕，一個有兩個圖示的按鈕和一個停用的按鈕。

$(selector, context).button("action", params) 方法

button("action", params) 方法可以對按鈕執行操作，例如停用按鈕。操作在第一個引數中指定為字串（例如，"disable" 用於停用按鈕）。請查看下錶中可以傳遞的操作。

語法

$(selector, context).button ("action", params);

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


$( ".selector" ).button("destroy");
$( ".selector" ).button("disable");
$( ".selector" ).button("enable");
var isDisabled = $( ".selector" ).button( "option", "disabled" );
$( ".selector" ).button("option");
$( ".selector" ).button( "option", "disabled", true );
$( ".selector" ).button( "option", { disabled: true } );
$( ".selector" ).button("refresh");
$( ".selector" ).button("widget");

序號	操作 & 描述
1	destroy 此操作完全刪除元素的按鈕功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。操作 - destroy 此操作完全刪除元素的按鈕功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。語法 $( ".selector" ).button("destroy");
2	disable 此操作停用元素的按鈕功能。此方法不接受任何引數。操作 - disable 此操作停用元素的按鈕功能。此方法不接受任何引數。語法 $( ".selector" ).button("disable");
3	enable 此操作啟用元素的按鈕功能。此方法不接受任何引數。操作 - enable 此操作啟用元素的按鈕功能。此方法不接受任何引數。語法 $( ".selector" ).button("enable");
4	option(optionName) 此操作檢索 optionName 中指定的選項的值。其中 optionName 是一個字串。操作 - option(optionName) 此操作檢索 optionName 中指定的選項的值。其中 optionName 是一個字串。語法 var isDisabled = $( ".selector" ).button( "option", "disabled" );
5	option 此操作檢索一個物件，該物件包含表示當前按鈕選項雜湊的鍵/值對。操作 - option 此操作檢索一個物件，該物件包含表示當前按鈕選項雜湊的鍵/值對。語法 $( ".selector" ).button("option");
6	option(optionName, value) 此操作設定與指定的 optionName 關聯的按鈕選項的值。操作 - option(optionName, value) 此操作設定與指定的 optionName 關聯的按鈕選項的值。其中 optionName 是要設定的選項的名稱，value 是要為選項設定的值。語法 $( ".selector" ).button( "option", "disabled", true );
7	option(options) 此操作為按鈕設定一個或多個選項。其中 options 是要設定的選項-值對的對映。操作 - option(options) 此操作為按鈕設定一個或多個選項。其中 options 是要設定的選項-值對的對映。語法 $( ".selector" ).button( "option", { disabled: true } );
8	refresh 此操作重新整理按鈕的顯示。當按鈕由程式處理並且顯示不一定與內部狀態相對應時，這很有用。此方法不接受任何引數。操作 - refresh 此操作重新整理按鈕的顯示。當按鈕由程式處理並且顯示不一定與內部狀態相對應時，這很有用。此方法不接受任何引數。語法 $( ".selector" ).button("refresh");
9	widget 此操作返回包含按鈕元素的 jQuery 物件。此方法不接受任何引數。操作 - widget 此操作返回包含按鈕元素的 jQuery 物件。此方法不接受任何引數。語法 $( ".selector" ).button("widget");

示例

現在讓我們看看使用上表中操作的示例。以下示例演示了 destroy() 和 disable() 方法的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

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

按鈕上的事件管理

除了我們在前面幾節中看到的 button(options) 方法外，jQuery UI 還提供了一些在特定事件觸發時觸發的事件方法。這些事件方法列在下面：

序號	事件方法 & 描述
1	create(event, ui) 建立按鈕時會觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。事件 - create(event, ui) 建立按鈕元素時會觸發此事件。其中 event 的型別為 Event，ui 的型別為 Object。語法 $( ".selector" ).button({ create: function( event, ui ) {} });

示例

以下示例演示了按鈕小部件功能的事件方法用法。此示例演示了事件 create 的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

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

列印頁面

序號	選項 & 描述
1	disabled 如果設定為 true，則此選項會停用按鈕。預設值為 false。選項 - disabled 如果設定為 true，則此選項會停用按鈕。預設值為 false。語法 $( ".selector" ).button({ disabled: true });
2	icons 此選項指定要在按鈕中顯示一個或兩個圖示：primary 圖示在左側，secondary 圖示在右側。主圖示由物件的 primary 屬性標識，輔助圖示由 secondary 屬性標識。預設值為 primary: null, secondary: null。選項 - icons 此選項指定要在按鈕中顯示一個或兩個圖示：primary 圖示在左側，secondary 圖示在右側。主圖示由物件的 primary 屬性標識，輔助圖示由 secondary 屬性標識。預設值為 primary: null, secondary: null。語法 $( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
3	label 此選項指定要在按鈕上顯示的文字，該文字會覆蓋自然標籤。如果省略，則顯示元素的自然標籤。對於單選按鈕和複選框，自然標籤是與控制元件關聯的 <label> 元素。預設值為 null。選項 - label 此選項指定要在按鈕上顯示的文字，該文字會覆蓋自然標籤。如果省略，則顯示元素的自然標籤。對於單選按鈕和複選框，自然標籤是與控制元件關聯的 <label> 元素。預設值為 null。語法 $( ".selector" ).button({ label: "custom label" });
4	text 此選項指定是否要在按鈕上顯示文字。如果指定為 false，並且 (且僅當) icons 選項指定至少一個圖示時，文字將被抑制。預設值為 true。選項 - text 此選項指定是否要在按鈕上顯示文字。如果指定為 false，並且 (且僅當) icons 選項指定至少一個圖示時，文字將被抑制。預設值為 true。語法 $( ".selector" ).button({ text: false });

序號	操作 & 描述
1	destroy 此操作完全刪除元素的按鈕功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。操作 - destroy 此操作完全刪除元素的按鈕功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。語法 $( ".selector" ).button("destroy");
2	disable 此操作停用元素的按鈕功能。此方法不接受任何引數。操作 - disable 此操作停用元素的按鈕功能。此方法不接受任何引數。語法 $( ".selector" ).button("disable");
3	enable 此操作啟用元素的按鈕功能。此方法不接受任何引數。操作 - enable 此操作啟用元素的按鈕功能。此方法不接受任何引數。語法 $( ".selector" ).button("enable");
4	option(optionName) 此操作檢索 optionName 中指定的選項的值。其中 optionName 是一個字串。操作 - option(optionName) 此操作檢索 optionName 中指定的選項的值。其中 optionName 是一個字串。語法 var isDisabled = $( ".selector" ).button( "option", "disabled" );
5	option 此操作檢索一個物件，該物件包含表示當前按鈕選項雜湊的鍵/值對。操作 - option 此操作檢索一個物件，該物件包含表示當前按鈕選項雜湊的鍵/值對。語法 $( ".selector" ).button("option");
6	option(optionName, value) 此操作設定與指定的 optionName 關聯的按鈕選項的值。操作 - option(optionName, value) 此操作設定與指定的 optionName 關聯的按鈕選項的值。其中 optionName 是要設定的選項的名稱，value 是要為選項設定的值。語法 $( ".selector" ).button( "option", "disabled", true );
7	option(options) 此操作為按鈕設定一個或多個選項。其中 options 是要設定的選項-值對的對映。操作 - option(options) 此操作為按鈕設定一個或多個選項。其中 options 是要設定的選項-值對的對映。語法 $( ".selector" ).button( "option", { disabled: true } );
8	refresh 此操作重新整理按鈕的顯示。當按鈕由程式處理並且顯示不一定與內部狀態相對應時，這很有用。此方法不接受任何引數。操作 - refresh 此操作重新整理按鈕的顯示。當按鈕由程式處理並且顯示不一定與內部狀態相對應時，這很有用。此方法不接受任何引數。語法 $( ".selector" ).button("refresh");
9	widget 此操作返回包含按鈕元素的 jQuery 物件。此方法不接受任何引數。操作 - widget 此操作返回包含按鈕元素的 jQuery 物件。此方法不接受任何引數。語法 $( ".selector" ).button("widget");