Rangeslider: Fixed problem with associating labels allowed use of two…

… labels, fixed problems with field contains.
jquery-archive · Dec 7, 2012 · 459fbfc · 459fbfc
1 parent 134ffad
commit 459fbfc
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 42 deletions.
diff --git a/css/structure/jquery.mobile.forms.rangeslider.css b/css/structure/jquery.mobile.forms.rangeslider.css
@@ -14,10 +14,10 @@
 	margin:0;
 }
 .ui-rangeslider label.ui-slider{
-	font-weight: bold;
+
 	color: #222 /*{c-bup-color}*/;
 	text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #fff /*{c-bup-shadow-color}*/;
-	display:inline-block;
+
 	margin-right:3px;
 }
 .ui-rangeslider-sliders{
@@ -32,9 +32,25 @@
 	margin-left:20px;
 }
 
+.ui-rangeslider .ui-rangeslider-sliders .ui-slider{
+	width:86%;
+	margin-left:20px;
+	top:.7em;
+}
+
 /*full width style*/
 .ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders{
 	width:100%;
+	clear:both;
+	overflow: visible;
+}
+.ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders .ui-slider{
+	width:100%;
+	margin-left:0;
+}
+.ui-rangeslider.ui-rangeslider-full label.ui-slider{
+	float:left;
+	margin-top:1em;
 }
 
 /*mini styles*/
@@ -52,14 +68,31 @@
 	font-weight:normal;
 	margin: 0 2% 0 0;
 	display:inline-block;
+	float:left;
 }
 .ui-field-contain .ui-rangeslider span.ui-rangeslider-dash{
 	margin-top:.5em;
+	float:left;
 }
 .ui-field-contain .ui-rangeslider .ui-rangeslider-sliders{
 	margin-top:0;
+	width:auto;
+	margin-left:22%;
+}
+.ui-field-contain .ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider{
+	margin-left:20px;
+}
+.ui-field-contain .ui-rangeslider input.ui-slider-input,
+.ui-field-contain .ui-rangeslider span.ui-rangeslider-dash{
+	float:left;
+}
+.ui-field-contain .ui-rangeslider{
+	padding-right:0px;
 }
 /*split styles*/
+.ui-rangeslider.ui-rangeslider-split{
+	padding-right:0px;
+}
 .ui-rangeslider.ui-rangeslider-split .ui-rangeslider-dash{
 	display:none;
 }
@@ -68,7 +101,6 @@
 	float:none;
 	margin-top:0;
 }
-.ui-rangeslider label.ui-slider,
 .ui-rangeslider span.ui-rangeslider-dash{
 	float:left;
 	margin-top:1em;
@@ -86,26 +118,46 @@
 	width: auto;
 	display:block;
 }
+
 .ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders{
 	margin-top:.7em;
+	clear:none;
 }
-.ui-rangeslider .ui-rangeslider-sliders .ui-slider{
-	width:86%;
-	margin-left:20px;
-	top:.7em;
-}
+
 .ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider{
 	margin-left:7%;
+	width:86%;
+	top:.7em;
 }
 .ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders{
 	width:auto;
+	margin-left:0;
+	overflow:hidden;
+}
+.ui-field-contain .ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders {
+	margin-top: -2.2em;
+	width:70%;
+	float:right;
+}
+.ui-field-contain .ui-rangeslider.ui-rangeslider-split.ui-mini .ui-rangeslider-sliders .ui-slider{
+	margin-left:20px;
 }
-
 @media (max-width: 28em) {
-	.ui-rangeslider div.ui-rangeslider-sliders,
-	.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full div.ui-rangeslider-sliders{
+	.ui-rangeslider .ui-rangeslider-sliders .ui-slider{
 		width:100%;
-		margin:0 0 0 15px;
+		margin-left:0;
+	}
+	.ui-rangeslider div.ui-rangeslider-sliders,
+	.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full div.ui-rangeslider-sliders,
+	.ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders {
+		width: 98%;
+		margin: 0;
+		margin-bottom: 10px;
+		margin-left: 1%;
+		overflow: visible;
+	}
+	.ui-rangeslider{
+		padding-right:0;
 	}
 	.ui-rangeslider label.ui-slider,
 	.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full label.ui-slider,
@@ -127,13 +179,19 @@
 	}
 	.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders,
 	.ui-rangeslider .ui-rangeslider-sliders{
-		width:100%;
+		width:98%;
 		margin-top:0;
+		margin-left:1%;
 		overflow:visible;
 		height:1.4em;
 	}
 	.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider{
-		width:100%;
-		margin-left:0;
+		width:98%%;
+		margin-left:1%;
+	}
+	.ui-field-contain .ui-rangeslider div.ui-rangeslider-sliders{
+		width: 92%;
+		margin-left: 4%;
+		display: inline-block;
 	}
 }
diff --git a/css/structure/jquery.mobile.structure.css b/css/structure/jquery.mobile.structure.css
@@ -21,7 +21,7 @@
 @import url( "jquery.mobile.forms.fieldcontain.css" );
 @import url( "jquery.mobile.forms.select.css" );
 @import url( "jquery.mobile.forms.textinput.css" );
-@import url( "jquery.mobile.forms.range.css" );
+@import url( "jquery.mobile.forms.rangeslider.css" );
 @import url( "jquery.mobile.listview.css" );
 @import url( "jquery.mobile.forms.slider.css" );
 @import url( "jquery.mobile.table.css" );

