Button enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate 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. For the association to work properly, give the input an id
attribute, and refer to that in the label's for
attribute. Don't nest the input inside the label, as that causes accessibility problems.
In order to group radio buttons, you can use the Buttonset widget, which provides visual groupings of buttons.
When using an input of type button, submit or reset, support is limited to plain text labels with no icons.
Theming
The button widget uses the jQuery UI CSS framework to style its look and feel. If button specific styling is needed, the following CSS class names can be used:
-
ui-button
: The DOM element that represents the button. This element will additionally have one of the following classes depending on the text and icons option:ui-button-text-only
,ui-button-icon-only
,ui-button-icons-only
,ui-button-text-icons
.-
ui-button-icon-primary
: The element used to display the button's primary icon. This will only be present if a primary icon is provided in the icons option. -
ui-button-text
: The container around the textual content of the button. -
ui-button-icon-secondary
: The element used to display the button's secondary icon. This will only be present if a secondary icon is provided in the icons option.
-
Dependencies
- UI Core
- Widget Factory
- 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.
false
true
.Code examples:
Initialize the button with the disabled
option specified:
$( ".selector" ).button({ disabled: true });
Get or set the disabled
option, after initialization:
// Getter var disabled = $( ".selector" ).button( "option", "disabled" ); // Setter $( ".selector" ).button( "option", "disabled", true );
{ 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 match an icon 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" }
.
When using an input of type button, submit or reset, icons are not supported.
Code examples:
Initialize the button with the icons
option specified:
$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
Get or set the icons
option, after initialization:
// Getter var icons = $( ".selector" ).button( "option", "icons" ); // Setter $( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } );
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.
When using an input of type button, submit or reset, support is limited to plain text labels.
Code examples:
Initialize the button with the label
option specified:
$( ".selector" ).button({ label: "custom label" });
Get or set the label
option, after initialization:
// Getter var label = $( ".selector" ).button( "option", "label" ); // Setter $( ".selector" ).button( "option", "label", "custom label" );
true
false
no text will be displayed, but the icons
option must be enabled, otherwise the text
option will be ignored.Code examples:
Initialize the button with the text
option specified:
$( ".selector" ).button({ text: false });
Get or set the text
option, after initialization:
// Getter var text = $( ".selector" ).button( "option", "text" ); // Setter $( ".selector" ).button( "option", "text", false );
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).button( "destroy" );
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).button( "disable" );
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).button( "enable" );
Retrieves the button's instance object. If the element does not have an associated instance, undefined
is returned.
Unlike other widget methods, instance()
is safe to call on any element after the button plugin has loaded.
- This method does not accept any arguments.
Invoke the instance method:
$( ".selector" ).button( "instance" );
Gets the value currently associated with the specified optionName
.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar"
would get the value of the bar
property on the foo
option.
- optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).button( "option", "disabled" );
- This signature does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).button( "option" );
Sets the value of the button option associated with the specified optionName
.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName
. For example, "foo.bar"
would update only the bar
property of the foo
option.
- optionNameType: StringThe name of the option to set.
- valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).button( "option", "disabled", true );
- optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).button( "option", { disabled: true } );
- This method does not accept any arguments.
Invoke the refresh method:
$( ".selector" ).button( "refresh" );
jQuery
object containing the element visually representing the button. - This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).button( "widget" );
buttoncreate
Note: The ui
object is empty but included for consistency with other events.
Initialize the button with the create callback specified:
$( ".selector" ).button({ create: function( event, ui ) {} });
Bind an event listener to the buttoncreate event:
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );
A simple jQuery UI Button
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>button demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <button>Button label</button> <script> $( "button" ).button(); </script> </body> </html>
Please login to continue.