diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/slider.js | 77 |
1 files changed, 35 insertions, 42 deletions
diff --git a/ui/slider.js b/ui/slider.js index fceb367f3..7d8619d43 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -39,6 +39,14 @@ return $.widget( "ui.slider", $.ui.mouse, { options: { animate: false, + classes: { + "ui-slider": "ui-corner-all", + "ui-slider-handle": "ui-corner-all", + + // Note: ui-widget-header isn't the most fittingly semantic framework class for this + // element, but worked best visually with a variety of themes + "ui-slider-range": "ui-corner-all ui-widget-header" + }, distance: 0, max: 100, min: 0, @@ -68,12 +76,8 @@ return $.widget( "ui.slider", $.ui.mouse, { this._mouseInit(); this._calculateNewMax(); - this.element - .addClass( "ui-slider" + - " ui-slider-" + this.orientation + - " ui-widget" + - " ui-widget-content" + - " ui-corner-all"); + this._addClass( "ui-slider ui-slider-" + this.orientation, + "ui-widget ui-widget-content" ); this._refresh(); this._setOption( "disabled", this.options.disabled ); @@ -91,8 +95,8 @@ return $.widget( "ui.slider", $.ui.mouse, { _createHandles: function() { var i, handleCount, options = this.options, - existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ), - handle = "<span class='ui-slider-handle ui-state-default ui-corner-all' tabindex='0'></span>", + existingHandles = this.element.find( ".ui-slider-handle" ), + handle = "<span tabindex='0'></span>", handles = []; handleCount = ( options.values && options.values.length ) || 1; @@ -108,6 +112,8 @@ return $.widget( "ui.slider", $.ui.mouse, { this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) ); + this._addClass( this.handles, "ui-slider-handle", "ui-state-default" ); + this.handle = this.handles.eq( 0 ); this.handles.each(function( i ) { @@ -116,8 +122,7 @@ return $.widget( "ui.slider", $.ui.mouse, { }, _createRange: function() { - var options = this.options, - classes = ""; + var options = this.options; if ( options.range ) { if ( options.range === true ) { @@ -131,24 +136,22 @@ return $.widget( "ui.slider", $.ui.mouse, { } if ( !this.range || !this.range.length ) { - this.range = $( "<div></div>" ) + this.range = $( "<div>" ) .appendTo( this.element ); - classes = "ui-slider-range" + - // note: this isn't the most fittingly semantic framework class for this element, - // but worked best visually with a variety of themes - " ui-widget-header ui-corner-all"; + this._addClass( this.range, "ui-slider-range" ); } else { - this.range.removeClass( "ui-slider-range-min ui-slider-range-max" ) - // Handle range switching from true to min/max - .css({ - "left": "", - "bottom": "" - }); - } + this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" ); - this.range.addClass( classes + - ( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) ); + // Handle range switching from true to min/max + this.range.css({ + "left": "", + "bottom": "" + }); + } + if ( options.range === "min" || options.range === "max" ) { + this._addClass( this.range, "ui-slider-range-" + options.range ); + } } else { if ( this.range ) { this.range.remove(); @@ -170,14 +173,6 @@ return $.widget( "ui.slider", $.ui.mouse, { this.range.remove(); } - this.element - .removeClass( "ui-slider" + - " ui-slider-horizontal" + - " ui-slider-vertical" + - " ui-widget" + - " ui-widget-content" + - " ui-corner-all" ); - this._mouseDestroy(); }, @@ -218,9 +213,8 @@ return $.widget( "ui.slider", $.ui.mouse, { this._handleIndex = index; - closestHandle - .addClass( "ui-state-active" ) - .focus(); + this._addClass( closestHandle, null, "ui-state-active" ); + closestHandle.focus(); offset = closestHandle.offset(); mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" ); @@ -254,7 +248,7 @@ return $.widget( "ui.slider", $.ui.mouse, { }, _mouseStop: function( event ) { - this.handles.removeClass( "ui-state-active" ); + this._removeClass( this.handles, null, "ui-state-active" ); this._mouseSliding = false; this._stop( event, this._handleIndex ); @@ -451,7 +445,7 @@ return $.widget( "ui.slider", $.ui.mouse, { } if ( key === "disabled" ) { - this.element.toggleClass( "ui-state-disabled", !!value ); + this._toggleClass( null, "ui-state-disabled", !!value ); } this._super( key, value ); @@ -459,9 +453,8 @@ return $.widget( "ui.slider", $.ui.mouse, { switch ( key ) { case "orientation": this._detectOrientation(); - this.element - .removeClass( "ui-slider-horizontal ui-slider-vertical" ) - .addClass( "ui-slider-" + this.orientation ); + this._removeClass( "ui-slider-horizontal ui-slider-vertical" ) + ._addClass( "ui-slider-" + this.orientation ); this._refreshValue(); // Reset positioning from previous orientation @@ -659,7 +652,7 @@ return $.widget( "ui.slider", $.ui.mouse, { event.preventDefault(); if ( !this._keySliding ) { this._keySliding = true; - $( event.target ).addClass( "ui-state-active" ); + this._addClass( $( event.target ), null, "ui-state-active" ); allowed = this._start( event, index ); if ( allowed === false ) { return; @@ -716,7 +709,7 @@ return $.widget( "ui.slider", $.ui.mouse, { this._keySliding = false; this._stop( event, index ); this._change( event, index ); - $( event.target ).removeClass( "ui-state-active" ); + this._removeClass( $( event.target ), null, "ui-state-active" ); } } } |