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

Spinner: Add classes option

Browse Source 
Ref #7053
Ref gh-1411
This commit is contained in:
Alexander Schmitz 2015-02-24 16:17:29 -05:00
parent 90c27b4b51
commit 28dccda377
4 changed files with 57 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tests/unit/spinner/spinner.html
View File

@ -11,6 +11,7 @@
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "button", "spinner" ],

6
tests/unit/spinner/spinner_common.js
View File

@ -1,6 +1,10 @@
TestHelpers.commonWidgetTests( "spinner", {
defaults: {
classes: {},
classes: {
"ui-spinner": "ui-corner-all",
"ui-spinner-up": "ui-corner-tr",
"ui-spinner-down": "ui-corner-br"
},
culture: null,
disabled: false,
icons: {

15
tests/unit/spinner/spinner_core.js
View File

@ -4,6 +4,21 @@ var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp;
module( "spinner: core" );
test( "markup structure", function( assert ) {
expect( 6 );
var element = $( "#spin" ).spinner(),
spinner = element.spinner( "widget" ),
up = spinner.find( ".ui-spinner-up" ),
down = spinner.find( ".ui-spinner-down" );
assert.hasClasses( element, "ui-spinner-input" );
assert.hasClasses( spinner, "ui-spinner ui-widget ui-widget-content" );
assert.hasClasses( up, "ui-spinner-button ui-spinner-up ui-widget" );
equal( up.length, 1, "Spinner contains exactly one up button" );
assert.hasClasses( down, "ui-spinner-button ui-spinner-down ui-widget" );
equal( down.length, 1, "Spinner contains exactly one down button" );
});
test( "keydown UP on input, increases value not greater than max", function() {
expect( 5 );
var element = $( "#spin" ).val( 70 ).spinner({

54
ui/spinner.js
View File

@ -49,6 +49,11 @@ return $.widget( "ui.spinner", {
defaultElement: "<input>",
widgetEventPrefix: "spin",
options: {
classes: {
"ui-spinner": "ui-corner-all",
"ui-spinner-down": "ui-corner-br",
"ui-spinner-up": "ui-corner-tr"
},
culture: null,
icons: {
down: "ui-icon-triangle-1-s",
@ -211,20 +216,31 @@ return $.widget( "ui.spinner", {
_draw: function() {
var uiSpinner = this.uiSpinner = this.element
.addClass( "ui-spinner-input" )
.attr( "autocomplete", "off" )
.wrap( this._uiSpinnerHtml() )
.parent()
// add buttons
.append( this._buttonHtml() );
this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
this._addClass( "ui-spinner-input" );
this.element.attr( "role", "spinbutton" );
// button bindings
this.buttons = uiSpinner.find( ".ui-spinner-button" )
this.buttons = uiSpinner.children( "a" )
.attr( "tabIndex", -1 )
.button()
.removeClass( "ui-corner-all" );
.button();
// TODO: Right now button does not support classes this is already updated in button PR
this._removeClass( this.buttons, "ui-corner-all" );
this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" );
this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" );
this._addClass( this.buttons.first().find( ".ui-button-text span" ), null,
"ui-icon " + this.options.icons.up );
this._addClass( this.buttons.last().find( ".ui-button-text span" ), null,
"ui-icon " + this.options.icons.down );
// IE 6 doesn't understand height: 50% for the buttons
// unless the wrapper has an explicit height
@ -262,16 +278,16 @@ return $.widget( "ui.spinner", {
},
_uiSpinnerHtml: function() {
return "<span class='ui-spinner ui-widget ui-widget-content ui-corner-all'></span>";
return "<span>";
},
_buttonHtml: function() {
return "" +
"<a class='ui-spinner-button ui-spinner-up ui-corner-tr'>" +
"<span class='ui-icon " + this.options.icons.up + "'>&#9650;</span>" +
"<a>" +
"<span>&#9650;</span>" +
"</a>" +
"<a class='ui-spinner-button ui-spinner-down ui-corner-br'>" +
"<span class='ui-icon " + this.options.icons.down + "'>&#9660;</span>" +
"<a>" +
"<span>&#9660;</span>" +
"</a>";
},
@ -379,8 +395,10 @@ return $.widget( "ui.spinner", {
},
_setOption: function( key, value ) {
var prevValue, first, last;
if ( key === "culture" || key === "numberFormat" ) {
var prevValue = this._parse( this.element.val() );
prevValue = this._parse( this.element.val() );
this.options[ key ] = value;
this.element.val( this._format( prevValue ) );
return;
@ -392,18 +410,18 @@ return $.widget( "ui.spinner", {
}
}
if ( key === "icons" ) {
this.buttons.first().find( ".ui-icon" )
.removeClass( this.options.icons.up )
.addClass( value.up );
this.buttons.last().find( ".ui-icon" )
.removeClass( this.options.icons.down )
.addClass( value.down );
first = this.buttons.first().find( ".ui-icon" );
this._removeClass( first, null, this.options.icons.up );
this._addClass( first, null, value.up );
last = this.buttons.last().find( ".ui-icon" );
this._removeClass( last, null, this.options.icons.down );
this._addClass( last, null, value.down );
}
this._super( key, value );
if ( key === "disabled" ) {
this.widget().toggleClass( "ui-state-disabled", !!value );
this._toggleClass( this.uiSpinner, null, "ui-state-disabled", !!value );
this.element.prop( "disabled", !!value );
this.buttons.button( value ? "disable" : "enable" );
}
@ -469,13 +487,13 @@ return $.widget( "ui.spinner", {
_destroy: function() {
this.element
.removeClass( "ui-spinner-input" )
.prop( "disabled", false )
.removeAttr( "autocomplete" )
.removeAttr( "role" )
.removeAttr( "aria-valuemin" )
.removeAttr( "aria-valuemax" )
.removeAttr( "aria-valuenow" );
this.uiSpinner.replaceWith( this.element );
},