JavaScript Tutorial/Dojo toolkit/NumberSpinner
Содержание
- 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>
