diff options
| author | jzaefferer <joern.zaefferer@gmail.com> | 2010-11-28 19:59:29 +0100 |
|---|---|---|
| committer | jzaefferer <joern.zaefferer@gmail.com> | 2010-11-28 19:59:29 +0100 |
| commit | 970befceb4b782181fdca990971334a021000afb (patch) | |
| tree | 5a7a8ffa2cd06039d81265f6990720814a1b384f /demos/spinner | |
| parent | bd3d324572811560da2cba0789b262dea5012051 (diff) | |
| download | jquery-ui-970befceb4b782181fdca990971334a021000afb.tar.gz jquery-ui-970befceb4b782181fdca990971334a021000afb.zip | |
Spinner: Add demo for time spinner
Diffstat (limited to 'demos/spinner')
| -rw-r--r-- | demos/spinner/index.html | 2 | ||||
| -rw-r--r-- | demos/spinner/time.html | 61 |
2 files changed, 62 insertions, 1 deletions
diff --git a/demos/spinner/index.html b/demos/spinner/index.html index 766f6552c..a49fa1368 100644 --- a/demos/spinner/index.html +++ b/demos/spinner/index.html @@ -12,7 +12,7 @@ <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="time.html">Time</a></li>
<li><a href="overflow.html">Overflow</a></li>
</ul>
</div>
diff --git a/demos/spinner/time.html b/demos/spinner/time.html new file mode 100644 index 000000000..2f55d0f09 --- /dev/null +++ b/demos/spinner/time.html @@ -0,0 +1,61 @@ +<!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.4.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">
+ $.widget("ui.timespinner", $.ui.spinner, {
+ _parse: function(value) {
+ if (typeof value == 'string') {
+ // TODO use Globalization to parse time
+ var parts = value.split(":");
+ return parseInt(parts[0]) * 60 + parseInt(parts[1]);
+ }
+ return value;
+ },
+ _format: function() {
+ if (!this.options.value) {
+ this.element.val( "00:00" );
+ }
+ // TODO use Globalization to format time
+ this.element.val( parseInt(this.options.value / 60) + ":" + (this.options.value % 60) );
+ }
+ })
+ $(function() {
+ $("#spinner").timespinner({
+ step: 60
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+<p>
+ <label for="spinner">Decimal spinner:</label>
+ <input id="spinner" name="spinner" value="15:30" />
+</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>
|