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
<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">
<div dojoType="dijit.form.VerticalSlider"
value="3"
minimum="1"
maximum="6"
discreteValues="6"
showButtons="true">
<div dojoType="dijit.form.VerticalRuleLabels"
container="topDecoration"
labels="1,2,3,4,5,6"
style="height:50.2em;"></div>
</div>
</body>
</html>
Format slider value
<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">
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"
value="100"
maximum="175"
minimum="2"
showButtons="false"
style="margin: 5px;width:300px; height: 20px;">
<script type="dojo/method" event="onChange" args="newValue">
alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));
</script>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:10px;font-size:75%;color:gray;" count="6">asdf
</ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration"
count=6 style="height:5px;">as
</div>
</div>
</body>
</html>
Horizontal slider bar
<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">
<div dojoType="dijit.form.HorizontalSlider"
value="3"
minimum="1"
maximum="6"
discreteValues="6"
showButtons="true">
<div dojoType="dijit.form.HorizontalRuleLabels"
container="topDecoration"
labels="1,2,3,4,5,6"
style="height:1.2em;"></div>
</div>
</body>
</html>
Max/min slider value
<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">
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"
value="100"
maximum="175"
minimum="2"
style="margin: 5px;width:300px; height: 20px;">
<script type="dojo/method" event="onChange" args="newValue">
alert(newValue);
</script>
</div>
</body>
</html>
Set intermediateChanges for Slider
<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">
<div dojoType="dijit.form.HorizontalSlider"
value="5"
minimum="-10"
maximum="10"
discreteValues="11"
intermediateChanges="true"
onChange="alert(arguments[0]);"
handleSrc="preciseSliderThumb.png"
></div>
</body>
</html>
Set slide handle image
<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">
<div dojoType="dijit.form.HorizontalSlider"
value="5"
minimum="-10"
maximum="10"
discreteValues="11"
intermediateChanges="true"
onChange="alert(arguments[0]);"
handleSrc="preciseSliderThumb.png"
></div>
</body>
</html>
Simple slider
<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()>
<div id="my">Your text here.</div>
</body>
</html>
Slide back to original spot
<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">
<p style="position : absolute; left : 300px; top : 300px;"
id="my"
>Drag and drop me somewhere else</p>
</body>
</html>
Slide in animation
<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();">
<div id="myDiv" style="background-color:#ff0000;width:40px;top:5px;left:5px;position:absolute;">
Hello</div>
</body>
</html>
Slider on change dojo event
<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">
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"
value="100"
maximum="175"
minimum="2"
style="margin: 5px;width:300px; height: 20px;">
<script type="dojo/method" event="onChange" args="newValue">
alert(newValue);
</script>
</div>
</body>
</html>
Slider on change event
<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">
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"
value="100"
maximum="175"
minimum="2"
showButtons="false"
style="margin: 5px;width:300px; height: 20px;">
<script type="dojo/method" event="onChange" args="newValue">
alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));
</script>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
style="height:10px;font-size:75%;color:gray;" count="6">asdf
</ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration"
count=6 style="height:5px;">as
</div>
</div>
</body>
</html>