Spinner demos: Cleanup.

author: Scott González <scott.gonzalez@gmail.com> 2011-08-07 12:59:50 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2011-08-07 12:59:50 -0400
commit: ca2211f74851a066829464e78f50c90b49eac2dd (patch)
tree: 6e45fc575cc50586260270202bdc170060dde716 /demos/spinner
parent: 6c84531d7ced59fc3b884aa11845c7016d4187aa (diff)
download: jquery-ui-ca2211f74851a066829464e78f50c90b49eac2dd.tar.gz
jquery-ui-ca2211f74851a066829464e78f50c90b49eac2dd.zip
7 files changed, 196 insertions, 181 deletions
diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html
index a1768ff49..18d479de8 100644
--- a/demos/spinner/currency.html
+++ b/demos/spinner/currency.html
@@ -1,35 +1,34 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>jQuery UI Spinner - Default functionality</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
+	<script src="../../external/jquery.global.js"></script>
+	<script src="../../external/jquery.global.de-DE.js"></script>
+	<script src="../../external/jquery.global.ja-JP.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#currency").change(function() {
-			var current = $("#spinner").spinner("value");
-			$.global.preferCulture($(this).val());
-			$("#spinner").spinner("value", current);
-		})
-		
-		$("#spinner").spinner({
+		$( "#currency" ).change(function() {
+			var current = $( "#spinner" ).spinner( "value" );
+			$.global.preferCulture( $(this).val() );
+			$( "#spinner" ).spinner( "value", current );
+		});
+
+		$( "#spinner" ).spinner({
 			min: 5,
 			max: 2500,
 			step: 25,
 			start: 1000,
 			numberFormat: "C"
 		});	
-		
 	});
 	</script>
 </head>
@@ -47,15 +46,16 @@
 </p>
 <p>
 	<label for="spinner">Amount to donate:</label>
-	<input id="spinner" name="spinner" value="5" />
+	<input id="spinner" name="spinner" value="5">
 </p>
-</div>
+
+</div><!-- End demo -->
+
+
 
 <div class="demo-description">
-<p>
-	Example of a donation form, with currency selection and amout spinner.
-</p>
-</div>
+<p>Example of a donation form, with currency selection and amout spinner.</p>
+</div><!-- End demo-description -->
 
 </body>
 </html>
diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html
index 0444aa104..70e0e99fd 100644
--- a/demos/spinner/decimal.html
+++ b/demos/spinner/decimal.html
@@ -1,40 +1,41 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Spinner - decimal</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<title>jQuery UI Spinner - Decimal</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
+	<script src="../../external/jquery.global.js"></script>
+	<script src="../../external/jquery.global.de-DE.js"></script>
+	<script src="../../external/jquery.global.ja-JP.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#spinner").spinner({
+		$( "#spinner" ).spinner({
 			step: 0.01,
 			numberFormat: "n"
 		});	
-		
-		$("#culture").change(function() {
-			var current = $("#spinner").spinner("value");
-			$.global.preferCulture($(this).val());
-			$("#spinner").spinner("value", current);
-		})
+
+		$( "#culture" ).change(function() {
+			var current = $( "#spinner" ).spinner( "value" );
+			$.global.preferCulture( $(this).val() );
+			$( "#spinner" ).spinner( "value", current );
+		});
 	});
 	</script>
 </head>
 <body>
 
 <div class="demo">
+
 <p>
 	<label for="spinner">Decimal spinner:</label>
-	<input id="spinner" name="spinner" value="5.06" />
+	<input id="spinner" name="spinner" value="5.06">
 </p>
 <p>
 	<label for="culture">Select a culture to use for formatting:</label>
@@ -44,16 +45,19 @@
 		<option value="ja-JP">Japanese</option>
 	</select>
 </p>
-</div>
+
+</div><!-- End demo -->
+
+
 
 <div class="demo-description">
 <p>
 	Example of a decimal spinner. Step is set to 0.01.
-	<br/>The code handling the culture change reads the current spinner value,
+	<br>The code handling the culture change reads the current spinner value,
 	then changes the culture, then sets the value again, resulting in an updated
 	formatting, based on the new culture.
 </p>
-</div>
+</div><!-- End demo-description -->
 
 </body>
 </html>
diff --git a/demos/spinner/default.html b/demos/spinner/default.html
index 53fd81bf5..c78c36d68 100644
--- a/demos/spinner/default.html
+++ b/demos/spinner/default.html
@@ -1,43 +1,38 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>jQuery UI Spinner - Default functionality</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#spinner").spinner({
-			change: function() {
-				console.log( "change" );
-			}
-		});
+		var spinner = $( "#spinner" ).spinner();
 		
