JqueryUI Button - JqueryUI

How to use Buttons method in JqueryUI?

jQueryUI provides a button () method that converts HTML elements (buttons, inputs, anchors, etc.) into themeable buttons that automatically manage mouse movement. All of these buttons are transparently managed by the jQuery UI.

To combine radio buttons, the button has another widget called Buttonset. ButtonSet is used by selecting container elements (including radio buttons) and calling .buttonset ().

Syntax

The button() method can be used in two forms:

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

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

The button (options) method declares that the HTML element is treated as a button. The options parameter specifies the behavior of the button and the appearance of the object.

Syntax

The Javascript objects can be used to specify multiple options at once. If more than one option is specified, separate them with commas, as shown below:

Sr.No. Option & Description
1 disabled
This option deactivates the button is set totrue. By default its value isfalse.
Syntax:
2 icons
This option specifies that one or two icons are to be displayed in thebutton: primaryicons to the left, secondary icons to the right. The primary icon is identified by theprimaryproperty of the object, and thesecondaryicon is identified by the secondary property. By default its value isprimary: null, secondary: null.
Syntax:
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 isnull.
Syntax
4 text
This option specifies whether text is to be displayed on the button. If specified asfalse, text is suppressed if (and only if) the icons option specifies at least one icon. By default its value istrue.
Syntax:
Default Functionality

The following example shows a simple example of a button widget function that does not pass parameters to the button() method.

Save the above code in the HTML file buttonexample.htm and open it with a standard browser that supports javascript. The following output is displayed. Now you can play the results:

button 4

This example shows the tags that can be used for buttons. Button element, type input type and anchor type.

Use of icons, text and disabled

The following example shows how to use the two option icons, the text and disabled in JqueryUI button functions.

Save the above code in the HTML file buttonexample.htm and open it with a standard browser that supports javascript. The following output is displayed. Now you can play the results:

button 3

Here you can see a button with only icon, a button with two icons and a disabled button.

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

The button ("action", "parameter") method perform on the button, such as disabling the button. The action is specified as the string of the first argument (for example, "disable" invalidate button). Please check the actions shown in the table below.

Syntax

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.
Syntax:
2 disable
This action disables the button functionality of an element. This method does not accept any arguments.
Syntax:
3 enable
This action enables the button functionality of an element. This method does not accept any arguments.
Syntax:
4 option( optionName )
This action retrieves the value of the option specified inoptionName. WhereoptionNameis a String.
Syntax:
5 option
This action retrieves an object containing key/value pairs representing the current button options hash.
Syntax:
6 option( optionName, value )
This action sets the value of the button option associated with the specifiedoptionName.
Syntax:
7 option( options )
This action sets one or more options for the button. Whereoptionsis map of option-value pairs to set.
Syntax:
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.
Syntax:
9 widget
This action returns a jQuery object containing the button element. This method does not accept any arguments.
Syntax:
Example

An example is illustrated using the actions in the table above. The following example shows how to use the destroy() and disable() methods.

Save the above code in the HTML file buttonexample.htm and open it with a standard browser that supports javascript. The following output is displayed. Now you can play the results:

button 2

Event Management on Buttons

In addition to the button (options) methods shown in the previous section, JqueryUI also provides an event method for a specific event trigger.

Sr.No. Event Method & Description
1 create(event, ui)
This event is triggered when the button is created. Whereeventis of typeEvent, anduiis of typeObject.
Syntax:

Example

The following example shows how to use the event widget for the button widget function. This example shows how to use event creation.

Save the above code in the HTML file buttonexample.htm and open it with a standard browser that supports javascript. The following output is displayed. Now you can play the results:

button

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

JqueryUI Topics