JavaScript Tutorial/Dojo toolkit/dojo basics

Материал из Web эксперт
Перейти к: навигация, поиск

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>