2 * jQuery UI Button 1.8.11
4 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT or GPL Version 2 licenses.
6 * http://jquery.org/license
8 * http://docs.jquery.com/UI/Button
14 (function( $, undefined ) {
17 baseClasses
= "ui-button ui-widget ui-state-default ui-corner-all",
18 stateClasses
= "ui-state-hover ui-state-active ",
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( event
) {
21 $( ":ui-button", event
.target
.form
).each(function() {
22 var inst
= $( this ).data( "button" );
23 setTimeout(function() {
28 radioGroup = function( radio
) {
29 var name
= radio
.name
,
34 radios
= $( form
).find( "[name='" + name
+ "']" );
36 radios
= $( "[name='" + name
+ "']", radio
.ownerDocument
)
45 $.widget( "ui.button", {
56 this.element
.closest( "form" )
57 .unbind( "reset.button" )
58 .bind( "reset.button", formResetHandler
);
60 if ( typeof this.options
.disabled
!== "boolean" ) {
61 this.options
.disabled
= this.element
.attr( "disabled" );
64 this._determineButtonType();
65 this.hasTitle
= !!this.buttonElement
.attr( "title" );
68 options
= this.options
,
69 toggleButton
= this.type
=== "checkbox" || this.type
=== "radio",
70 hoverClass
= "ui-state-hover" + ( !toggleButton
? " ui-state-active" : "" ),
71 focusClass
= "ui-state-focus";
73 if ( options
.label
=== null ) {
74 options
.label
= this.buttonElement
.html();
77 if ( this.element
.is( ":disabled" ) ) {
78 options
.disabled
= true;
82 .addClass( baseClasses
)
83 .attr( "role", "button" )
84 .bind( "mouseenter.button", function() {
85 if ( options
.disabled
) {
88 $( this ).addClass( "ui-state-hover" );
89 if ( this === lastActive
) {
90 $( this ).addClass( "ui-state-active" );
93 .bind( "mouseleave.button", function() {
94 if ( options
.disabled
) {
97 $( this ).removeClass( hoverClass
);
99 .bind( "focus.button", function() {
100 // no need to check disabled, focus won't be triggered anyway
101 $( this ).addClass( focusClass
);
103 .bind( "blur.button", function() {
104 $( this ).removeClass( focusClass
);
107 if ( toggleButton
) {
108 this.element
.bind( "change.button", function() {
113 if ( this.type
=== "checkbox" ) {
114 this.buttonElement
.bind( "click.button", function() {
115 if ( options
.disabled
) {
118 $( this ).toggleClass( "ui-state-active" );
119 self
.buttonElement
.attr( "aria-pressed", self
.element
[0].checked
);
121 } else if ( this.type
=== "radio" ) {
122 this.buttonElement
.bind( "click.button", function() {
123 if ( options
.disabled
) {
126 $( this ).addClass( "ui-state-active" );
127 self
.buttonElement
.attr( "aria-pressed", true );
129 var radio
= self
.element
[ 0 ];
133 return $( this ).button( "widget" )[ 0 ];
135 .removeClass( "ui-state-active" )
136 .attr( "aria-pressed", false );
140 .bind( "mousedown.button", function() {
141 if ( options
.disabled
) {
144 $( this ).addClass( "ui-state-active" );
146 $( document
).one( "mouseup", function() {
150 .bind( "mouseup.button", function() {
151 if ( options
.disabled
) {
154 $( this ).removeClass( "ui-state-active" );
156 .bind( "keydown.button", function(event
) {
157 if ( options
.disabled
) {
160 if ( event
.keyCode
== $.ui
.keyCode
.SPACE
|| event
.keyCode
== $.ui
.keyCode
.ENTER
) {
161 $( this ).addClass( "ui-state-active" );
164 .bind( "keyup.button", function() {
165 $( this ).removeClass( "ui-state-active" );
168 if ( this.buttonElement
.is("a") ) {
169 this.buttonElement
.keyup(function(event
) {
170 if ( event
.keyCode
=== $.ui
.keyCode
.SPACE
) {
171 // TODO pass through original event correctly (just as 2nd argument doesn't work)
178 // TODO: pull out $.Widget's handling for the disabled option into
179 // $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
180 // be overridden by individual plugins
181 this._setOption( "disabled", options
.disabled
);
184 _determineButtonType: function() {
186 if ( this.element
.is(":checkbox") ) {
187 this.type
= "checkbox";
189 if ( this.element
.is(":radio") ) {
192 if ( this.element
.is("input") ) {
195 this.type
= "button";
200 if ( this.type
=== "checkbox" || this.type
=== "radio" ) {
201 // we don't search against the document in case the element
202 // is disconnected from the DOM
203 var ancestor
= this.element
.parents().filter(":last"),
204 labelSelector
= "label[for=" + this.element
.attr("id") + "]";
205 this.buttonElement
= ancestor
.find( labelSelector
);
206 if ( !this.buttonElement
.length
) {
207 ancestor
= ancestor
.length
? ancestor
.siblings() : this.element
.siblings();
208 this.buttonElement
= ancestor
.filter( labelSelector
);
209 if ( !this.buttonElement
.length
) {
210 this.buttonElement
= ancestor
.find( labelSelector
);
213 this.element
.addClass( "ui-helper-hidden-accessible" );
215 var checked
= this.element
.is( ":checked" );
217 this.buttonElement
.addClass( "ui-state-active" );
219 this.buttonElement
.attr( "aria-pressed", checked
);
221 this.buttonElement
= this.element
;
226 return this.buttonElement
;
229 destroy: function() {
231 .removeClass( "ui-helper-hidden-accessible" );
233 .removeClass( baseClasses
+ " " + stateClasses
+ " " + typeClasses
)
234 .removeAttr( "role" )
235 .removeAttr( "aria-pressed" )
236 .html( this.buttonElement
.find(".ui-button-text").html() );
238 if ( !this.hasTitle
) {
239 this.buttonElement
.removeAttr( "title" );
242 $.Widget
.prototype.destroy
.call( this );
245 _setOption: function( key
, value
) {
246 $.Widget
.prototype._setOption
.apply( this, arguments
);
247 if ( key
=== "disabled" ) {
249 this.element
.attr( "disabled", true );
251 this.element
.removeAttr( "disabled" );
257 refresh: function() {
258 var isDisabled
= this.element
.is( ":disabled" );
259 if ( isDisabled
!== this.options
.disabled
) {
260 this._setOption( "disabled", isDisabled
);
262 if ( this.type
=== "radio" ) {
263 radioGroup( this.element
[0] ).each(function() {
264 if ( $( this ).is( ":checked" ) ) {
265 $( this ).button( "widget" )
266 .addClass( "ui-state-active" )
267 .attr( "aria-pressed", true );
269 $( this ).button( "widget" )
270 .removeClass( "ui-state-active" )
271 .attr( "aria-pressed", false );
274 } else if ( this.type
=== "checkbox" ) {
275 if ( this.element
.is( ":checked" ) ) {
277 .addClass( "ui-state-active" )
278 .attr( "aria-pressed", true );
281 .removeClass( "ui-state-active" )
282 .attr( "aria-pressed", false );
287 _resetButton: function() {
288 if ( this.type
=== "input" ) {
289 if ( this.options
.label
) {
290 this.element
.val( this.options
.label
);
294 var buttonElement
= this.buttonElement
.removeClass( typeClasses
),
295 buttonText
= $( "<span></span>" )
296 .addClass( "ui-button-text" )
297 .html( this.options
.label
)
298 .appendTo( buttonElement
.empty() )
300 icons
= this.options
.icons
,
301 multipleIcons
= icons
.primary
&& icons
.secondary
,
304 if ( icons
.primary
|| icons
.secondary
) {
305 if ( this.options
.text
) {
306 buttonClasses
.push( "ui-button-text-icon" + ( multipleIcons
? "s" : ( icons
.primary
? "-primary" : "-secondary" ) ) );
309 if ( icons
.primary
) {
310 buttonElement
.prepend( "<span class='ui-button-icon-primary ui-icon " + icons
.primary
+ "'></span>" );
313 if ( icons
.secondary
) {
314 buttonElement
.append( "<span class='ui-button-icon-secondary ui-icon " + icons
.secondary
+ "'></span>" );
317 if ( !this.options
.text
) {
318 buttonClasses
.push( multipleIcons
? "ui-button-icons-only" : "ui-button-icon-only" );
320 if ( !this.hasTitle
) {
321 buttonElement
.attr( "title", buttonText
);
325 buttonClasses
.push( "ui-button-text-only" );
327 buttonElement
.addClass( buttonClasses
.join( " " ) );
331 $.widget( "ui.buttonset", {
333 items
: ":button, :submit, :reset, :checkbox, :radio, a, :data(button)"
336 _create: function() {
337 this.element
.addClass( "ui-buttonset" );
344 _setOption: function( key
, value
) {
345 if ( key
=== "disabled" ) {
346 this.buttons
.button( "option", key
, value
);
349 $.Widget
.prototype._setOption
.apply( this, arguments
);
352 refresh: function() {
353 this.buttons
= this.element
.find( this.options
.items
)
354 .filter( ":ui-button" )
361 return $( this ).button( "widget" )[ 0 ];
363 .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
365 .addClass( "ui-corner-left" )
368 .addClass( "ui-corner-right" )
373 destroy: function() {
374 this.element
.removeClass( "ui-buttonset" );
377 return $( this ).button( "widget" )[ 0 ];
379 .removeClass( "ui-corner-left ui-corner-right" )
381 .button( "destroy" );
383 $.Widget
.prototype.destroy
.call( this );