- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
NumberSpinner
Submitted by haysmark on Tue, 05/29/2007 - 00:01.
The Number Spinner, a familiar widget in GUI interfaces, makes integer entry easier when small adjustments are required. The down and up arrow buttons "spin" the number up and down. Furthermore, when you hold down the buttons, the spinning accelerates to make coarser adjustments easier.
Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number Spinner Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.NumberSpinner");
</script>
</head>
<body class="tundra">
<input dojoType="dijit.form.NumberSpinner"
value="1000"
smallDelta="10"
constraints="{min:9,max:1550,places:0}"
maxlength="20"
id="integerspinner2">
</body></html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number Spinner Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.NumberSpinner");
</script>
</head>
<body class="tundra">
<input dojoType="dijit.form.NumberSpinner"
value="1000"
smallDelta="10"
constraints="{min:9,max:1550,places:0}"
maxlength="20"
id="integerspinner2">
</body></html>
dijit.form.NumberSpinner
Number Spinner
|
||
Attributes
|
||
constraints | Object {} |
min and max properties are used for bounds. See ValidationTextBox for details. |
defaultTimeout | Integer 500 |
number of milliseconds before a held key or button becomes typematic |
invalidMessage | String locale dep. |
The message to display if value is invalid. constraints: Object user-defined object needed to pass parameters to the validator functions |
intermediateChanges | Boolean | If true, trigger an onChange event every time setValue is called. If false, trigger onChange only when asked by the callee. For example, on Slider a true value would fire onChange events at each point of the mouse drag. False would trigger onChange only on mouseUp. |
largeDelta | Number 10 |
adjust the value by this much when spinning using the PgUp/Dn keys |
promptMessage | String |
Hint string |
rangeMessage | String |
The message to display if value is out-of-range |
required | Boolean true |
Defaults to true in NumberSpinner because the arrows won't work otherwise. |
smallDelta | Number 1 |
adjust the value by this much when spinning using the arrow keys/buttons |
timeoutChangeRate | Number 0.90 |
fraction of time used to change the typematic timer between events 1.0 means that each typematic event fires at defaultTimeout intervals < 1.0 means that each typematic event fires at an increasing faster rate |
trim | Boolean false |
Removes leading and trailing whitespace if true. Default is false. |
Accessibility (added for 1.1 but true for 1.0 as well)
Keyboard
Action | Key |
---|---|
Interact with the number spinner | The textbox for the number spinner is in the tab order of the page. Press tab key to set focus into the number spinner textbox. |
Increase the number spinner value by single increment | With focus in the number spinner textbox press the up arrow |
Decrease number spinner value by single increment | With focus in the number spinner textbox press the down arrow |
In the future pageup, pagedown, home and end may be implemented. |
- Printer-friendly version
- Login or register to post comments
- Subscribe post