Using jQuery UI Buttons

jquery ui buttonButtons are everywhere in modern user interfaces.  You can add behavior and styling to a basic button if you are willing to write the necessary code.  jQuery UI has made that whole process a whole lot simpler with the Button widget in v1.8.  The jQuery UI Button widget can be applied to a number of DOM elements on your page including input button elements, anchors, checkboxes and radio buttons.  The widget provides the infrastructure to support new stateful objects and saves the programmer from re-inventing the wheel each time the need arises for a new widget.  These benefits accrue from the base provided by the jQuery UI Widget Factory, from which the Button widget springs.  The Button widget brings an additional functionality to the party called Buttonset, which is used to create groups of buttons.  We’ll look at Button and Buttonset in more detail below.

Learn more about the jQuery UI Widget Factory at Udemy.com.

Applying a Button to a button element on your page with, for example, an ID=testButton1 is as easy as:

$(“#testButton1”).button();

Here’s a working example:

jquery-ui-button-1

The Button widget makes it easy to create a more interesting form of a checkbox.  All you need to do is call button() on a standard checkbox element as shown in Example 2 below.  Run the example and you’ll see that the button’s background changes depending on whether the button has been selected or not.

jquery-ui-button-2

Buttonset is a separate widget that comes along with Button.  Buttonset can be used to combine separate radio buttons into a single visual control.  It gets called against a container element and then button-izes all the elements in the container.  The next example shows buttonset() being called on a DIV.

jquery-ui-button-3

Here’s the result:

jquery-ui-button-4

Buttonset (like Button) supports enable() and disable() methods which perform the requested action on all the buttons in the buttonset.   You can also destroy() a buttonset.  Doing so removes all the Button functionality and returns the elements to their pre-initialized state.   Refresh() is available to programmatically refresh the buttons visual state after it is changed by use.

Button methods include destroy() which will remove all button functionality from the element. See below.  The element is returned to its uninitialized state.

$(“some selector”).button( “destroy”);

The disable() method disables the button and takes no arguments. As:

$(“some selector”).button( “disable”);

The enable() method enables the button:

$(“some selector”).button( “enable”);

The option() method gives you an object that contains key/value pairs representing the current button options values.

var options  =  $(“some selector”).button( “option”);

The refresh() method refreshes the visual state of the button and is handy to have if you need to reset the button after it has been programmatically  changed.

$(“some selector”).button( “refresh”);

The widget() method returns a jQuery object that contains the DOM element that is visually representing the button.

var myWidget  =  $(“some selector”).button( “widget”);

Button options include “disabled”, “icons”, “label”, and “text”.  The “disabled” option disables the button if it is set to true.   Here’s an example:

$(“some selector”).button({disabled: true});

The “icons” option lists the icons you want to use on the button which must be listed as icon class names.  Both a primary and a secondary icon can be specified.  See below.

$(“some selector”).button({icons: {primary: “ui-icon-gear”, secondary: “ui-icon-triangle-1-s”}});

The “label” option holds the text you want to show in the button.  If this option isn’t specified, the HTML content of the element is used.  See the jQuery API documentation for all the details.  An example follows:

$(“some selector”).button({label: “your label” });

The “text” option (like “disabled”) is a Boolean and controls whether the label is displayed.  Set the text option to “true” to display the label and “false” to not display the label.  See below”

$(“some selector”).button({text: true });

The button widget includes one event  that is triggered when the button is created.  You can either initialize a button with the create: callback specified to handle the event or you can bind an event handler to the button create event.  You can find coded examples of both approaches in the jQuery UI API documentation.

The button widget uses the jQuery UI CSS Framework to produce its look and feel.   If additional button specific styling is required, there are a number of CSS class names that are made available such as “ui-button” which represents the DOM element that represents the button in question.  Another class name that is available is “ui-buttonset” which is the outer container of buttonsets.

The Button widget also lets you build so-called “split-buttons” that combine the functionality of two separate elements into one visually integrated screen object.  The buttonset() method is the workhorse behind this effect.  There is a very clear example of a split button in the jQuery UI API documentation.

Finally, to get a deeper look in to the power of jQuery UI, take a look at the media player bar example in the API documentation.  By combining a few radio buttons, a checkbox, and a few buttons, a very sophisticated media player toolbar is created.

Dive into more jQuery with a class at Udemy.com.