User:Annelies/Rollmenu
From 2009.igem.org
< User:Annelies(Difference between revisions)
(dojo color picture) |
m (User:AnneliesvanKeulen/Rollmenu moved to User:Annelies/Rollmenu: Correct username) |
||
(4 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | <html> | |
- | <html | + | <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css"> |
- | + | <select dojoType="dijit.form.ComboBox" id="easingSelector"> | |
- | + | <option> | |
- | + | linear | |
- | < | + | </option> |
- | + | <option> | |
- | + | quadIn | |
- | + | </option> | |
- | + | <option> | |
- | + | quadOut | |
- | + | </option> | |
- | + | <option> | |
- | + | quadInOut | |
- | + | </option> | |
- | + | <option> | |
- | <button dojoType="dijit.form.Button" | + | cubicIn |
- | + | </option> | |
- | + | <option> | |
- | </ | + | cubicOut |
- | <div id=" | + | </option> |
- | + | <option> | |
+ | cubicInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | quartIn | ||
+ | </option> | ||
+ | <option> | ||
+ | quartOut | ||
+ | </option> | ||
+ | <option> | ||
+ | quartInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | quintIn | ||
+ | </option> | ||
+ | <option> | ||
+ | quintOut | ||
+ | </option> | ||
+ | <option> | ||
+ | quintInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | sineIn | ||
+ | </option> | ||
+ | <option> | ||
+ | sineOut | ||
+ | </option> | ||
+ | <option> | ||
+ | sineInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | expoIn | ||
+ | </option> | ||
+ | <option> | ||
+ | expoOut | ||
+ | </option> | ||
+ | <option> | ||
+ | expoInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | circIn | ||
+ | </option> | ||
+ | <option> | ||
+ | circOut | ||
+ | </option> | ||
+ | <option> | ||
+ | circInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | backIn | ||
+ | </option> | ||
+ | <option> | ||
+ | backOut | ||
+ | </option> | ||
+ | <option> | ||
+ | backInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | elasticIn | ||
+ | </option> | ||
+ | <option> | ||
+ | elasticOut | ||
+ | </option> | ||
+ | <option> | ||
+ | elasticInOut | ||
+ | </option> | ||
+ | <option> | ||
+ | bounceIn | ||
+ | </option> | ||
+ | <option> | ||
+ | bounceOut | ||
+ | </option> | ||
+ | <option> | ||
+ | bounceInOut | ||
+ | </option> | ||
+ | </select> | ||
+ | <button dojoType="dijit.form.Button" id="moveButton"> | ||
+ | Move the div! | ||
+ | </button> | ||
+ | <div id="moveableNode" style="width: 100px; height: 100px; background-color: red; margin-left: 0px;"> | ||
</div> | </div> | ||
- | + | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" | ||
djConfig="parseOnLoad: true"> | djConfig="parseOnLoad: true"> | ||
</script> | </script> | ||
- | <script | + | <script> |
- | dojo.require("dijit.form.Button"); // | + | dojo.require("dijit.form.Button"); |
- | + | dojo.require("dijit.form.ComboBox"); | |
- | + | dojo.require("dojo.fx.easing"); | |
- | + | function setupMove() { | |
- | + | //Function linked to the button to trigger the fade. | |
- | + | function moveIt() { | |
- | + | //Set initial state and get the easing from the dropdown | |
- | + | dojo.style("moveableNode", "marginLeft", "0px"); | |
- | + | var easing = dijit.byId("easingSelector").attr("value"); | |
- | + | var ef = dojo.fx.easing[easing]; | |
- | + | if (ef) { | |
- | + | var moveArgs = { | |
- | + | node: "moveableNode", | |
- | + | properties: { | |
- | + | marginLeft: { | |
- | + | start: 0, | |
- | dojo. | + | end: 400, |
+ | unit: "px" | ||
+ | } | ||
+ | }, | ||
+ | easing: ef, | ||
+ | duration: 5000 | ||
+ | }; | ||
+ | dojo.animateProperty(moveArgs).play(); | ||
} | } | ||
- | } | + | } |
+ | dojo.connect(dijit.byId("moveButton"), "onClick", moveIt); | ||
} | } | ||
+ | dojo.addOnLoad(setupMove); | ||
+ | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 12:40, 23 September 2009