diff options
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/spinner/currency.html | 62 | ||||
| -rw-r--r-- | demos/spinner/decimal.html | 58 | ||||
| -rw-r--r-- | demos/spinner/donation.html | 74 | ||||
| -rw-r--r-- | demos/spinner/hexadecimal.html | 37 | ||||
| -rw-r--r-- | demos/spinner/index.html | 4 |
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>
|