library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Button: conform to coding standards.

Browse Source
This commit is contained in:
Scott González 2010-01-18 01:58:15 +00:00
parent b3e5f8453c
commit 0ec857a5bd
2 changed files with 143 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tests/unit/button/button_core.js
View File

@ -10,7 +10,7 @@ module("button: core");
test("checkbox", function() { test("checkbox", function() {
var input = $("#check"); var input = $("#check");
label = $("label[for=check]"); label = $("label[for=check]");
ok( input.is(":visble") ); ok( input.is(":visible") );
ok( label.is(":not(.ui-button)") ); ok( label.is(":not(.ui-button)") );
input.button(); input.button();
ok( input.is(":hidden") ); ok( input.is(":hidden") );
@ -20,7 +20,7 @@ test("checkbox", function() {
test("radios", function() { test("radios", function() {
var inputs = $("#radio0 input"); var inputs = $("#radio0 input");
labels = $("#radio0 label"); labels = $("#radio0 label");
ok( inputs.is(":visble") ); ok( inputs.is(":visible") );
ok( labels.is(":not(.ui-button)") ); ok( labels.is(":not(.ui-button)") );
inputs.button(); inputs.button();
ok( inputs.is(":hidden") ); ok( inputs.is(":hidden") );

272
ui/jquery.ui.button.js vendored
View File

@ -11,14 +11,14 @@
* jquery.ui.core.js * jquery.ui.core.js
* jquery.ui.widget.js * jquery.ui.widget.js
*/ */
(function($) { (function( $ ) {
var lastActive, var lastActive,
baseClasses = "ui-button ui-widget ui-state-default ui-corner-all", baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
otherClasses = "ui-state-hover ui-state-active " + otherClasses = "ui-state-hover ui-state-active " +
"ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only"; "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only";
$.widget("ui.button", { $.widget( "ui.button", {
options: { options: {
text: true, text: true,
label: null, label: null,
@ -29,113 +29,121 @@ $.widget("ui.button", {
}, },
_create: function() { _create: function() {
this._determineButtonType(); this._determineButtonType();
this.hasTitle = !!this.buttonElement.attr('title'); this.hasTitle = !!this.buttonElement.attr( "title" );
var self = this, var self = this,
options = this.options, options = this.options,
toggleButton = this.type == 'checkbox' || this.type == 'radio', toggleButton = this.type === "checkbox" || this.type === "radio",
hoverClass = 'ui-state-hover' + (!toggleButton ? ' ui-state-active' : ''); hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" );
if (options.label === null) { if ( options.label === null ) {
options.label = this.buttonElement.html(); options.label = this.buttonElement.html();
} }
this.buttonElement this.buttonElement
.addClass(baseClasses) .addClass( baseClasses )
.attr('role', 'button') .attr( "role", "button" )
.bind("mouseenter.button", function() { .bind( "mouseenter.button", function() {
if (options.disabled) { return; } if ( options.disabled ) {
$(this).addClass("ui-state-hover"); return;
if (this == lastActive) { }
$(this).addClass("ui-state-active"); $( this ).addClass( "ui-state-hover" );
if ( this === lastActive ) {
$( this ).addClass( "ui-state-active" );
} }
}) })
.bind("mouseleave.button", function() { .bind( "mouseleave.button", function() {
if (options.disabled) { return; } if ( options.disabled ) {
$(this).removeClass(hoverClass); return;
}
$( this ).removeClass( hoverClass );
}); });
switch (this.type) { if ( this.type === "checkbox") {
case 'checkbox': this.buttonElement.bind( "click.button", function() {
this.buttonElement.bind('click.button', function() { if ( options.disabled ) {
if (options.disabled) { return; } return;
$(this).toggleClass("ui-state-active"); }
self.element $( this ).toggleClass( "ui-state-active" );
.attr("checked", !self.element[0].checked) self.element
.click(); .attr( "checked", !self.element[0].checked )
self.buttonElement.attr('aria-pressed', self.element[0].checked); .click();
}); self.buttonElement.attr( "aria-pressed", self.element[0].checked );
break; });
case 'radio': } else if ( this.type === "radio") {
this.buttonElement.bind('click.button', function() { this.buttonElement.bind( "click.button", function() {
if (options.disabled) { return; } if ( options.disabled ) {
$(this).addClass("ui-state-active"); return;
self.element }
.attr("checked", true) $( this ).addClass( "ui-state-active" );
.click(); self.element
self.buttonElement.attr('aria-pressed', true); .attr( "checked", true )
.click();
self.buttonElement.attr( "aria-pressed", true );
var radio = self.element[0], var radio = self.element[ 0 ],
name = radio.name, name = radio.name,
form = radio.form, form = radio.form,
radios; radios;
if (name) { if ( name ) {
if (form) { if ( form ) {
radios = $(form).find('[name=' + name + ']'); radios = $( form ).find( "[name=" + name + "]" );
} else { } else {
radios = $('[name=' + name + ']', radio.ownerDocument) radios = $( "[name=" + name + "]", radio.ownerDocument )
.filter(function() { .filter(function() {
return !this.form; return !this.form;
}); });
}
radios
.not(radio)
.map(function() {
return $(this).button('widget')[0];
})
.removeClass('ui-state-active')
.attr('aria-pressed', false);
} }
}); radios
break; .not( radio )
default: .map(function() {
this.buttonElement return $( this ).button( "widget" )[ 0 ];
.bind("mousedown.button", function() { })
if (options.disabled) { return; } .removeClass( "ui-state-active" )
$(this).addClass("ui-state-active"); .attr( "aria-pressed", false );
lastActive = this; }
$(document).one('mouseup', function() { });
lastActive = null; } else {
}); this.buttonElement
}) .bind( "mousedown.button", function() {
.bind("mouseup.button", function() { if ( options.disabled ) {
if (options.disabled) { return; } return;
$(this).removeClass("ui-state-active"); }
$( this ).addClass( "ui-state-active" );
lastActive = this;
$( document ).one( "mouseup", function() {
lastActive = null;
}); });
break; })
.bind( "mouseup.button", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-active" );
});
} }
this._resetButton(); this._resetButton();
}, },
_determineButtonType: function() { _determineButtonType: function() {
this.type = this.element.is(':checkbox') this.type = this.element.is( ":checkbox" )
? 'checkbox' ? "checkbox"
: this.element.is(':radio') : this.element.is( ":radio" )
? 'radio' ? "radio"
: this.element.is('input') : this.element.is( "input" )
? 'input' ? "input"
: 'button'; : "button";
if (this.type == 'checkbox' || this.type == 'radio') { if ( this.type === "checkbox" || this.type === "radio" ) {
this.buttonElement = $("[for=" + this.element.attr("id") + "]"); this.buttonElement = $( "[for=" + this.element.attr("id") + "]" );
this.element.hide(); this.element.hide();
var checked = this.element.is(':checked'); var checked = this.element.is( ":checked" );
if (checked) { if ( checked ) {
this.buttonElement.addClass('ui-state-active'); this.buttonElement.addClass( "ui-state-active" );
} }
this.buttonElement.attr('aria-pressed', checked) this.buttonElement.attr( "aria-pressed", checked )
} else { } else {
this.buttonElement = this.element; this.buttonElement = this.element;
} }
@ -147,101 +155,101 @@ $.widget("ui.button", {
destroy: function() { destroy: function() {
this.buttonElement this.buttonElement
.removeClass(baseClasses + " " + otherClasses) .removeClass( baseClasses + " " + otherClasses )
.removeAttr('role') .removeAttr( "role" )
.removeAttr('aria-pressed') .removeAttr( "aria-pressed" )
.html(this.buttonElement.find(".ui-button-text").html()); .html( this.buttonElement.find(".ui-button-text").html() );
if (!this.hasTitle) { if ( !this.hasTitle ) {
this.buttonElement.removeAttr('title'); this.buttonElement.removeAttr( "title" );
} }
if (this.type == 'checkbox' || this.type == 'radio') { if ( this.type === "checkbox" || this.type === "radio" ) {
this.element.show(); this.element.show();
} }
$.Widget.prototype.destroy.call(this); $.Widget.prototype.destroy.call( this );
}, },
_setOption: function(key, value) { _setOption: function( key, value ) {
$.Widget.prototype._setOption.apply(this, arguments); $.Widget.prototype._setOption.apply( this, arguments );
this._resetButton(); this._resetButton();
}, },
_resetButton: function() { _resetButton: function() {
if (this.type == 'input') { if ( this.type === "input" ) {
if (this.options.label) { if ( this.options.label ) {
this.element.val(this.options.label); this.element.val( this.options.label );
} }
return; return;
} }
var buttonElement = this.buttonElement, var buttonElement = this.buttonElement,
buttonText = $("<span></span>") buttonText = $( "<span></span>" )
.addClass("ui-button-text") .addClass( "ui-button-text" )
.html(this.options.label) .html( this.options.label )
.appendTo(buttonElement.empty()) .appendTo( buttonElement.empty() )
.text(); .text();
var icons = this.options.icons, var icons = this.options.icons,
multipleIcons = icons.primary && icons.secondary; multipleIcons = icons.primary && icons.secondary;
if (icons.primary || icons.secondary) { if ( icons.primary || icons.secondary ) {
buttonElement.addClass("ui-button-text-icon" + buttonElement.addClass( "ui-button-text-icon" +
(multipleIcons ? "s" : "")); ( multipleIcons ? "s" : "" ) );
if (icons.primary) { if ( icons.primary ) {
buttonElement.prepend("<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>"); buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
} }
if (icons.secondary) { if ( icons.secondary ) {
buttonElement.append("<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>"); buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
} }
if (!this.options.text) { if ( !this.options.text ) {
buttonElement buttonElement
.addClass(multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only") .addClass( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" )
.removeClass("ui-button-text-icons ui-button-text-icon"); .removeClass( "ui-button-text-icons ui-button-text-icon" );
if (!this.hasTitle) { if ( !this.hasTitle ) {
buttonElement.attr("title", buttonText); buttonElement.attr( "title", buttonText );
} }
} }
} else { } else {
buttonElement.addClass("ui-button-text-only"); buttonElement.addClass( "ui-button-text-only" );
} }
} }
}); });
$.widget("ui.buttonset", { $.widget( "ui.buttonset", {
_create: function() { _create: function() {
this.element.addClass("ui-button-set"); this.element.addClass( "ui-button-set" );
this.buttons = this.element.find(':button, :submit, :reset, :checkbox, :radio, a, .ui-button') this.buttons = this.element.find( ":button, :submit, :reset, :checkbox, :radio, a, .ui-button" )
.button() .button()
.map(function() { .map(function() {
return $(this).button('widget')[0]; return $( this ).button( "widget" )[ 0 ];
}) })
.removeClass('ui-corner-all') .removeClass( "ui-corner-all" )
.filter(':first') .filter( ":first" )
.addClass('ui-corner-left') .addClass( "ui-corner-left" )
.end() .end()
.filter(':last') .filter( ":last" )
.addClass('ui-corner-right') .addClass( "ui-corner-right" )
.end() .end()
.end(); .end();
}, },
_setOption: function(key, value) { _setOption: function( key, value ) {
if (key == 'disabled') { if ( key === "disabled" ) {
this.buttons.button('option', key, value); this.buttons.button( "option", key, value );
} }
$.Widget.prototype._setOption.apply(this, arguments); $.Widget.prototype._setOption.apply( this, arguments );
}, },
destroy: function() { destroy: function() {
this.element.removeClass('ui-button-set'); this.element.removeClass( "ui-button-set" );
this.buttons this.buttons
.button("destroy") .button( "destroy" )
.removeClass("ui-corner-left ui-corner-right"); .removeClass( "ui-corner-left ui-corner-right" );
$.Widget.prototype.destroy.call(this); $.Widget.prototype.destroy.call( this );
} }
}); });
})(jQuery); })( jQuery );