diff --git a/docs/_assets/css/jqm-docs.css b/docs/_assets/css/jqm-docs.css
@@ -462,19 +462,8 @@ ul.bullet li { list-style:square; padding:.4em 0; margin-left:1.2em; border-bott
 /* range slider examples */
 @media (max-width: 750px){
 
-  .content-primary .ui-field-contain .ui-range div.ui-range-sliders{
-    width:100%;
-    position:relative;
-    top:1em;
-    margin-bottom:1em;
-  }
-  .content-primary .ui-field-contain .ui-range.ui-mini div.ui-range-sliders{
-    top:-.3em;
-    margin-bottom:0;
-  }
-  .content-primary .ui-range div.ui-sliders{
-    width:65%;
-    margin-left:30%;
+  .ui-field-contain .ui-rangeslider .ui-rangeslider-sliders{
+  	width:70%;
   }
 }
 
diff --git a/docs/forms/forms-all-mini.html b/docs/forms/forms-all-mini.html
@@ -59,9 +59,10 @@ <h2>Mini form elements</h2>
 			 	<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
 			</div>
 			<div data-role="fieldcontain">
-				<div data-role="range" data-highlight="true" data-mini="true" >
-					<label for="range">Range:</label>
+				<div data-role="rangeslider" data-highlight="true" data-mini="true">
+					<label for="range_min">Range:</label>
 					<input type="range" name="range_min" id="range_min" value="0" min="0" max="100"/>
+					<label for="range_max">Range:</label>
 					<input type="range" name="range_max" id="range_max" value="100" min="0" max="100"/>
 				</div>
 			</div>

diff --git a/docs/forms/forms-all-native.html b/docs/forms/forms-all-native.html
@@ -63,8 +63,9 @@ <h2>Native form elements &amp; buttons</h2>
 
 			<div data-role="fieldcontain">
 				<div data-role="none" data-highlight="true">
-					<label for="range">Range:</label>
+					<label for="range_min">Range:</label>
 					<input type="range" name="range_min" id="range_min" value="0" min="0" max="100" data-role="none"/>
+					<label for="range_max">Range max:</label>
 					<input type="range" name="range_max" id="range_max" value="100" min="0" max="100" data-role="none"/>
 				</div>
 			</div>

diff --git a/docs/forms/forms-all.html b/docs/forms/forms-all.html
@@ -61,9 +61,10 @@ <h2>Form elements</h2>
 			 	<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true"  />
 			</div>
 			<div data-role="fieldcontain">
-				<div data-role="range" data-highlight="true">
-					<label for="range">Range:</label>
+				<div data-role="rangeslider" data-highlight="true">
+					<label for="range_min">Range:</label>
 					<input type="range" name="range_min" id="range_min" value="0" min="0" max="100"/>
+					<label for="range_max">Range:</label>
 					<input type="range" name="range_max" id="range_max" value="100" min="0" max="100"/>
 				</div>
 			</div>

diff --git a/js/widgets/forms/rangeslider.js b/js/widgets/forms/rangeslider.js
@@ -21,25 +21,27 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
 		},
 
 		_create: function() {
-			var inputFirst, sliders, inputLast, sliderFirst, sliderLast, sliderLastWidth, sliderFirstWidth, label,
+			var inputFirst, sliders, inputLast, sliderFirst, sliderLast, sliderLastWidth, sliderFirstWidth, label, secondLabel
 			$el = this.element;
 
 			inputFirst = $el.find( "input:first" );
 			inputLast = $el.find( "input:last" );
 			inputFirst.addClass( "ui-rangeslider-first" );
 			inputLast.addClass( "ui-rangeslider-last" );
-			label = $el.find( "label" );
-			sliderFirst = $el.find( ".ui-slider:first" ).addClass( "ui-slider-first" );
-			sliderLast = $el.find( ".ui-slider:last" ).addClass( "ui-slider-last" );
+			label = $el.find( "label:first" );
+			if($el.find( "label" ).length > 1 ) {
+				secondLabel = $el.find( "label:last" ).hide();
+			}
+
+
 
 			$el.append( "<div class=\"ui-rangeslider-sliders\" />" );
 			$el.addClass( "ui-rangeslider" );
 
 			sliders = $el.find( ".ui-rangeslider-sliders" );
-			sliderFirst.appendTo( sliders );
-			inputFirst.after( "<span class=\"ui-rangeslider-dash\">&nbsp;-&nbsp;</span>" );
-			sliderLast.appendTo( sliders );
-			label.addClass( "ui-slider" );
+
+			sliderFirst = $el.find( "div.ui-slider:first" ).addClass( "ui-slider-first" );
+			sliderLast = $el.find( "div.ui-slider:last" ).addClass( "ui-slider-last" );
 
 			$.extend( this, {
 				inputFirst: inputFirst,
@@ -54,6 +56,15 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
 			});
 
 			this.refresh();
+
+
+
+
+
+			sliderFirst.appendTo( sliders );
+			inputFirst.after( "<span class=\"ui-rangeslider-dash\">&nbsp;-&nbsp;</span>" );
+			sliderLast.appendTo( sliders );
+			label.prependTo($el);
 			this._bindResize();
 			this._bindChangeEvents();
 			this._bindToggle();