JavaScript DHTML/Dojo toolkit/connect
Содержание
Add event to a button with dojo.connect
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function( ) { dojo.connect(dojo.byId("foo"), "onclick", function(evt) { alert("connect fired for DOM Node onclick"); }); dojo.connect(dijit.byId("foo"), "onClick", function(evt) { alert("connect fired for dijit onClick"); }); }); </script> </head> <body class="tundra"> <button id="foo" dojoType="dijit.form.Button" onclick="foo">click me <script type="dojo/method" event="onClick" args="evt"> alert("Button fired onClick"); </script> </button>
</body> </html>
</source>
Add event to a tag with dojo.connect
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function( ) { dojo.connect(dojo.byId("foo"), "onclick", function(evt) { alert("connect fired for DOM Node onclick"); }); dojo.connect(dijit.byId("foo"), "onClick", function(evt) { alert("connect fired for dijit onClick"); }); }); </script> </head> <body class="tundra"> <button id="foo" dojoType="dijit.form.Button" onclick="foo">click me <script type="dojo/method" event="onClick" args="evt"> alert("Button fired onClick"); </script> </button>
</body> </html>
</source>
Connect animation
<source lang="html4strict">
<html> <head> <title>Dojo example</title>
<script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.addOnLoad(function(){ dojo.query("#showMe").onclick(function(e){ var node = e.target; var a = dojo.anim(node, { backgroundColor: "#ff0", color: "#00f" }, 1000); dojo.connect(a, "onEnd", function(){ dojo.anim(node, { color: "#0ff" }, null, null, function(){ node.innerHTML = "Alert!"; dojo.anim(node, { color: "red" }); }); }); }); });
</script> <body>
click me
</body> </html>
</source>
Connect two animations
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box"); dojo.connect(box, "onclick", function(evt) { var a1 = dojo.fx.slideTo({ node:box, top : "150", left : "300" }); var a2 = dojo.fadeOut({ node:box }); dojo.fx.rubine([a1,a2]).play( ); });
});
</script> </head> <body class="tundra">
click
</body> </html>
</source>
Connect two functions together
<source lang="html4strict">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/" }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> </head> <body> <script> function MyClass() { this.sayHello = function(inName) { alert("old: " + inName); } } function interceptor(inName) { document.write("new: " + inName); } var myObject = new MyClass(); dojo.connect(myObject, "sayHello", null, interceptor); myObject.sayHello("A"); </script> </body>
</html>
</source>