-		$("#disable").toggle(function() {
-			$("#spinner").spinner("disable");
+		$( "#disable" ).toggle(function() {
+			spinner.spinner( "disable" );
 		}, function() {
-			$("#spinner").spinner("enable");
+			spinner.spinner( "enable" );
 		});
-		$("#destroy").toggle(function() {
-			$("#spinner").spinner("destroy");
+		$( "#destroy" ).toggle(function() {
+			spinner.spinner( "destroy" );
 		}, function() {
-			$("#spinner").spinner();
+			spinner.spinner();
 		});
-		$("#getvalue").click(function() {
-			alert($("#spinner").spinner("value"));
+		$( "#getvalue" ).click(function() {
+			alert( spinner.spinner( "value" ) );
 		});
-		$("#setvalue").click(function() {
-			$("#spinner").spinner("value", 5);
+		$( "#setvalue" ).click(function() {
+			spinner.spinner( "value", 5 );
 		});
-		
-		$("button").button();
+
+		$( "button" ).button();
 	});
 	</script>
 </head>
@@ -45,25 +40,27 @@
 
 <div class="demo">
 
-<p><label for="spinner">Select a value:</label>
-<input id="spinner" name="value" /></p>
+<p>
+	<label for="spinner">Select a value:</label>
+	<input id="spinner" name="value">
+</p>
 
 <p>
-<button id="disable">Toggle disable/enable</button>
-<button id="destroy">Toggle widget</button>
+	<button id="disable">Toggle disable/enable</button>
+	<button id="destroy">Toggle widget</button>
 </p>
 
 <p>
-<button id="getvalue">Get value</button>
-<button id="setvalue">Set value to 5</button>
+	<button id="getvalue">Get value</button>
+	<button id="setvalue">Set value to 5</button>
 </p>
 
 </div><!-- End demo -->
 
+
+
 <div class="demo-description">
-<p>
-Default spinner.
-</p>
+<p>Default spinner.</p>
 </div><!-- End demo-description -->
 
 </body>
diff --git a/demos/spinner/index.html b/demos/spinner/index.html
index 2bbb796f0..594fd9399 100644
--- a/demos/spinner/index.html
+++ b/demos/spinner/index.html
@@ -1,20 +1,23 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>jQuery UI Spinner Demos</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
-	<div class="demos-nav">
-		<h4>Examples</h4>
-		<ul>
-			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
-			<li><a href="decimal.html">Decimal</a></li>
-			<li><a href="currency.html">Currency</a></li>
-			<li><a href="latlong.html">Map</a></li>
-			<li><a href="time.html">Time</a></li>
-			<li><a href="overflow.html">Overflow</a></li>
-		</ul>
-	</div>
+
+<div class="demos-nav">
+	<h4>Examples</h4>
+	<ul>
+		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+		<li><a href="decimal.html">Decimal</a></li>
+		<li><a href="currency.html">Currency</a></li>
+		<li><a href="latlong.html">Map</a></li>
+		<li><a href="time.html">Time</a></li>
+		<li><a href="overflow.html">Overflow</a></li>
+	</ul>
+</div>
+
 </body>
 </html>
diff --git a/demos/spinner/latlong.html b/demos/spinner/latlong.html
index 954f83996..d1dc612b4 100644
--- a/demos/spinner/latlong.html
+++ b/demos/spinner/latlong.html
@@ -1,31 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>jQuery UI Spinner - Map</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-	<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
 		function latlong() {
-			return new google.maps.LatLng($("#lat").val(),$("#lng").val());
+			return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
 		}
 		function position() {
-			map.setCenter(latlong());
+			map.setCenter( latlong() );
 		}
-		$("#lat, #lng").spinner({
+		$( "#lat, #lng" ).spinner({
 			precision: 6,
 			change: position
 		});
-		
-		var map = new google.maps.Map($("#map")[0], {
+
+		var map = new google.maps.Map( $("#map")[0], {
 			zoom: 8,
 			center: latlong(),
 			mapTypeId: google.maps.MapTypeId.ROADMAP
@@ -33,7 +33,10 @@
 	});
 	</script>
 	<style>
-		#map { width:500px; height:500px; }
+	#map {
+		width:500px;
+		height:500px;
+	}
 	</style>
 </head>
 <body>
@@ -41,19 +44,19 @@
 <div class="demo">
 
 <label for="lat">Latitude</label>
-<input id="lat" name="lat" value="44.797916" />
-<br/>
+<input id="lat" name="lat" value="44.797916">
+<br>
 <label for="lng">Longitude</label>
-<input id="lng" name="lng" value="-93.278046" />
+<input id="lng" name="lng" value="-93.278046">
 
 <div id="map"></div>
 
 </div><!-- End demo -->
 
+
+
 <div class="demo-description">
-<p>
-Google Maps integration, using spinners to change latidude and longitude.
-</p>
+<p>Google Maps integration, using spinners to change latidude and longitude.</p>
 </div><!-- End demo-description -->
 
 </body>
diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html
index 45b8f9573..d55a48b01 100644
--- a/demos/spinner/overflow.html
+++ b/demos/spinner/overflow.html
@@ -1,25 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Spinner - Default functionality</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<title>jQuery UI Spinner - Overflow</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#spinner").spinner({
-			spin: function(event, ui) {
-				if (ui.value > 10) {
-					$(this).spinner("value", -10);
+		$( "#spinner" ).spinner({
+			spin: function( event, ui ) {
+				if ( ui.value > 10 ) {
+					$( this ).spinner( "value", -10 );
 					return false;
-				} else if (ui.value < -10) {
-					$(this).spinner("value", 10);
+				} else if ( ui.value < -10 ) {
+					$( this ).spinner( "value", 10 );
 					return false;
 				}
 			}
@@ -30,18 +30,22 @@
 <body>
 
 <div class="demo">
-	<p>
-		<label for="spinner">Select a value:</label>
-		<input id="spinner" name="value" />
-	</p>
-</div>
+
+<p>
+	<label for="spinner">Select a value:</label>
+	<input id="spinner" name="value" />
+</p>
+
+</div><!-- End demo -->
+
+
 
 <div class="demo-description">
-	<p>
-		Overflowing spinner restricted to a range of -10 to 10.
-		For anything above 10, it'll overflow to -10, and the other way round.
-	</p>
-</div>
+<p>
+Overflowing spinner restricted to a range of -10 to 10.
+For anything above 10, it'll overflow to -10, and the other way round.
+</p>
+</div><!-- End demo-description -->
 
 </body>
 </html>
diff --git a/demos/spinner/time.html b/demos/spinner/time.html
index 3ae06da46..5a3c3767e 100644
--- a/demos/spinner/time.html
+++ b/demos/spinner/time.html
@@ -1,44 +1,46 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Spinner - decimal</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.js"></script>
-	<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
-	$.widget("ui.timespinner", $.ui.spinner, {
+	<title>jQuery UI Spinner - Time</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
+	<script src="../../external/jquery.global.js"></script>
+	<script src="../../external/jquery.global.de-DE.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$.widget( "ui.timespinner", $.ui.spinner, {
 		options: {
 			// seconds
 			step: 60 * 1000,
 			// hours
 			page: 60
 		},
-		
-		_parse: function(value) {
-			if (typeof value == 'string') {
-				return +$.global.parseDate(value)
+
+		_parse: function( value ) {
+			if ( typeof value === "string" ) {
+				return +$.global.parseDate( value );
 			}
 			return value;
 		},
+
 		_format: function() {
-			this.element.val( $.global.format(new Date(this.options.value), "t") );
+			this.element.val( $.global.format( new Date(this.options.value), "t" ) );
 		}
-	})
+	});
+
 	$(function() {
-		$("#spinner").timespinner();
-		
-		$("#culture").change(function() {
-			var current = $("#spinner").timespinner("value");
-			$.global.preferCulture($(this).val());
-			$("#spinner").timespinner("value", current);
+		$( "#spinner" ).timespinner();
+
+		$( "#culture" ).change(function() {
+			var current = $( "#spinner" ).timespinner( "value" );
+			$.global.preferCulture( $(this).val() );
+			$( "#spinner" ).timespinner( "value", current );
 		});
 	});
 	</script>
@@ -48,7 +50,7 @@
 <div class="demo">
 <p>
 	<label for="spinner">Time spinner:</label>
-	<input id="spinner" name="spinner" value="08:30 PM" />
+	<input id="spinner" name="spinner" value="08:30 PM">
 </p>
 <p>
 	<label for="culture">Select a culture to use for formatting:</label>
@@ -57,7 +59,9 @@
 		<option value="de-DE">German</option>
 	</select>
 </p>
-</div>
+</div><!-- End demo -->
+
+
 
 <div class="demo-description">
 <p>
@@ -65,7 +69,7 @@
 	a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
 	spins hours.
 </p>
-</div>
+</div><!-- End demo-description -->
 
 </body>
 </html>
author	Scott González <scott.gonzalez@gmail.com>	2011-08-07 12:59:50 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2011-08-07 12:59:50 -0400
commit	ca2211f74851a066829464e78f50c90b49eac2dd (patch)
tree	6e45fc575cc50586260270202bdc170060dde716 /demos/spinner
parent	6c84531d7ced59fc3b884aa11845c7016d4187aa (diff)
download	jquery-ui-ca2211f74851a066829464e78f50c90b49eac2dd.tar.gz jquery-ui-ca2211f74851a066829464e78f50c90b49eac2dd.zip