Categories
JqueryUI教程

jQuery UI button()方法

jQuery UI button()方法

jQuery UI button()方法用于转换HTML元素(如按钮,输入和锚点等)。它将HTML元素转换为可主题化的按钮,并自动管理鼠标的移动。它们全部由jQuery UI透明管理。

句法:

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

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

第一种方法

button(选项)方法指定将HTML元素视为按钮。这里的选项?参数是一个对象,它指定按钮的行为和外观。

句法:

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

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:

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

以下是可用于此方法的选项列表:

Option Description
disabled If you set this option to true, it deactivates the button. By default its value is false.
icons This option specifies that one or two icons are to be displayed in the button: Primary icons to the left, secondary icons to the right.Primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its primary and seconadary value is set to NULL.
label This option specifies text to display on the button that overrides the natural label. In the case of radio buttons and checkboxes, the natural label is the <label> element associated with the control. By default its value is NULL.
text This option specifies whether text is to be displayed on the button. If specified as false, text is suppressed if (and only if) the icons option specifies at least one icon. By default its value is true.

jQuery UI button()示例1

让我们以一个示例来演示按钮小部件的功能,不向button()方法传递任何参数。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="http://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>

jQuery UI button()示例2

使用图标,文字和禁用:

让我们以一个示例来演示jQueryUI的按钮函数中选项图标,文本和禁用的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="http://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);

以下是可与该方法一起使用的不同操作的列表:

Action Description
destroy This action is used to remove the button functionality of an element completely and enforces the elements return to their pre-init state. This method does not accept any arguments.
disable This action is used to disable the button functionality of an element. This method does not accept any arguments.
enable This action is used to enable the button functionality of an element. This method does not accept any arguments.
option( optionName ) This action retrieves the value of the option specified in optionName. Here optionName is a string.
option This action retrieves an object containing key/value pairs representing the current button options hash.
option( optionName, value ) This action sets the value of the button option associated with the specified optionName.
option( options ) This action sets one or more options for the button. Here options is map of option-value pairs to set.
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.
widget This action returns a jQuery object containing the button element. This method does not accept any arguments.

jQueryUI button()示例3

让我们以一个示例来部署上述操作。在下面的示例中,我们演示了destroy()和disable()方法的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="http://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>

error: 内容受到保护 !!