* jQuery UI Button 1.12.1
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
//>>description: Enhances a form with themeable buttons.
//>>docs: http://api.jqueryui.com/button/
//>>demos: http://jqueryui.com/button/
//>>css.structure: ../../themes/base/core.css
//>>css.structure: ../../themes/base/button.css
//>>css.theme: ../../themes/base/theme.css
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
// These are only for backcompat
// TODO: Remove after 1.12
defaultElement: "<button>",
"ui-button": "ui-corner-all"
iconPosition: "beginning",
_getCreateOptions: function() {
// This is to support cases like in jQuery Mobile where the base widget does have
// an implementation of _getCreateOptions
options = this._super() || {};
this.isInput = this.element.is( "input" );
disabled = this.element[ 0 ].disabled;
if ( disabled != null ) {
options.disabled = disabled;
this.originalLabel = this.isInput ? this.element.val() : this.element.html();
if ( this.originalLabel ) {
options.label = this.originalLabel;
if ( !this.option.showLabel & !this.options.icon ) {
this.options.showLabel = true;
// We have to check the option again here even though we did in _getCreateOptions,
// because null may have been passed on init which would override what was set in
if ( this.options.disabled == null ) {
this.options.disabled = this.element[ 0 ].disabled || false;
this.hasTitle = !!this.element.attr( "title" );
// Check to see if the label needs to be set or if its already correct
if ( this.options.label && this.options.label !== this.originalLabel ) {
this.element.val( this.options.label );
this.element.html( this.options.label );
this._addClass( "ui-button", "ui-widget" );
this._setOption( "disabled", this.options.disabled );
if ( this.element.is( "a" ) ) {
"keyup": function( event ) {
if ( event.keyCode === $.ui.keyCode.SPACE ) {
// Support: PhantomJS <= 1.9, IE 8 Only
// If a native click is available use it so we actually cause navigation
// otherwise just trigger a click event
if ( this.element[ 0 ].click ) {
this.element[ 0 ].click();
this.element.trigger( "click" );
if ( !this.element.is( "button" ) ) {
this.element.attr( "role", "button" );
if ( this.options.icon ) {
this._updateIcon( "icon", this.options.icon );
_updateTooltip: function() {
this.title = this.element.attr( "title" );
if ( !this.options.showLabel && !this.title ) {
this.element.attr( "title", this.options.label );
_updateIcon: function( option, value ) {
var icon = option !== "iconPosition",
position = icon ? this.options.iconPosition : value,
displayBlock = position === "top" || position === "bottom";
this.icon = $( "<span>" );
this._addClass( this.icon, "ui-button-icon", "ui-icon" );
if ( !this.options.showLabel ) {
this._addClass( "ui-button-icon-only" );
// If we are updating the icon remove the old icon class
this._removeClass( this.icon, null, this.options.icon );
// If we are updating the icon add the new icon class
this._addClass( this.icon, null, value );
this._attachIcon( position );
// If the icon is on top or bottom we need to add the ui-widget-icon-block class and remove
// the iconSpace if there is one.
this._addClass( this.icon, null, "ui-widget-icon-block" );
// Position is beginning or end so remove the ui-widget-icon-block class and add the
// space if it does not exist
this.iconSpace = $( "<span> </span>" );
this._addClass( this.iconSpace, "ui-button-icon-space" );
this._removeClass( this.icon, null, "ui-wiget-icon-block" );
this._attachIconSpace( position );
this.element.removeAttr( "role" );
this.element.removeAttr( "title" );
_attachIconSpace: function( iconPosition ) {
this.icon[ /^(?:end|bottom)/.test( iconPosition ) ? "before" : "after" ]( this.iconSpace );
_attachIcon: function( iconPosition ) {
this.element[ /^(?:end|bottom)/.test( iconPosition ) ? "append" : "prepend" ]( this.icon );
_setOptions: function( options ) {
var newShowLabel = options.showLabel === undefined ?
newIcon = options.icon === undefined ? this.options.icon : options.icon;
if ( !newShowLabel && !newIcon ) {
options.showLabel = true;
_setOption: function( key, value ) {
this._updateIcon( key, value );
} else if ( this.icon ) {
if ( key === "iconPosition" ) {
this._updateIcon( key, value );
// Make sure we can't end up with a button that has neither text nor icon
if ( key === "showLabel" ) {
this._toggleClass( "ui-button-icon-only", null, !value );
this.element.val( value );
// If there is an icon, append it, else nothing then append the value
// this avoids removal of the icon when setting label text
this.element.html( value );
this._attachIcon( this.options.iconPosition );
this._attachIconSpace( this.options.iconPosition );
this._super( key, value );
if ( key === "disabled" ) {
this._toggleClass( null, "ui-state-disabled", value );
this.element[ 0 ].disabled = value;
// Make sure to only check disabled if its an element that supports this otherwise
// check for the disabled class to determine state
var isDisabled = this.element.is( "input, button" ) ?
this.element[ 0 ].disabled : this.element.hasClass( "ui-button-disabled" );
if ( isDisabled !== this.options.disabled ) {
this._setOptions( { disabled: isDisabled } );
if ( $.uiBackCompat !== false ) {
// Text and Icons options
$.widget( "ui.button", $.ui.button, {
if ( this.options.showLabel && !this.options.text ) {
this.options.showLabel = this.options.text;
if ( !this.options.showLabel && this.options.text ) {
this.options.text = this.options.showLabel;
if ( !this.options.icon && ( this.options.icons.primary ||
this.options.icons.secondary ) ) {
if ( this.options.icons.primary ) {
this.options.icon = this.options.icons.primary;
this.options.icon = this.options.icons.secondary;
this.options.iconPosition = "end";
} else if ( this.options.icon ) {
this.options.icons.primary = this.options.icon;
_setOption: function( key, value ) {
this._super( "showLabel", value );
if ( key === "showLabel" ) {
this.options.text = value;
this.options.icons.primary = value;
this._super( "icon", value.primary );
this._super( "iconPosition", "beginning" );
} else if ( value.secondary ) {
this._super( "icon", value.secondary );
this._super( "iconPosition", "end" );
this._superApply( arguments );
$.fn.button = ( function( orig ) {
if ( !this.length || ( this.length && this[ 0 ].tagName !== "INPUT" ) ||
( this.length && this[ 0 ].tagName === "INPUT" && (
this.attr( "type" ) !== "checkbox" && this.attr( "type" ) !== "radio"
return orig.apply( this, arguments );
if ( !$.ui.checkboxradio ) {
$.error( "Checkboxradio widget missing" );
if ( arguments.length === 0 ) {
return this.checkboxradio( {
return this.checkboxradio.apply( this, arguments );
$.fn.buttonset = function() {
if ( !$.ui.controlgroup ) {
$.error( "Controlgroup widget missing" );
if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" && arguments[ 2 ] ) {
return this.controlgroup.apply( this,
[ arguments[ 0 ], "items.button", arguments[ 2 ] ] );
if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" ) {
return this.controlgroup.apply( this, [ arguments[ 0 ], "items.button" ] );
if ( typeof arguments[ 0 ] === "object" && arguments[ 0 ].items ) {
button: arguments[ 0 ].items
return this.controlgroup.apply( this, arguments );