jQuery UI Button

by

To transform the HTML elements such as, buttons, inputs, and anchors etc., the jQuery UI button() method is used. The HTML elements are thus transformed into themeable buttons, with automatic management of mouse movements on them which is managed transparently by the jQuery UI.

Syntax:

The button() method is used in two forms:

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

OR

$(selector, context).button (“action”, params) Method

First Method:

To specify that an HTML element should be treated as a button, the button (options) method is used. The behavior and appearance of the button are specified by the “options” parameter which is an object.

Syntax:

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

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:

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

The various options that can be used with this method are listed below:

Option Uses
disabled To deactivate the button, when set to true. The default value is false.
icons To indicate that one or two icons are to be displayed in the button: Primary icons to the left, secondary icons to the right. The primary property of the object represents the Primary icon, and the secondary property represents the secondary icon. The default value of both the primary and secondary value is NULL.
label To define the text to display on the button that overrides the natural label. The natural label is the <label> element associated with the control, in the case of radio buttons and checkboxes. The default value is NULL.
text To determine whether text is to be displayed on the button. The text is suppressed if (and only if) the icons option specifies at least one icon, when set to false. The default value is true.

Example 1:

  
  
     
        
      jQuery UI Buttons functionality  
        
        
        
        
     
    
      Anchor

Output:

Explanation:

In the above example, we are displaying the functionality of the button widget. Here, we are passing no parameter to the button() method.

Example 2:

  
  
     
        
      jQuery UI Buttons functionality

Output:

Explanation:

In the above example, we are displaying the use and the behavior of the options icons, text and disabled in the button function of the jQueryUI.

Second Method:

To act on buttons, the button (“action”, params) method is used. It can perform various actions such as disabling the button. The first argument here is “action” which is specified as a string. For example, to disable a button, the “disable” is passed as a value to the action parameter.

Syntax:

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

The various actions that can be used with this method are listed below:

Action Uses
destroy To eliminate the button functionality of an element completely and enforces the elements return to their pre-init state. No argument is accepted by this method.
disable To disable the button functionality of an element. No argument is accepted by this method.
enable To enable the button functionality of an element. No argument is accepted by this method.
option( optionName ) To get the value of the option specified in optionName. The parameter optionName accepts a string.
option To get an object containing key/value pairs representing the current button options hash.
option( optionName, value ) To set the value of the button option associated with the specified optionName.
option( options ) To set one or more options for the button. A map of option-value pairs to set is specified by the options parameter.
refresh To refresh the display of the button, especially when the buttons are handled by the program and the display does not necessarily correspond to the internal state. No argument is accepted by this method.
widget To retrieve a jQuery object containing the button element. No argument is accepted by this method.

Example 3:

  
  
     
        
      jQuery UI Buttons functionality

Output:

Explanation:

In the above example, we are displaying the use of the destroy() and disable() methods.