Login Register

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>
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

ActionKey
Interact with the number spinnerThe 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 incrementWith focus in the number spinner textbox press the up arrow
Decrease number spinner value by single incrementWith focus in the number spinner textbox press the down arrow
In the future pageup, pagedown, home and end may be implemented.
‹ InlineEditBox (0.9)upSlider ›

ready-to-use examples with constraints control, & styling

Submitted by robertlan on Sun, 03/01/2009 - 18:53.

updated: 2009-3-1

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number Spinner Demo</title>
<style type="text/css">
 @import "dojo12320090223/dijit/themes/tundra/tundra.css";
 @import "dojo12320090223/dojo/resources/dojo.css";
</style>
<script language="javascript" type="text/javascript" src="dojo12320090223/dojo/dojo.js" djConfig="isDebug: true,parseOnLoad: true"></script>

<script type="text/javascript">
 dojo.require("dojo.parser");
 dojo.require("dijit.form.NumberSpinner");
</script>
</head>
<body class="tundra">
<!--
///// ready-to-use examples with constraints control, & styling ////
-just change dojo url, then all would come.

 - max can be defined by scripting, then
  - when input, if out of range, would
   - warn and,
   - auto-correct input after a time out as can be set.
 - this maybe more user-friendly
 - this example also shows: how to style it!
 - test working on FF/IE/Opera/Safari
 
 - dive into these scripts would help you understand
  - dojo core (fantastic!)
  - javasript oop (fantastic, though hard) (fortunately dojo keep it simple! :-) )
 -->

  <!--example 1 - via markup -->
  <input dojoType="dijit.form.NumberSpinner"
    onclick="testFunc();"
    onkeyup="testFunc();"
    value="1"
    smallDelta="1"
    intermediatechanges="true"
    constraints= "{ min:1, max:5, places:0 }"
    maxlength="1"
    style="width:55px;font-size:1.2em"
    id="example_markUp"
  />
  <!--example 2 - via scripting-->
  <input id="example_fullScript" style="width:65px;font-size:0.8em" />
</body>
<script type="text/javascript">
////all below are playing scripts on example 2 <input> tag up.
var mySpinner2=new dijit.form.NumberSpinner({
  value: 3,
  maxlength:"1",
  smallDelta: 1,
  constraints: { min:1, places:0 },
  intermediatechanges:true,
  style: "width:55px;font-size:1.8em"
}, 'example_fullScript');

//dynamically setup max for validation
////I did not find out how to define constraints via regExp or regExpGen////
//method 1: add to this instance only ( this setMax not deserving to be in Dojo? :-( :-) )
  //method 1a: pass an object as value of constraints of this instance only
        mySpinner2.constraints={min:2,max:5,places:0};
  //method 1b: directly, simpliest!
        //mySpinner2.constraints.max=5;
  //method 1c: add a method
        /*
        mySpinner2.setMax=function(maxValue){
                mySpinner2.constraints.max=maxValue;
        }
        mySpinner2.setMax(5);
        */
//method 2: add to protoType, then all numberSpinner instances would have a setmax(maxValue) method.
//This setMax not deserving to be in Dojo? :-( :-)
  /*
  mySpinner2.constructor.prototype.setMax=function(maxValue){
          this.constraints.max=maxValue;
  }
                  //now has method: setmax(maxValue)
                  console.dir (mySpinner2);
  //let's setMax!
  mySpinner2.setMax(5);
  */
//important: this testFunc should be put before dojo.connect!!
var testFunc=function(){
  //a trick to confine max value immediately upon click/keyup
  //getDisplayedValue/setDisplayedValue would be deprecated in dojo 2.0;
  if (mySpinner2.attr('displayedValue') > mySpinner2.constraints.max){
          //mySpinner2.setDisplayedValue(maxValue);//would be deprecated
          setTimeout("mySpinner2.attr('displayedValue',mySpinner2.constraints.max)",1500);
          console.debug('over limit');
  }
};
dojo.connect(mySpinner2,"onKeyUp",testFunc);
dojo.connect(mySpinner2,"onClick",testFunc);

</script>