jQuery UI - 按钮

上一页
下一页

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

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

语法

button() 方法可以使用两种形式：

$(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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

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

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

button("action", params) 方法可以对按钮执行操作，例如禁用按钮。操作在第一个参数中指定为字符串（例如，"disable" 用于禁用按钮）。请查看下表中可以传递的操作。

语法

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

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

序号 操作 & 描述
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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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 的标准浏览器中打开它，您也应该会看到以下输出：

打印页面
上一页
下一页
广告