2
* jQuery UI Button 1.10.3
5
* Copyright 2013 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 ) {
17
var lastActive, startXPos, startYPos, clickDragged,
18
baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
19
stateClasses = "ui-state-hover ui-state-active ",
20
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",
21
formResetHandler = function() {
23
setTimeout(function() {
24
form.find( ":ui-button" ).button( "refresh" );
27
radioGroup = function( radio ) {
28
var name = radio.name,
32
name = name.replace( /'/g, "\\'" );
34
radios = $( form ).find( "[name='" + name + "']" );
36
radios = $( "[name='" + name + "']", radio.ownerDocument )
45
$.widget( "ui.button", {
47
defaultElement: "<button>",
58
this.element.closest( "form" )
59
.unbind( "reset" + this.eventNamespace )
60
.bind( "reset" + this.eventNamespace, formResetHandler );
62
if ( typeof this.options.disabled !== "boolean" ) {
63
this.options.disabled = !!this.element.prop( "disabled" );
65
this.element.prop( "disabled", this.options.disabled );
68
this._determineButtonType();
69
this.hasTitle = !!this.buttonElement.attr( "title" );
72
options = this.options,
73
toggleButton = this.type === "checkbox" || this.type === "radio",
74
activeClass = !toggleButton ? "ui-state-active" : "",
75
focusClass = "ui-state-focus";
77
if ( options.label === null ) {
78
options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
81
this._hoverable( this.buttonElement );
84
.addClass( baseClasses )
85
.attr( "role", "button" )
86
.bind( "mouseenter" + this.eventNamespace, function() {
87
if ( options.disabled ) {
90
if ( this === lastActive ) {
91
$( this ).addClass( "ui-state-active" );
94
.bind( "mouseleave" + this.eventNamespace, function() {
95
if ( options.disabled ) {
98
$( this ).removeClass( activeClass );
100
.bind( "click" + this.eventNamespace, function( event ) {
101
if ( options.disabled ) {
102
event.preventDefault();
103
event.stopImmediatePropagation();
108
.bind( "focus" + this.eventNamespace, function() {
109
// no need to check disabled, focus won't be triggered anyway
110
that.buttonElement.addClass( focusClass );
112
.bind( "blur" + this.eventNamespace, function() {
113
that.buttonElement.removeClass( focusClass );
116
if ( toggleButton ) {
117
this.element.bind( "change" + this.eventNamespace, function() {
118
if ( clickDragged ) {
123
// if mouse moves between mousedown and mouseup (drag) set clickDragged flag
124
// prevents issue where button state changes but checkbox/radio checked state
125
// does not in Firefox (see ticket #6970)
127
.bind( "mousedown" + this.eventNamespace, function( event ) {
128
if ( options.disabled ) {
131
clickDragged = false;
132
startXPos = event.pageX;
133
startYPos = event.pageY;
135
.bind( "mouseup" + this.eventNamespace, function( event ) {
136
if ( options.disabled ) {
139
if ( startXPos !== event.pageX || startYPos !== event.pageY ) {
145
if ( this.type === "checkbox" ) {
146
this.buttonElement.bind( "click" + this.eventNamespace, function() {
147
if ( options.disabled || clickDragged ) {
151
} else if ( this.type === "radio" ) {
152
this.buttonElement.bind( "click" + this.eventNamespace, function() {
153
if ( options.disabled || clickDragged ) {
156
$( this ).addClass( "ui-state-active" );
157
that.buttonElement.attr( "aria-pressed", "true" );
159
var radio = that.element[ 0 ];
163
return $( this ).button( "widget" )[ 0 ];
165
.removeClass( "ui-state-active" )
166
.attr( "aria-pressed", "false" );
170
.bind( "mousedown" + this.eventNamespace, function() {
171
if ( options.disabled ) {
174
$( this ).addClass( "ui-state-active" );
176
that.document.one( "mouseup", function() {
180
.bind( "mouseup" + this.eventNamespace, function() {
181
if ( options.disabled ) {
184
$( this ).removeClass( "ui-state-active" );
186
.bind( "keydown" + this.eventNamespace, function(event) {
187
if ( options.disabled ) {
190
if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
191
$( this ).addClass( "ui-state-active" );
194
// see #8559, we bind to blur here in case the button element loses
195
// focus between keydown and keyup, it would be left in an "active" state
196
.bind( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() {
197
$( this ).removeClass( "ui-state-active" );
200
if ( this.buttonElement.is("a") ) {
201
this.buttonElement.keyup(function(event) {
202
if ( event.keyCode === $.ui.keyCode.SPACE ) {
203
// TODO pass through original event correctly (just as 2nd argument doesn't work)
210
// TODO: pull out $.Widget's handling for the disabled option into
211
// $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
212
// be overridden by individual plugins
213
this._setOption( "disabled", options.disabled );
217
_determineButtonType: function() {
218
var ancestor, labelSelector, checked;
220
if ( this.element.is("[type=checkbox]") ) {
221
this.type = "checkbox";
222
} else if ( this.element.is("[type=radio]") ) {
224
} else if ( this.element.is("input") ) {
227
this.type = "button";
230
if ( this.type === "checkbox" || this.type === "radio" ) {
231
// we don't search against the document in case the element
232
// is disconnected from the DOM
233
ancestor = this.element.parents().last();
234
labelSelector = "label[for='" + this.element.attr("id") + "']";
235
this.buttonElement = ancestor.find( labelSelector );
236
if ( !this.buttonElement.length ) {
237
ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
238
this.buttonElement = ancestor.filter( labelSelector );
239
if ( !this.buttonElement.length ) {
240
this.buttonElement = ancestor.find( labelSelector );
243
this.element.addClass( "ui-helper-hidden-accessible" );
245
checked = this.element.is( ":checked" );
247
this.buttonElement.addClass( "ui-state-active" );
249
this.buttonElement.prop( "aria-pressed", checked );
251
this.buttonElement = this.element;
256
return this.buttonElement;
259
_destroy: function() {
261
.removeClass( "ui-helper-hidden-accessible" );
263
.removeClass( baseClasses + " " + stateClasses + " " + typeClasses )
264
.removeAttr( "role" )
265
.removeAttr( "aria-pressed" )
266
.html( this.buttonElement.find(".ui-button-text").html() );
268
if ( !this.hasTitle ) {
269
this.buttonElement.removeAttr( "title" );
273
_setOption: function( key, value ) {
274
this._super( key, value );
275
if ( key === "disabled" ) {
277
this.element.prop( "disabled", true );
279
this.element.prop( "disabled", false );
286
refresh: function() {
288
var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
290
if ( isDisabled !== this.options.disabled ) {
291
this._setOption( "disabled", isDisabled );
293
if ( this.type === "radio" ) {
294
radioGroup( this.element[0] ).each(function() {
295
if ( $( this ).is( ":checked" ) ) {
296
$( this ).button( "widget" )
297
.addClass( "ui-state-active" )
298
.attr( "aria-pressed", "true" );
300
$( this ).button( "widget" )
301
.removeClass( "ui-state-active" )
302
.attr( "aria-pressed", "false" );
305
} else if ( this.type === "checkbox" ) {
306
if ( this.element.is( ":checked" ) ) {
308
.addClass( "ui-state-active" )
309
.attr( "aria-pressed", "true" );
312
.removeClass( "ui-state-active" )
313
.attr( "aria-pressed", "false" );
318
_resetButton: function() {
319
if ( this.type === "input" ) {
320
if ( this.options.label ) {
321
this.element.val( this.options.label );
325
var buttonElement = this.buttonElement.removeClass( typeClasses ),
326
buttonText = $( "<span></span>", this.document[0] )
327
.addClass( "ui-button-text" )
328
.html( this.options.label )
329
.appendTo( buttonElement.empty() )
331
icons = this.options.icons,
332
multipleIcons = icons.primary && icons.secondary,
335
if ( icons.primary || icons.secondary ) {
336
if ( this.options.text ) {
337
buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
340
if ( icons.primary ) {
341
buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
344
if ( icons.secondary ) {
345
buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
348
if ( !this.options.text ) {
349
buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
351
if ( !this.hasTitle ) {
352
buttonElement.attr( "title", $.trim( buttonText ) );
356
buttonClasses.push( "ui-button-text-only" );
358
buttonElement.addClass( buttonClasses.join( " " ) );
362
$.widget( "ui.buttonset", {
365
items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
368
_create: function() {
369
this.element.addClass( "ui-buttonset" );
376
_setOption: function( key, value ) {
377
if ( key === "disabled" ) {
378
this.buttons.button( "option", key, value );
381
this._super( key, value );
384
refresh: function() {
385
var rtl = this.element.css( "direction" ) === "rtl";
387
this.buttons = this.element.find( this.options.items )
388
.filter( ":ui-button" )
395
return $( this ).button( "widget" )[ 0 ];
397
.removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
399
.addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
402
.addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
407
_destroy: function() {
408
this.element.removeClass( "ui-buttonset" );
411
return $( this ).button( "widget" )[ 0 ];
413
.removeClass( "ui-corner-left ui-corner-right" )
415
.button( "destroy" );