JqueryUI Button

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

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

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

The button (options) method declares that an HTML element should be treated as button. Theoptions 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..... });

Following table lists the different options that can be used with this method:

Option

Description

disabled

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

icons

This option specifies that one or two icons are to be displayed in thebutton: primary icons to the left, secondary icons to the right. The primary icon is identified by theprimary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null.

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.

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.

 

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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">

      <scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

      <scriptsrc="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="">Ananchor</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's save above code in an HTML filebuttonexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

                                                                                 An anchor Toggle

Left Middle Right

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 iconstext 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">

      <scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

      <scriptsrc="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>

Let's save above code in an HTML filebuttonexample.htm and open it in a standard browser which supports javascript, you must 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);

Following table lists the different actions that can be used with this method:

Action

Description

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.

disable

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

enable

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

option(optionName )

This action retrieves the value of the option specified inoptionName. Where optionNameis 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. Whereoptions 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.

 

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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">

      <scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

      <scriptsrc="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>

Let's save above code in an HTML filebuttonexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Event Management on buttons

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

Event Method

Description

create(event,ui)

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

 

Example

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

<!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">

      <scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

      <scriptsrc="http://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's save above code in an HTML filebuttonexample.htm and open it in a standard browser which supports javascript, you must see the following output:


 

created

 

6

Next Post Previous Post
No Comment
Add Comment
comment url