JavaScript Tutorial/Dojo toolkit/dojo basics
Содержание
Add DOM event to a tag
<source lang="javascript">
<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>
A html page structure for using dojo
<source lang="javascript">
<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.require("dijit.Menu"); function call_function(choice) { alert(choice); } function save_function() { alert("Save"); } function save_as_function(choice) { alert("Save As"); } </script> </head> <body class="tundra">
Edit
</body>
</html></source>
Customized function loader
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/" }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script language="JavaScript" type="text/javascript"> dojo.registerModulePath("dojo.wbex", "../../.."); dojo.require("dojo.wbex.myFunc"); dojo.wbex.myFunc(); </script> </head> <body></body>
</html></source>
dojo method event
<source lang="javascript">
<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>
Use dojo.require() to load modules
<source lang="javascript">
<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.require("dijit.Menu"); function call_function(choice) { alert(choice); } function save_function() { alert("Save"); } function save_as_function(choice) { alert("Save As"); } </script> </head> <body class="tundra">
Edit
</body>
</html></source>