YouTip

## Category (#) ## Usage **Description:** Themeable buttons and button groups. **Added in version:** 1.8 The Button Widget enhances the functionality of standard form elements like buttons, inputs, and anchors, theming them with appropriate hover and active styles. Beyond basic buttons, radio buttons and checkboxes (input types radio and checkbox) can also be converted to buttons. The associated label is styled as a button, and clicking it updates the underlying input. For this to work correctly, the input must have an `id` attribute, and the label's `for` attribute must point to it. Do not place the input inside the label, as this can (http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/). To group radio buttons, Button also provides an additional widget called Buttonset. Buttonset is used by selecting a container element (containing the radio buttons) and calling `.buttonset()`. Buttonset also provides visual grouping, so it's worth considering when you have a group of buttons. It selects all descendants and applies `.button()` to them. You can enable and disable a buttonset, which will enable and disable all contained buttons. Destroying a buttonset calls the `destroy` method on each button. For grouped radio buttons and checkbox buttons, it's recommended to use a `fieldset` with a `legend` to provide an accessible group label. When using an input of type button, submit, or reset, only plain text labels without icons are supported. ### Theming The Button Widget uses the (#) to define its look and feel. If you need to use button-specific styles, you can use the following CSS class names: * `ui-button`: Represents the button's DOM element. This element will have one of the following classes added based on the (#) and (#) options: `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. Only rendered if a primary icon is provided in the (#) option. * `ui-button-text`: The container around the button's text content. * `ui-button-icon-secondary`: The element used to display the button's secondary icon. Only rendered if a secondary icon is provided in the (#) option. * `ui-buttonset`: The outer container for a Buttonset. ### Dependencies ### Additional Notes * This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point. ### Quick Navigation | Options | Methods | Events | | --- | --- | --- | | (#) (#) (#) (#) | (#) (#) (#) (#) (#) (#) | (#) | | Option | Type | Description | Default | | --- | --- | --- | --- | | disabled | Boolean | If set to `true`, disables the button. **Code examples:** Initialize a button with the specified `disabled` option: $( ".selector" ).button({ disabled: true }); After initialization, get or set the `disabled` option: // gettervar disabled = $( ".selector" ).button( "option", "disabled" ); // setter $( ".selector" ).button( "option", "disabled", true ); | false | | icons | Object | Icons to show, including icons with text and without text (see the [`text`](#) option). By default, the primary icon is displayed to the left of the label text, and the secondary icon to the right. Display position can be controlled via CSS. The `primary` and `secondary` property values must be (#), e.g., `"ui-icon-gear"`. If using only one icon, use `icons: { primary: "ui-icon-locked" }`. If using two icons, use `icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }`. **Code examples:** Initialize a button with the specified `icons` option: $( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }); After initialization, get or set the `icons` option: // gettervar icons = $( ".selector" ).button( "option", "icons" ); // setter $( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } ); | { primary: null, secondary: null } | | label | String | Text to show in the button. When not specified (`null`), the HTML content of the element is used, or if the element is a submit or reset type input, its `value` attribute is used, or if the element is a radio or checkbox type input, the HTML content of the associated label element is used. **Code examples:** Initialize a button with the specified `label` option: $( ".selector" ).button({ label: "custom label" }); After initialization, get or set the `label` option: // gettervar label = $( ".selector" ).button( "option", "label" ); // setter $( ".selector" ).button( "option", "label", "custom label" ); | null | | text | Boolean | Whether to show the label. When set to `false`, no text is displayed, but the [`icons`](#) option must be enabled, otherwise the `text` option will be ignored. **Code examples:** Initialize a button with the specified `text` option: $( ".selector" ).button({ text: false }); After initialization, get or set the `text` option: // gettervar text = $( ".selector" ).button( "option", "text" ); // setter $( ".selector" ).button( "option", "text", false ); | true | | Method | Returns | Description | | --- | --- | --- | | destroy() | jQuery (plugin only) | Completely removes the button functionality. This will return the element to its pre-initialized state. * This method does not accept any arguments. **Code examples:** Invoke the destroy method: $( ".selector" ).button( "destroy" ); | | disable() | jQuery (plugin only) | Disables the button. * This method does not accept any arguments. **Code examples:** Invoke the disable method: $( ".selector" ).button( "disable" ); | | enable() | jQuery (plugin only) | Enables the button. * This method does not accept any arguments. **Code examples:** Invoke the enable method: $( ".selector" ).button( "enable" ); | | option( optionName ) | Object | Gets the value currently associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to get. **Code examples:** Invoke this method: var isDisabled = $( ".selector" ).button( "option", "disabled" ); | | option() | PlainObject | Gets an object containing key/value pairs representing the current button options hash. * This method does not accept any arguments. **Code examples:** Invoke this method: var options = $( ".selector" ).button( "option" ); | | option( optionName, value ) | jQuery (plugin only) | Sets the value of the button option associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to set. * **value** Type: Object Description: The value to set for the option. **Code examples:** Invoke this method: $( ".selector" ).button( "option", "disabled", true ); | | option( options ) | jQuery (plugin only) | Sets one or more options for the button. * **options** Type: Object Description: A map of option-value pairs to set. **Code examples:** Invoke this method: $( ".selector" ).button( "option", { disabled: true } ); | | refresh() | jQuery (plugin only) | Refreshes the visual state of the button. Used to update button state after programmatically changing the native element's checked or disabled state. * This method does not accept any arguments. **Code examples:** Invoke the refresh method: $( ".selector" ).button( "refresh" ); | | widget() | jQuery | Returns a `jQuery` object containing the button. * This method does not accept any arguments. **Code examples:** Invoke the widget method: var widget = $( ".selector" ).button( "widget" ); | | Event | Type | Description | | --- | --- | --- | | create( event, ui ) | buttoncreate | Triggered when the button is created. * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty, included here for consistency with other events. **Code examples:** Initialize a button with the specified create callback: $( ".selector" ).button({ create: function( event, ui ) {}}); Bind an event listener to the buttoncreate event: $( ".selector" ).on( "buttoncreate", function( event, ui ) {} ); | ## Examples **Example 1:** A simple jQuery UI Button. Button label $( "button" ).button(); **Example 2:** A simple jQuery UI Buttonset.

Favorite jQuery Project

Sizzle QUnit Color

$( "#radio" ).buttonset();