JqueryUI - Button

jQueryUI provides button() method to transform the HTML elements (like buttons, inputs and anchors) into themeable buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.

In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling .buttonset().

Syntax

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

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

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

Syntax

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

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

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

The following table lists the different options that can be used with this method −

Sr.No. Option & Description
1 disabled

This option deactivates the button is set to true. By default its value is false.

Option - disabled

This option deactivates the button is set to true. By default its value is false.

Syntax

$( ".selector" ).button({ disabled: true });
2 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. The primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null.

Option - 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. The primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null.

Syntax

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
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 is null.

Option - 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 is null.

Syntax

$( ".selector" ).button({ label: "custom label" });
4 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.

Option - 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.

Syntax

$( ".selector" ).button({ text: false });

Default Functionality

The following example demonstrates a simple example of button widget functionality, passing no parameters to the button() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://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>

Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

This example demonstrates the markup that can be used for buttons: A button element, an input of type submit and an anchor.

Use of icons, text and disabled

The following example demonstrates the usage of two 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 = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://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>

Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

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", params) method can perform an action on buttons, such as disabling the button. The action is specified as a string in the first argument (e.g., "disable" to disable button). Check out the actions that can be passed, in the following table.

Syntax

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

The following table lists the different actions that can be used with this method −

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.

Action - 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

$( ".selector" ).button("destroy");
2 disable

This action disables the button functionality of an element. This method does not accept any arguments.

Action - disable

This action disables the button functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).button("disable");
3 enable

This action enables the button functionality of an element. This method does not accept any arguments.

Action - enable

This action enables the button functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).button("enable");
4 option( optionName )

This action retrieves the value of the option specified in optionName. Where optionName is a String.

Action - option( optionName )

This action retrieves the value of the option specified in optionName. Where optionName is a String.

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5 option

This action retrieves an object containing key/value pairs representing the current button options hash.

Action - option

This action retrieves an object containing key/value pairs representing the current button options hash.

Syntax

$( ".selector" ).button("option");
6 option( optionName, value )

This action sets the value of the button option associated with the specified optionName.

Action - option( optionName, value )

This action sets the value of the button option associated with the specified optionName. Where optionName is name of the option to set and value is value to set for the option.

Syntax

$( ".selector" ).button( "option", "disabled", true );
7 option( options )

This action sets one or more options for the button. Where options is map of option-value pairs to set.

Action - option( options )

This action sets one or more options for the button. Where options is map of option-value pairs to set.

Syntax

$( ".selector" ).button( "option", { disabled: true } );
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.

Action - 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

$( ".selector" ).button("refresh");
9 widget

This action returns a jQuery object containing the button element. This method does not accept any arguments.

Action - widget

This action returns a jQuery object containing the button element. This method does not accept any arguments.

Syntax

$( ".selector" ).button("widget");

Example

Now let us see an example using the actions from the above table. The following example demonstrates 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 = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://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>

Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Event Management on Buttons

In addition to the button (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

Sr.No. Event Method & Description
1 create(event, ui)

This event is triggered when the button is created. Where event is of type Event, and ui is of type Object.

Event - create(event, ui)

This event is triggered when the button element is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).button({
   create: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage for button widget functionality. This example demonstrates the use of event create.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Advertisements