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.
You can use the button() method in two forms:
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.
Following is a list of options that can be used with this method:
||If you set this option to true, it deactivates the button. By default its value is false.
||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.
||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.
||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
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).
Following is a list of different actions that can be used with this method:
||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.
||This action is used to disable the button functionality of an element. This method does not accept any arguments.
||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.
||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.
||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.
||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