Javatpoint Logo
Javatpoint Logo

jQuery UI Button

jQuery UI button() method is used to transform the HTML elements (like buttons, inputs and anchors etc.) It transforms HTML elements into themeable buttons, with automatic management of mouse movements on them. They areall managed transparently by jQuery UI.

Syntax:

You can use the button() method in two forms:

First Method

The button (options) method specifies that an HTML element should be treated as button. Here the ?options? parameter is an object that specifies the behavior and appearance of the button.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:

Following is a list of options that can be used with this method:

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() Example 1

Let's take an example to demonstrate the functionality of button widget, passing no parameter to the button() method.

Test it Now

jQuery UI button() example 2

Use of icons, text and disabled:

Let's take an example to demonstrate the usage of options icons, text and disabled in the button function of jQueryUI.

Test it Now

Second Method

The button ("action", params) method is used to perform an action on buttons, such as disabling the button. Here ?action? is specified as a string in the first argument (e.g., "disable" to disable button).

Syntax:

Following is a list of different actions that can be used with this method:

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() example 3

Let's take an example to deploy the above actions. In the following example, we demonstrate the use of destroy () and disable () methods.

Test it Now



Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA