QuickNav

Options

disabled
icons
label
text

Methods

destroy
disable
enable
refresh
option
widget

Events

create

Button Widgetversion added: 1.8

Description: Themable buttons and button sets.

Options

disabledType: Boolean

Default: false
Disables the button if set to true.

iconsType: Object

Default: { primary: null, secondary: null }
Icons to display, with or without text (see text option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS. The value for the primary and secondary properties must be a class name, e.g., "ui-icon-gear". For using only one icon: icons: { primary: "ui-icon-locked" }. For using two icons: icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }.

labelType: String

Default: null
Text to show in the button. When not specified (null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.

textType: Boolean

Default: true
Whether to show the label. When set to false no text will be displayed, but the icons option must be enabled, otherwise the text option will be ignored.

Methods

destroy()

Removes the button functionality completely. This will return the element back to its pre-init state.

disable()

Disables the button.

enable()

Enables the button.

option( optionName ) Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.

option() Returns: PlainObject

Gets an object containing key/value pairs representing the current button options hash.

option( optionName, value )

Sets the value of the button option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.

option( options )

Sets one or more options for the button.
  • options
    Type: Object
    A map of option-value pairs to set.

refresh()

Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.

widget() Returns: jQuery

Returns a jQuery object containing the element visually representing the button.

Events

create( event, ui )

Triggered when the button is created.

Button enhances standard form elements like buttons, inputs and anchors to themable buttons with appropiate hover and active styles.

In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons. Their associated label is styled to appear as the button, while the underlying input is updated on click.

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(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendants and applying .button() to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's destroy method.

When using an input of type button, submit or reset, support is limited to plain text labels with no icons.

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Examples:

Example: A simple jQuery UI Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>button demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
 
<button>Button label</button>
 
<script>
$( "button" ).button();
</script>
 
</body>
</html>

Demo:

Example: A simple jQuery UI Buttonset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>button demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
 
<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
 
<script>
$( "#radio" ).buttonset();
</script>
 
</body>
</html>

Demo: