]> source.dussan.org Git - jquery-ui.git/commitdiff
Spinner: Add demo for time spinner
authorjzaefferer <joern.zaefferer@gmail.com>
Sun, 28 Nov 2010 18:59:29 +0000 (19:59 +0100)
committerjzaefferer <joern.zaefferer@gmail.com>
Sun, 28 Nov 2010 18:59:29 +0000 (19:59 +0100)
demos/spinner/index.html
demos/spinner/time.html [new file with mode: 0644]

index 766f6552c82b72e710f4dd04e9d55183050f3609..a49fa13685fbb2c0a95461be715640519f83f225 100644 (file)
@@ -12,7 +12,7 @@
                        <li><a href="decimal.html">Decimal</a></li>\r
                        <li><a href="currency.html">Currency</a></li>\r
                        <li><a href="latlong.html">Map</a></li>\r
-                       <li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>\r
+                       <li><a href="time.html">Time</a></li>\r
                        <li><a href="overflow.html">Overflow</a></li>\r
                </ul>\r
        </div>\r
diff --git a/demos/spinner/time.html b/demos/spinner/time.html
new file mode 100644 (file)
index 0000000..2f55d0f
--- /dev/null
@@ -0,0 +1,61 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <meta charset="utf-8">\r
+       <title>jQuery UI Spinner - decimal</title>\r
+       <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="../../jquery-1.4.3.js"></script>\r
+       <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>\r
+       <script type="text/javascript" src="../../external/glob.js"></script>\r
+       <script type="text/javascript" src="../../external/glob.de-DE.js"></script>\r
+       <script type="text/javascript" src="../../external/glob.ja-JP.js"></script>\r
+       <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>\r
+       <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>\r
+       <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>\r
+       <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+       <script type="text/javascript">\r
+       $.widget("ui.timespinner", $.ui.spinner, {\r
+               _parse: function(value) {\r
+                       if (typeof value == 'string') {\r
+                               // TODO use Globalization to parse time\r
+                               var parts = value.split(":");\r
+                               return parseInt(parts[0]) * 60 + parseInt(parts[1]);\r
+                       }\r
+                       return value;\r
+               },\r
+               _format: function() {\r
+                       if (!this.options.value) {\r
+                               this.element.val( "00:00" );\r
+                       }\r
+                       // TODO use Globalization to format time\r
+                       this.element.val( parseInt(this.options.value / 60) + ":" + (this.options.value % 60) );\r
+               }\r
+       })\r
+       $(function() {\r
+               $("#spinner").timespinner({\r
+                       step: 60\r
+               });\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div class="demo">\r
+<p>\r
+       <label for="spinner">Decimal spinner:</label>\r
+       <input id="spinner" name="spinner" value="15:30" />\r
+</p>\r
+</div>\r
+\r
+<div class="demo-description">\r
+<p>\r
+       Example of a decimal spinner. Step is set to 0.01.\r
+       <br/>The code handling the culture change reads the current spinner value,\r
+       then changes the culture, then sets the value again, resulting in an updated\r
+       formatting, based on the new culture.\r
+</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r