http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FDojo_toolkit%2FSlider
JavaScript Tutorial/Dojo toolkit/Slider - История изменений
2026-04-04T20:01:40Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Slider&diff=8543&oldid=prev
Admin: 1 версия
2010-05-26T08:24:23Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Slider&diff=8542&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Create vertical slider and set value, minimum, maximum and discreteValues==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css"<br />
href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojo.parser");<br />
dojo.require("dijit.form.Slider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.VerticalSlider"<br />
value="3"<br />
minimum="1"<br />
maximum="6"<br />
discreteValues="6"<br />
showButtons="true"><br />
<div dojoType="dijit.form.VerticalRuleLabels"<br />
container="topDecoration"<br />
labels="1,2,3,4,5,6"<br />
style="height:50.2em;"></div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Format slider value==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
<br />
dojo.require("dijit.form.HorizontalSlider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"<br />
value="100"<br />
maximum="175"<br />
minimum="2"<br />
showButtons="false"<br />
style="margin: 5px;width:300px; height: 20px;"><br />
<script type="dojo/method" event="onChange" args="newValue"><br />
alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));<br />
</script><br />
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"<br />
style="height:10px;font-size:75%;color:gray;" count="6">asdf<br />
</ol><br />
<div dojoType="dijit.form.HorizontalRule" container="topDecoration"<br />
count=6 style="height:5px;">as<br />
</div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Horizontal slider bar==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css"<br />
href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojo.parser");<br />
dojo.require("dijit.form.Slider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider"<br />
value="3"<br />
minimum="1"<br />
maximum="6"<br />
discreteValues="6"<br />
showButtons="true"><br />
<div dojoType="dijit.form.HorizontalRuleLabels"<br />
container="topDecoration"<br />
labels="1,2,3,4,5,6"<br />
style="height:1.2em;"></div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Max/min slider value==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
<br />
dojo.require("dijit.form.HorizontalSlider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"<br />
value="100"<br />
maximum="175"<br />
minimum="2"<br />
style="margin: 5px;width:300px; height: 20px;"><br />
<script type="dojo/method" event="onChange" args="newValue"><br />
alert(newValue);<br />
</script><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Set intermediateChanges for Slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css"<br />
href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojo.parser");<br />
dojo.require("dijit.form.Slider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider"<br />
value="5" <br />
minimum="-10" <br />
maximum="10" <br />
discreteValues="11"<br />
intermediateChanges="true"<br />
onChange="alert(arguments[0]);"<br />
handleSrc="preciseSliderThumb.png"<br />
></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Set slide handle image==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css"<br />
href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojo.parser");<br />
dojo.require("dijit.form.Slider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider"<br />
value="5" <br />
minimum="-10" <br />
maximum="10" <br />
discreteValues="11"<br />
intermediateChanges="true"<br />
onChange="alert(arguments[0]);"<br />
handleSrc="preciseSliderThumb.png"<br />
></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Simple slider==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojox.fx._base");<br />
function testIt() {<br />
dojox.fx.slideBy({<br />
node : "my",<br />
duration : 1000, top : 100, left: 100<br />
}).play();<br />
}<br />
</script><br />
</head><br />
<body onload=testIt()><br />
<div id="my">Your text here.</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Slide back to original spot==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css"<br />
href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojo.fx");<br />
dojo.require("dojo.dnd.move");<br />
dojo.addOnLoad(function( ){<br />
var move = new dojo.dnd.Moveable(dojo.byId("my"));<br />
var coords;<br />
dojo.subscribe("/dnd/move/start",function(e){<br />
coords = dojo.coords(e.node);<br />
});<br />
dojo.subscribe("/dnd/move/stop",function(e){<br />
dojo.fx.slideTo({<br />
node: e.node,<br />
top: coords.t,<br />
left: coords.l,<br />
duration:2000<br />
}).play( );<br />
});<br />
});<br />
</script><br />
</head><br />
<body class="tundra"><br />
<p style="position : absolute; left : 300px; top : 300px;"<br />
id="my"<br />
>Drag and drop me somewhere else</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Slide in animation==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/"<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
dojo.require("dojo.fx");<br />
var toggler = null;<br />
function fxTest() {<br />
toggler = new dojo.fx.Toggler({<br />
node : "myDiv",<br />
hideFunc : dojo.fx.wipeOut<br />
});<br />
toggler.hide();<br />
}<br />
</script><br />
</head><br />
<body onLoad="fxTest();"><br />
<div id="myDiv" style="background-color:#ff0000;width:40px;top:5px;left:5px;position:absolute;"><br />
Hello</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Slider on change dojo event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
<br />
dojo.require("dijit.form.HorizontalSlider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"<br />
value="100"<br />
maximum="175"<br />
minimum="2"<br />
style="margin: 5px;width:300px; height: 20px;"><br />
<script type="dojo/method" event="onChange" args="newValue"><br />
alert(newValue);<br />
</script><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Slider on change event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"><br />
<script type="text/javascript"><br />
var djConfig = {<br />
baseScriptUri : "js/dojo/",<br />
parseOnLoad : true<br />
};<br />
</script><br />
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script><br />
<script><br />
<br />
dojo.require("dijit.form.HorizontalSlider");<br />
</script><br />
</head><br />
<body class="tundra"><br />
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"<br />
value="100"<br />
maximum="175"<br />
minimum="2"<br />
showButtons="false"<br />
style="margin: 5px;width:300px; height: 20px;"><br />
<script type="dojo/method" event="onChange" args="newValue"><br />
alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));<br />
</script><br />
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"<br />
style="height:10px;font-size:75%;color:gray;" count="6">asdf<br />
</ol><br />
<div dojoType="dijit.form.HorizontalRule" container="topDecoration"<br />
count=6 style="height:5px;">as<br />
</div><br />
</div><br />
</body><br />
</html></source></div>