Spinner: Adding overflow demo

jquery · Nov 2, 2010 · fceb70d526587b78ceeaa7035ad5e9f152d79816 · fceb70d
1 parent 345592f
commit fceb70d526587b78ceeaa7035ad5e9f152d79816
Unified Split

Showing with 48 additions and 0 deletions.

+1 −0 demos/spinner/index.html

+47 −0 demos/spinner/overflow.html
diff --git a/demos/spinner/index.html b/demos/spinner/index.html
@@ -13,6 +13,7 @@ <h4>Examples</h4>
 			<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="overflow.html">Overflow</a></li>
 		</ul>
 	</div>
 </body>

diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html
@@ -0,0 +1,47 @@
+<!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.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">
+	$(function() {
+		$("#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);
+					return false;
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+	<p>
+		<label for="spinner">Select a value:</label>
+		<input id="spinner" name="value" />
+	</p>
+</div>
+
+<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>
+
+</body>
+</html>