User:Annelies/Rollmenu
From 2009.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
<html dir="ltr"> | <html dir="ltr"> | ||
Line 5: | Line 6: | ||
<style type="text/css"> | <style type="text/css"> | ||
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } | body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } | ||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
</head> | </head> | ||
<body class="tundra "> | <body class="tundra "> | ||
- | < | + | <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> | </div> | ||
</body> | </body> | ||
Line 25: | Line 114: | ||
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); | ||
+ | |||
</html> | </html> |
Revision as of 12:51, 16 September 2009
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">