Search within TutorialsPark

jQuery UI : Button Types


Learn how to use jQuery UI to create buttons of different types


jQuery UI : Button Types

The jQuery UI button widget can be used to create button sets to serve different kinds of purposes.Eg: input , submit reset etc.

In the demo below, we use the click method to transform each element into jQuery UI button widget.

Example: jQuery UI - Button Types

Give it a TRY! » Note: Click the button to attach button widget on each button element.


jQuery UI : Creating a Toggle Button

jQuery UI button widget can be used to create a toggle button, this is done by setting the type of an input element to checkbox.

A toggle button can switched ON and OFF using by clicking, depending upon the checked and unchecked states of the element.

Example: jQuery UI - Creating a Toggle Button

Give it a TRY! » Note: This button appears similar to a basic button, but cannot be toggled.


jQuery UI: Creating a Button Set

The jQuery UI button widget can be used to create a button set using buttonset method from radio button elements.

Similarly you can create a button set using checkbox button element as well.

Example: jQuery UI - Creating a Button Set

Give it a TRY! » Note: In checkbox button set multiple options can be selected, and only one can be selected in radio button set


jQuery UI : Button Event

jQuery UI provide an event in addition to those available with the element.

The jQuery UI button widget provides only one event called create , which is triggered when the button widget is created.

Example: jQuery UI Button Events

Give it a TRY! » Note: Press the button to trigger the event.