Replaced hexadecimal demo with decimal demo. Updated that and the currency demo (previously donation) to use globalization plugin with a select for three different cultures (probably more to come). Updated spinner widget to use Globalization when available, replacing all number formatting related options with a single numberformat option.

author: jzaefferer <joern.zaefferer@gmail.com> 2010-10-23 01:51:12 +0200
committer: jzaefferer <joern.zaefferer@gmail.com> 2010-10-23 01:51:12 +0200
commit: bc3d283d2c1547ac3d8b5aeb894b2e6290e2d3c6 (patch)
tree: 743f97049592957d9d685dfdd6c9814974124b19 /demos/spinner
parent: af8ca4ed0e5063c5a84cd7ab77f525b98c6c62b7 (diff)
download: jquery-ui-bc3d283d2c1547ac3d8b5aeb894b2e6290e2d3c6.tar.gz
jquery-ui-bc3d283d2c1547ac3d8b5aeb894b2e6290e2d3c6.zip
5 files changed, 122 insertions, 113 deletions
diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html
new file mode 100644
index 000000000..418dca228
--- /dev/null
+++ b/demos/spinner/currency.html
@@ -0,0 +1,62 @@
+<!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.4.3.js"></script>
+	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
+	<script type="text/javascript" src="../../external/glob.js"></script>
+	<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
+	<script type="text/javascript" src="../../external/glob.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">
+	$(function() {
+		$("#currency").change(function() {
+			var current = $("#spinner").spinner("value");
+			console.log("before!!", current)
+			Globalization.preferCulture($(this).val());
+			$("#spinner").spinner("value", current);
+		})
+		
+		$("#spinner").spinner({
+			min: 5,
+			max: 2500,
+			step: 25,
+			start: 1000,
+			numberformat: "C"
+		});	
+		
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>
+	<label for="currency">Currency to donate</label>
+	<select id="currency" name="currency">
+		<option value="en-US">US $</option>
+		<option value="de-DE">EUR €</option>
+		<option value="ja-JP">YEN ¥</option>
+	</select>	
+</p>
+<p>
+	<label for="spinner">Amount to donate:</label>
+	<input id="spinner" name="spinner" value="5" />
+</p>
+</div>
+
+<div class="demo-description">
+<p>
+	Example of a donation form, with currency selection and amout spinner.
+</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html
new file mode 100644
index 000000000..82d0fcc20
--- /dev/null
+++ b/demos/spinner/decimal.html
@@ -0,0 +1,58 @@
+<!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.4.3.js"></script>
+	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
+	<script type="text/javascript" src="../../external/glob.js"></script>
+	<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
+	<script type="text/javascript" src="../../external/glob.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">
+	$(function() {
+		$("#spinner").spinner({
+			step: 0.01
+		});	
+		
+		$("#culture").change(function() {
+			var current = $("#spinner").spinner("value");
+			Globalization.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" />
+</p>
+<p>
+	<label for="culture">Select a culture to use for formatting:</label>
+	<select id="culture">
+		<option value="en-EN" selected="selected">English</option>
+		<option value="de-DE">German</option>
+		<option value="ja-JP">Japanese</option>
+	</select>
+</p>
+</div>
+
+<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,
+	then changes the culture, then sets the value again, resulting in an updated
+	formatting, based on the new culture.
+</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/spinner/donation.html b/demos/spinner/donation.html
deleted file mode 100644
index 617570b12..000000000
--- a/demos/spinner/donation.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!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.4.3.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.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">
-	$(function() {
-
-		var opts = {
-			's1': { currency: '$' },
-			's2': { currency: '€' },
-			's3': { currency: '¥' },
-			's4': { currency: '$', groupSeparator: ' ', radixPoint: '.' },
-			's5': { currency: 'Fr ', groupSeparator: "'", radixPoint: '.' },
-			's6': { currency: 'RUB', groupSeparator: ".", radixPoint: ',' }
-		};
-		
-		var currency = $("#currency").change(function() {
-			var val = $(this).val();
-			$("#amount")
-				.spinner("option", "currency", opts[val].currency)
-				.spinner("option", "groupSeparator", opts[val].groupSeparator ? opts[val].groupSeparator : ',')
-				.spinner("option", "radixPoint", opts[val].radixPoint ? opts[val].radixPoint : '.')
-				.blur();
-		});
-		$("#amount").spinner({
-			currency: opts[currency.val()].currency,
-			min: 5,
-			max: 2500,
-			step: 25,
-			start: 1000,
-			width: '10em'
-		});	
-		
-	});
-	</script>
-</head>
-<body>
-
-<div class="demo">
-
-<p>
-	<label for="currency">Currency</label>
-	<select id="currency" name="currency">
-		<option value="s1">US $</option>
-		<option value="s2">EUR €</option>
-		<option value="s3">YEN ¥</option>
-		<option value="s4">Australian $</option>
-		<option value="s5">Swiss Franc Fr</option>
-		<option value="s6">Russian Ruble RUB</option>
-	</select>	
-</p>
-<p>
-	<label for="amount">Select the amount to donate:</label>
-	<input id="amount" name="amount" value="5" />
-</p>
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-Example of a donation form, with currency selection and amout spinner.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
diff --git a/demos/spinner/hexadecimal.html b/demos/spinner/hexadecimal.html
deleted file mode 100644
index 03952a62d..000000000
--- a/demos/spinner/hexadecimal.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<title>jQuery UI Spinner - Hexadecimal</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
-	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.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">
-	$(function() {
-		$("#hexadecimal").spinner({radix: 16, padLength: 6, precision: 2, step: '0.01'});	
-	});
-	</script>
-</head>
-<body>
-
-<div class="demo">
-
-<p>
-	<label for="hexadecimal">Hexadecimal spinner:</label>
-	<input id="hexadecimal" name="hexadecimal" value="0" />
-</p>
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-Example of a hexadecimal spinner.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
diff --git a/demos/spinner/index.html b/demos/spinner/index.html
index 6d7b980bd..68716ac99 100644
--- a/demos/spinner/index.html
+++ b/demos/spinner/index.html
@@ -9,8 +9,8 @@
 		<h4>Examples</h4>
 		<ul>
 			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
-			<li><a href="donation.html">Donation</a></li>
-			<li><a href="hexadecimal.html">Hexadecimal</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="mousewheel-disabled.html">Mousewheel Disabled</a></li>
 			<li><a href="rtl.html">RTL</a></li>
author	jzaefferer <joern.zaefferer@gmail.com>	2010-10-23 01:51:12 +0200
committer	jzaefferer <joern.zaefferer@gmail.com>	2010-10-23 01:51:12 +0200
commit	bc3d283d2c1547ac3d8b5aeb894b2e6290e2d3c6 (patch)
tree	743f97049592957d9d685dfdd6c9814974124b19 /demos/spinner
parent	af8ca4ed0e5063c5a84cd7ab77f525b98c6c62b7 (diff)
download	jquery-ui-bc3d283d2c1547ac3d8b5aeb894b2e6290e2d3c6.tar.gz jquery-ui-bc3d283d2c1547ac3d8b5aeb894b2e6290e2d3c6.zip