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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   <body>
      <button id="button-1">A button element</button>
      <input id="button-2" type="submit" value="A submit button">
      <a id="button-3" href="">An anchor</a>
      <input type="checkbox"  id="button-4" >
      <label for="button-4">Toggle</label>
      <br><br>
      <div id="button-5">
         <input type="checkbox" id="check1">
         <label for="check1">Left</label>
         <input type="checkbox" id="check2">
         <label for="check2">Middle</label>
         <input type="checkbox" id="check3">
         <label for="check3">Right</label>
      </div>
</body>
</html>

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   <body>
      <button id="button-6">
         Button with icon only
      </button>
      <button id="button-7">
         Button Disabled
      </button>
      <button id="button-8">
         Button with two icons
      </button>
   </body>
</html>

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   <body>
      <button id="button-9">
         I'm destroyed
      </button>
      <button id="button-10">   
         I'm disabled
      </button>
      <button id="button-11">
         play
      </button>
   </body>
</html>

Test it Now

Next TopicjQuery UI Datepicker

← prev next →