User:Annelies/Rollmenu
From 2009.igem.org
< User:Annelies(Difference between revisions)
m (User:AnneliesvanKeulen/Rollmenu moved to User:Annelies/Rollmenu: Correct username) |
|||
(5 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> | |
- | + | cubicIn | |
- | + | </option> | |
- | + | <option> | |
- | + | cubicOut | |
- | + | </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> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" | ||
+ | djConfig="parseOnLoad: true"> | ||
+ | </script> | ||
+ | <script> | ||
+ | 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, | ||
+ | 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