JavaScript Tutorial/Dojo toolkit/Slider
Содержание
- 1 Create vertical slider and set value, minimum, maximum and discreteValues
- 2 Format slider value
- 3 Horizontal slider bar
- 4 Max/min slider value
- 5 Set intermediateChanges for Slider
- 6 Set slide handle image
- 7 Simple slider
- 8 Slide back to original spot
- 9 Slide in animation
- 10 Slider on change dojo event
- 11 Slider on change event
Create vertical slider and set value, minimum, maximum and discreteValues
<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.Slider"); </script> </head> <body class="tundra">
</body>
</html></source>
Format slider 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("dijit.form.HorizontalSlider"); </script> </head> <body class="tundra">
<script type="dojo/method" event="onChange" args="newValue"> alert(dojo.number.format(newValue,{places:1,pattern:"#mg"})); </script>
- asdf
as
</body> </html></source>
Horizontal slider bar
<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.Slider"); </script> </head> <body class="tundra">
</body>
</html></source>
Max/min slider 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("dijit.form.HorizontalSlider"); </script> </head> <body class="tundra">
<script type="dojo/method" event="onChange" args="newValue"> alert(newValue); </script>
</body> </html></source>
Set intermediateChanges for Slider
<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.Slider"); </script> </head> <body class="tundra">
</body>
</html></source>
Set slide handle image
<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.Slider"); </script> </head> <body class="tundra">
</body>
</html></source>
Simple slider
<source lang="javascript">
<html>
<head> <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("dojox.fx._base"); function testIt() { dojox.fx.slideBy({ node : "my", duration : 1000, top : 100, left: 100 }).play(); } </script> </head> <body onload=testIt()>
Your text here.
</body>
</html></source>
Slide back to original spot
<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.fx"); dojo.require("dojo.dnd.move"); dojo.addOnLoad(function( ){ var move = new dojo.dnd.Moveable(dojo.byId("my")); var coords; dojo.subscribe("/dnd/move/start",function(e){ coords = dojo.coords(e.node); }); dojo.subscribe("/dnd/move/stop",function(e){ dojo.fx.slideTo({ node: e.node, top: coords.t, left: coords.l, duration:2000 }).play( ); }); }); </script> </head> <body class="tundra">
Drag and drop me somewhere else
</body> </html></source>
Slide in animation
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/" }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.fx"); var toggler = null; function fxTest() { toggler = new dojo.fx.Toggler({ node : "myDiv", hideFunc : dojo.fx.wipeOut }); toggler.hide(); } </script> </head> <body onLoad="fxTest();">
Hello
</body>
</html></source>
Slider on change dojo event
<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.HorizontalSlider"); </script> </head> <body class="tundra">
<script type="dojo/method" event="onChange" args="newValue"> alert(newValue); </script>
</body> </html></source>
Slider on change event
<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.HorizontalSlider"); </script> </head> <body class="tundra">
<script type="dojo/method" event="onChange" args="newValue"> alert(dojo.number.format(newValue,{places:1,pattern:"#mg"})); </script>
- asdf
as
</body> </html></source>