JqueryUI - 按钮

jQueryUI 提供了 button() 方法，将 HTML 元素（如按钮、输入和锚点）转换为主题按钮，并自动管理鼠标在其上的移动，所有这些都由 jQuery UI 透明管理。

为了对单选按钮进行分组，Button 还提供了一个额外的小部件，称为Buttonset。Buttonset通过选择一个容器元素（其中包含单选按钮）并调用.buttonset()来使用。

句法

Button ()方法可以以两种形式使用 -

$(选择器,上下文).button(选项)方法

按钮（选项）方法声明 HTML 元素应被视为按钮。options参数是一个指定按钮的Behave和外观的对象。

句法

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

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

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

下表列出了可以与此方法一起使用的不同选项-

先生。 选项和说明
1 残疾人

此选项停用按钮设置为true。默认情况下它的值为false。

选项 - 禁用

此选项停用按钮设置为true。默认情况下它的值为false。

句法

$( ".selector" ).button({ disabled: true });
2 图标

此选项指定按钮中显示一个或两个图标：主图标在左侧，辅助图标在右侧。主要图标由对象的主要属性标识，次要图标由次要属性标识。默认情况下，其值为Primary: null ， secondary: null。

选项 - 图标

此选项指定按钮中显示一个或两个图标：主图标在左侧，辅助图标在右侧。主要图标由对象的主要属性标识，次要图标由次要属性标识。默认情况下，其值为Primary: null ， secondary: null。

句法

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
3 标签

此选项指定要在覆盖自然标签的按钮上显示的文本。如果省略，则显示元素的自然标签。对于单选按钮和复选框，自然标签是与控件关联的 <label> 元素。默认情况下它的值为null。

选项 - 标签

此选项指定要在覆盖自然标签的按钮上显示的文本。如果省略，则显示元素的自然标签。对于单选按钮和复选框，自然标签是与控件关联的 <label> 元素。默认情况下它的值为null。

句法

$( ".selector" ).button({ label: "custom label" });
4 文本

该选项指定按钮上是否显示文本。如果指定为false，当（且仅当）图标选项指定至少一个图标时，文本将被抑制。默认情况下它的值为true。

选项 - 文本

该选项指定按钮上是否显示文本。如果指定为false，当（且仅当）图标选项指定至少一个图标时，文本将被抑制。默认情况下它的值为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>

让我们将上面的代码保存在 HTML 文件buttonexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

此示例演示了可用于按钮的标记：按钮元素、提交类型的输入和锚点。

使用图标、文本和禁用

下面的例子演示了JqueryUI的按钮功能中icon、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>

让我们将上面的代码保存在 HTML 文件buttonexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

在这里您可以看到一个仅带有图标的按钮、一个带有两个图标的按钮和一个禁用的按钮。

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

Button ("action", params)方法可以对按钮执行操作，例如禁用按钮。该操作被指定为第一个参数中的字符串（例如，“disable”以禁用按钮）。查看下表中可以通过的操作。

句法

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

下表列出了可以与此方法一起使用的不同操作-

先生。 动作与描述
1 破坏

此操作完全删除元素的按钮功能。元素返回到其初始化前的状态。此方法不接受任何参数。

行动-摧毁

This action removes the button functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Syntax

$( ".selector" ).button("destroy");
2 禁用

此操作禁用元素的按钮功能。此方法不接受任何参数。

Action - disable

This action disables the button functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).button("disable");
3 使能够

此操作启用元素的按钮功能。此方法不接受任何参数。

Action - enable

This action enables the button functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).button("enable");
4 选项（选项名称）

此操作检索optionName中指定的选项的值。其中optionName是一个字符串。

Action - option( optionName )

This action retrieves the value of the option specified in optionName. Where optionName is a String.

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5 选项

此操作检索包含表示当前按钮选项哈希的键/值对的对象。

Action - option

This action retrieves an object containing key/value pairs representing the current button options hash.

Syntax

$( ".selector" ).button("option");
6 选项（选项名称，值）

此操作设置与指定optionName关联的按钮选项的值。

Action - option( optionName, value )

This action sets the value of the button option associated with the specified optionName. Where optionName is name of the option to set and value is value to set for the option.

Syntax

$( ".selector" ).button( "option", "disabled", true );
7 选项（选项）

此操作为按钮设置一个或多个选项。其中options是要设置的选项值对的映射。

Action - option( options )

This action sets one or more options for the button. Where options is map of option-value pairs to set.

Syntax

$( ".selector" ).button( "option", { disabled: true } );
8 刷新

此操作会刷新按钮的显示。当按钮由程序处理并且显示不一定对应于内部状态时，这非常有用。此方法不接受任何参数。

Action - refresh

This action refreshes the display of the button. This is useful when the buttons are handled by the program and the display does not necessarily correspond to the internal state. This method does not accept any arguments.

Syntax

$( ".selector" ).button("refresh");
9 小部件

此操作返回一个包含按钮元素的 jQuery 对象。此方法不接受任何参数。

Action - widget

This action returns a jQuery object containing the button element. This method does not accept any arguments.

Syntax

$( ".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>

让我们将上面的代码保存在 HTML 文件buttonexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出 -

按钮上的事件管理

除了我们在前面几节中看到的按钮（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 创建（事件，用户界面）

创建按钮时会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - create(event, ui)

This event is triggered when the button element is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".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>

让我们将上面的代码保存在 HTML 文件buttonexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您还必须看到以下输出 -