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 type="text/css">
 
-
            #statusCode { padding: 5px; border: 1px solid #000; background: red; text-align:
 
-
            center; width: 100px; }
 
         </style>
         </style>
     </head>
     </head>
      
      
     <body class="tundra ">
     <body class="tundra ">
-
         <p>
+
         <select dojoType="dijit.form.ComboBox" id="easingSelector">
-
            <button dojoType="dijit.form.Button" onClick="statusOk()">
+
            <option>
-
                 Grant access
+
                 linear
-
             </button>
+
             </option>
-
         </p>
+
            <option>
-
         <div id="statusCode">
+
                quadIn
-
             Denied
+
            </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 type="text/javascript">
+
     <script>
-
         dojo.require("dijit.form.Button"); // we require the button to make our demo look fancy
+
         dojo.require("dijit.form.Button");
-
        function statusOk() {
+
        dojo.require("dijit.form.ComboBox");
-
            dojo.animateProperty({
+
        dojo.require("dojo.fx.easing");
-
                 node: dojo.byId("statusCode"),
+
        function setupMove() {
-
                 duration: 500,
+
            //Function linked to the button to trigger the fade.
-
                 properties: {
+
            function moveIt() {
-
                     backgroundColor: {
+
                //Set initial state and get the easing from the dropdown
-
                         start: "red",
+
                dojo.style("moveableNode", "marginLeft", "0px");
-
                         end: "green"
+
                 var easing = dijit.byId("easingSelector").attr("value");
-
                    },
+
                 var ef = dojo.fx.easing[easing];
-
                    color: {
+
                 if (ef) {
-
                        start: "black",
+
                     var moveArgs = {
-
                        end: "white"
+
                         node: "moveableNode",
-
                    },
+
                         properties: {
-
                },
+
                            marginLeft: {
-
                onEnd: function() {
+
                                start: 0,
-
                     dojo.byId("statusCode").innerHTML = "Granted";
+
                                end: 400,
 +
                                unit: "px"
 +
                            }
 +
                        },
 +
                        easing: ef,
 +
                        duration: 5000
 +
                    };
 +
                     dojo.animateProperty(moveArgs).play();
                 }
                 }
-
             }).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">