2 * jQuery UI Button 1.10.4
5 * Copyright 2014 jQuery Foundation and other contributors
6 * Released under the MIT license.
7 * http://jquery.org/license
9 * http://api.jqueryui.com/button/
15 (function( $, undefined ) {
18 baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
19 typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
20 formResetHandler = function() {
22 setTimeout(function() {
23 form.find( ":ui-button" ).button( "refresh" );
26 radioGroup = function( radio ) {
27 var name = radio.name,
31 name = name.replace( /'/g, "\\'" );
33 radios = $( form ).find( "[name='" + name + "']" );
35 radios = $( "[name='" + name + "']", radio.ownerDocument )
44 $.widget( "ui.button", {
46 defaultElement: "<button>",
57 this.element.closest( "form" )
58 .unbind( "reset" + this.eventNamespace )
59 .bind( "reset" + this.eventNamespace, formResetHandler );
61 if ( typeof this.options.disabled !== "boolean" ) {
62 this.options.disabled = !!this.element.prop( "disabled" );
64 this.element.prop( "disabled", this.options.disabled );
67 this._determineButtonType();
68 this.hasTitle = !!this.buttonElement.attr( "title" );
71 options = this.options,
72 toggleButton = this.type === "checkbox" || this.type === "radio",
73 activeClass = !toggleButton ? "ui-state-active" : "";
75 if ( options.label === null ) {
76 options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
79 this._hoverable( this.buttonElement );
82 .addClass( baseClasses )
83 .attr( "role", "button" )
84 .bind( "mouseenter" + this.eventNamespace, function() {
85 if ( options.disabled ) {
88 if ( this === lastActive ) {
89 $( this ).addClass( "ui-state-active" );
92 .bind( "mouseleave" + this.eventNamespace, function() {
93 if ( options.disabled ) {
96 $( this ).removeClass( activeClass );
98 .bind( "click" + this.eventNamespace, function( event ) {
99 if ( options.disabled ) {
100 event.preventDefault();
101 event.stopImmediatePropagation();
105 // Can't use _focusable() because the element that receives focus
106 // and the element that gets the ui-state-focus class are different
109 this.buttonElement.addClass( "ui-state-focus" );
112 this.buttonElement.removeClass( "ui-state-focus" );
116 if ( toggleButton ) {
117 this.element.bind( "change" + this.eventNamespace, function() {
122 if ( this.type === "checkbox" ) {
123 this.buttonElement.bind( "click" + this.eventNamespace, function() {
124 if ( options.disabled ) {
128 } else if ( this.type === "radio" ) {
129 this.buttonElement.bind( "click" + this.eventNamespace, function() {
130 if ( options.disabled ) {
133 $( this ).addClass( "ui-state-active" );
134 that.buttonElement.attr( "aria-pressed", "true" );
136 var radio = that.element[ 0 ];
140 return $( this ).button( "widget" )[ 0 ];
142 .removeClass( "ui-state-active" )
143 .attr( "aria-pressed", "false" );
147 .bind( "mousedown" + this.eventNamespace, function() {
148 if ( options.disabled ) {
151 $( this ).addClass( "ui-state-active" );
153 that.document.one( "mouseup", function() {
157 .bind( "mouseup" + this.eventNamespace, function() {
158 if ( options.disabled ) {
161 $( this ).removeClass( "ui-state-active" );
163 .bind( "keydown" + this.eventNamespace, function(event) {
164 if ( options.disabled ) {
167 if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
168 $( this ).addClass( "ui-state-active" );
171 // see #8559, we bind to blur here in case the button element loses
172 // focus between keydown and keyup, it would be left in an "active" state
173 .bind( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() {
174 $( this ).removeClass( "ui-state-active" );
177 if ( this.buttonElement.is("a") ) {
178 this.buttonElement.keyup(function(event) {
179 if ( event.keyCode === $.ui.keyCode.SPACE ) {
180 // TODO pass through original event correctly (just as 2nd argument doesn't work)
187 // TODO: pull out $.Widget's handling for the disabled option into
188 // $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
189 // be overridden by individual plugins
190 this._setOption( "disabled", options.disabled );
194 _determineButtonType: function() {
195 var ancestor, labelSelector, checked;
197 if ( this.element.is("[type=checkbox]") ) {
198 this.type = "checkbox";
199 } else if ( this.element.is("[type=radio]") ) {
201 } else if ( this.element.is("input") ) {
204 this.type = "button";
207 if ( this.type === "checkbox" || this.type === "radio" ) {
208 // we don't search against the document in case the element
209 // is disconnected from the DOM
210 ancestor = this.element.parents().last();
211 labelSelector = "label[for='" + this.element.attr("id") + "']";
212 this.buttonElement = ancestor.find( labelSelector );
213 if ( !this.buttonElement.length ) {
214 ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
215 this.buttonElement = ancestor.filter( labelSelector );
216 if ( !this.buttonElement.length ) {
217 this.buttonElement = ancestor.find( labelSelector );
220 this.element.addClass( "ui-helper-hidden-accessible" );
222 checked = this.element.is( ":checked" );
224 this.buttonElement.addClass( "ui-state-active" );
226 this.buttonElement.prop( "aria-pressed", checked );
228 this.buttonElement = this.element;
233 return this.buttonElement;
236 _destroy: function() {
238 .removeClass( "ui-helper-hidden-accessible" );
240 .removeClass( baseClasses + " ui-state-active " + typeClasses )
241 .removeAttr( "role" )
242 .removeAttr( "aria-pressed" )
243 .html( this.buttonElement.find(".ui-button-text").html() );
245 if ( !this.hasTitle ) {
246 this.buttonElement.removeAttr( "title" );
250 _setOption: function( key, value ) {
251 this._super( key, value );
252 if ( key === "disabled" ) {
253 this.element.prop( "disabled", !!value );
255 this.buttonElement.removeClass( "ui-state-focus" );
262 refresh: function() {
264 var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
266 if ( isDisabled !== this.options.disabled ) {
267 this._setOption( "disabled", isDisabled );
269 if ( this.type === "radio" ) {
270 radioGroup( this.element[0] ).each(function() {
271 if ( $( this ).is( ":checked" ) ) {
272 $( this ).button( "widget" )
273 .addClass( "ui-state-active" )
274 .attr( "aria-pressed", "true" );
276 $( this ).button( "widget" )
277 .removeClass( "ui-state-active" )
278 .attr( "aria-pressed", "false" );
281 } else if ( this.type === "checkbox" ) {
282 if ( this.element.is( ":checked" ) ) {
284 .addClass( "ui-state-active" )
285 .attr( "aria-pressed", "true" );
288 .removeClass( "ui-state-active" )
289 .attr( "aria-pressed", "false" );
294 _resetButton: function() {
295 if ( this.type === "input" ) {
296 if ( this.options.label ) {
297 this.element.val( this.options.label );
301 var buttonElement = this.buttonElement.removeClass( typeClasses ),
302 buttonText = $( "<span></span>", this.document[0] )
303 .addClass( "ui-button-text" )
304 .html( this.options.label )
305 .appendTo( buttonElement.empty() )
307 icons = this.options.icons,
308 multipleIcons = icons.primary && icons.secondary,
311 if ( icons.primary || icons.secondary ) {
312 if ( this.options.text ) {
313 buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
316 if ( icons.primary ) {
317 buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
320 if ( icons.secondary ) {
321 buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
324 if ( !this.options.text ) {
325 buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
327 if ( !this.hasTitle ) {
328 buttonElement.attr( "title", $.trim( buttonText ) );
332 buttonClasses.push( "ui-button-text-only" );
334 buttonElement.addClass( buttonClasses.join( " " ) );
338 $.widget( "ui.buttonset", {
341 items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
344 _create: function() {
345 this.element.addClass( "ui-buttonset" );
352 _setOption: function( key, value ) {
353 if ( key === "disabled" ) {
354 this.buttons.button( "option", key, value );
357 this._super( key, value );
360 refresh: function() {
361 var rtl = this.element.css( "direction" ) === "rtl";
363 this.buttons = this.element.find( this.options.items )
364 .filter( ":ui-button" )
371 return $( this ).button( "widget" )[ 0 ];
373 .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
375 .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
378 .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
383 _destroy: function() {
384 this.element.removeClass( "ui-buttonset" );
387 return $( this ).button( "widget" )[ 0 ];
389 .removeClass( "ui-corner-left ui-corner-right" )
391 .button( "destroy" );