JavaScript Tutorial/Dojo toolkit/NumberSpinner — различия между версиями
(нет различий)
|
Версия 21:52, 25 мая 2010
Содержание
- 1 Create dijit.form.NumberSpinner and set constraints
- 2 Create number spinner (dijit.form.NumberSpinner)
- 3 dijit.form.NumberSpinner: min, max, value
- 4 Number spinner: min, max and places
- 5 NumberSpinner: small delta, max length
- 6 Reset spinner
- 7 Set small delta and large delta for dijit.form.NumberSpinner
- 8 Set value for spinner
Create dijit.form.NumberSpinner and set constraints
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); dojo.addOnLoad(createProgrammatically); function createProgrammatically() { var myDijit = new dijit.form.NumberSpinner({ value : 25, constraints : { min : 20, max : 40, places : 2 } }); dojo.byId("my").appendChild(myDijit.domNode); } </script> </head> <body class="tundra">
</body>
</html></source>
Create number spinner (dijit.form.NumberSpinner)
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.form.NumberSpinner"); dojo.addOnLoad(function( ) { var ns = new dijit.form.NumberSpinner( { constraints : {min:0,max:10000}, value : 1000 }, "foo" //node id ); }); </script> </head> <body class="tundra"> <input id="foo"></input>
</body> </html></source>
dijit.form.NumberSpinner: min, max, value
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); </script> </head> <body class="tundra"> <form> <input dojoType="dijit.form.NumberSpinner" constraints="{min:0,max:10000}" value=1000> </input> </form>
</body> </html></source>
Number spinner: min, max and places
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); </script> </head> <body class="tundra"> <input dojoType="dijit.form.NumberSpinner" value="1" constraints="{min : 0, max : 10, places : 0}"> </body>
</html></source>
NumberSpinner: small delta, max length
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); </script> </head> <body class="tundra"> <input dojoType="dijit.form.NumberSpinner" value="0" smallDelta="1" constraints="{min:0,max:1550,places:0}" maxlength="20" id="integerspinner2"> </body>
</html></source>
Reset spinner
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <form>
<script type="dojo/method"> dojo.mixin(this, { reset : function( ) { this.setValue(1000); } }); </script>
</form> <button dojoType="dijit.form.Button" onClick="mySpinner.reset()">reset</button>
</body> </html></source>
Set small delta and large delta for dijit.form.NumberSpinner
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); </script> </head> <body class="tundra"> <input dojoType="dijit.form.NumberSpinner" smallDelta="2" largeDelta="4"
constraints="{min:100,max:120}" value="100">
</body> </html></source>
Set value for spinner
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.NumberSpinner"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <form>
<script type="dojo/method"> dojo.mixin(this, { reset : function( ) { this.setValue(1000); } }); </script>
</form> <button dojoType="dijit.form.Button" onClick="mySpinner.setValue(1111)">reset</button>
</body> </html></source>