Categories
JqueryUI教程

JqueryUI-按钮

JqueryUI-按钮


jQueryUI提供了button()方法,可将HTML元素(如按钮,输入和锚点)转换为可主题化的按钮,并自动管理它们上的鼠标移动,所有这些操作均由jQuery UI透明管理。

为了对单选按钮进行分组,Button还提供了另一个名为Buttonset的小部件。 Buttonset用于通过选择容器元件(包含单选按钮)和调用.buttonset()。

句法

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

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

button(选项)方法声明将HTML元素视为按钮。 options参数是一个对象,用于指定按钮的行为和外观。

句法

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

您可以使用Javascript对象一次提供一个或多个选项。如果要提供的选项不止一个,那么您将使用逗号将它们分开,如下所示:

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

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

Sr.No. Option & Description
1 disabled

This option deactivates the button is set to true. By default its value is false.

Option – disabled

This option deactivates the button is set to true. By default its value is false.

Syntax

$( ".selector" ).button({ disabled: true });
2 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. The primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null.

Option – 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. The primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null.

Syntax

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

This option specifies text to display on the button that overrides the natural label. If omitted, the natural label for the element is displayed. 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.

Option – label

This option specifies text to display on the button that overrides the natural label. If omitted, the natural label for the element is displayed. 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.

Syntax

$( ".selector" ).button({ label: "custom label" });
4 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.

Option – 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.

Syntax

$( ".selector" ).button({ text: false });

默认功能

以下示例演示了按钮小部件功能的简单示例,未将任何参数传递给button()方法。

<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>
   
   
   
      <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>
   

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

此示例演示了可用于按钮的标记:按钮元素,类型为commit的输入和锚点。

使用图标,文字和禁用

以下示例演示了JqueryUI的按钮函数中两个选项图标文本禁用的用法。

<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>
   
   
   
      <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>
   

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

在这里,您可以看到一个仅包含图标的按钮,一个包含两个图标的按钮和一个禁用的按钮。

$(选择器,上下文).button(“操作”,参数)方法

按钮(“操作”,参数)方法可以对按钮执行操作,例如禁用按钮。该动作在第一个参数中指定为字符串(例如,“禁用”以禁用按钮)。在下表中检查可以传递的操作。

句法

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

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

Sr.No. Action & Description
1 destroy

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.

Action – destroy

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 disable

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

Action – disable

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

Syntax

$( ".selector" ).button("disable");
3 enable

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

Action – enable

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

Syntax

$( ".selector" ).button("enable");
4 option( optionName )

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

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 option

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

Action – option

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

Syntax

$( ".selector" ).button("option");
6 option( optionName, value )

This action sets the value of the button option associated with the specified 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 option( options )

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

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 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.

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 widget

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

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()方法的用法。

<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>
   
   
   
      <button id="button-9">
         I'm destroyed
      </button>
      <button id="button-10">   
         I'm disabled
      </button>
      <button id="button-11">
         play
      </button>
   

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

按钮上的事件管理

除了在上一节中看到的button(选项)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。这些事件方法在下面列出-

Sr.No. Event Method & Description
1 create(event, ui)

This event is triggered when the button is created. Where event is of type Event, and ui is of type 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的用法。

<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>
   
   
   
      <button id="button-12">
         A button element
      </button>
      <p class="resultarea" id="result"></p>
   

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

error: 内容受到保护 !!