JqueryUI-按钮 - 芒果文档

📌 相关文章

📜 JqueryUI-按钮

📅 最后修改于: 2020-10-23 07:19:11 🧑 作者: Mango

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 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 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（）方法。


      jQuery UI Buttons functionality
      
      
      
      
      
   
   
   
      
      
      An anchor
      
      Toggle
      


      
         
         Left
         
         Middle
         
         Right

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

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

使用图标，文字和禁用

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


      jQuery UI Buttons functionality

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

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

$（选择器，上下文）.button（“操作”，参数）方法

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

句法

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

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


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

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（）方法的用法。


      jQuery UI Buttons functionality

让我们将上面的代码保存在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的用法。


      jQuery UI Buttons functionality

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