Refactored the design and visual behavior of the switch control.

scottjehl · scottjehl · commit 3db2ca30b286 · 2012-02-08T17:56:16.000+07:00
diff --git a/css/structure/jquery.mobile.forms.slider.css b/css/structure/jquery.mobile.forms.slider.css
@@ -3,25 +3,23 @@ input.ui-slider-input,
 .ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
 select.ui-slider-switch { display: none; }
 div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
-div.ui-slider-switch { width: 99.8%; }
-.ui-field-contain div.ui-slider-switch { width: 50%; }
 a.ui-slider-handle { position: absolute; z-index: 1;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
 a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
-@media all and (min-width: 480px){
+@media all and (min-width: 320px){
 	.ui-field-contain label.ui-slider { vertical-align: top;  display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
 	.ui-field-contain div.ui-slider { width: 43%; }
-	.ui-field-contain div.ui-slider-switch { width: 35%; }
+	.ui-field-contain div.ui-slider-switch { width: 5em; }
 }	
-div.ui-slider-switch { height: 32px;  overflow: hidden; margin-left: 0; }
-div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
+
+div.ui-slider-switch { height: 32px; margin-left: 0; width: 5em; }
 a.ui-slider-handle-snapping { -webkit-transition: left 70ms linear; -moz-transition: left 70ms linear; }
-div.ui-slider-labelbg { position: absolute; top:0; margin: 0; border-width: 0; }
-div.ui-slider-switch div.ui-slider-labelbg-a { width: 60%; height: 100%; left: 0; }
-div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: 0; }
-.ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b { z-index: -1; }
-.ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 0; }
+div.ui-slider-switch .ui-slider-handle {  margin-top: 1px;  }
+.ui-slider-inneroffset { margin: 0 16px; position: relative; z-index: 1; }
+
+span.ui-slider-label { position: absolute; text-align: center;  width: 100%; overflow: hidden; font-size: 16px; top: 0; line-height: 2; border-width: 0; }
+span.ui-slider-label-a { z-index: 1; left: 0; text-indent: -1.5em; }
+span.ui-slider-label-b { z-index: 0; right: 0; text-indent: 1.5em;}
+
+
+.ui-slider-inline { width: 120px; display: inline-block; }
 
-div.ui-slider-switch a.ui-slider-handle { z-index: 1;  width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; }
-span.ui-slider-label { width: 100%; position: absolute; height: 32px;  font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; }
-span.ui-slider-label-a { left: -100%;  margin-right: -1px }
-span.ui-slider-label-b { right: -100%;  margin-left: -1px }
diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
@@ -85,15 +85,13 @@ $.widget( "mobile.slider", $.mobile.widget, {
 			control.find( "option" ).each(function( i ) {
 
 				var side = !i ? "b":"a",
-					corners = !i ? "right" :"left",
 					theme = !i ? " ui-btn-down-" + trackTheme :( " " + $.mobile.activeBtnClass );
 
-				$( "<div class='ui-slider-labelbg ui-slider-labelbg-" + side + theme + " ui-btn-corner-" + corners + "'></div>" )
+				$( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-all' role='img'>" + $( this ).getEncodedText() + "</span>" )
 					.prependTo( slider );
-
-				$( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-" + corners + "' role='img'>" + $( this ).getEncodedText() + "</span>" )
-					.prependTo( handle );
 			});
+			
+			self._labels = $( ".ui-slider-label", slider );
 
 		}
 
@@ -331,15 +329,16 @@ $.widget( "mobile.slider", $.mobile.widget, {
 				title: cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText()
 			});
 
-		// add/remove classes for flip toggle switch
-		if ( cType === "select" ) {
-			if ( newval === 0 ) {
-				this.slider.addClass( "ui-slider-switch-a" )
-					.removeClass( "ui-slider-switch-b" );
-			} else {
-				this.slider.addClass( "ui-slider-switch-b" )
-					.removeClass( "ui-slider-switch-a" );
-			}
+		// drag the label widths
+		if ( this._labels ) {
+			var handlePercent = this.handle.width() / this.slider.width() * 100,
+				aPercent = percent && handlePercent + ( 100 - handlePercent ) * percent / 100,
+				bPercent = percent === 100 ? 0 : Math.min( handlePercent + 100 - aPercent, 100 );
+
+			this._labels.each(function(){
+				var ab = $(this).is( ".ui-slider-label-a" );
+				$( this ).width( ( ab ? aPercent : bPercent  ) + "%" );
+			});
 		}
 
 		if ( !preventInputUpdate ) {
