2.Dojo 版的 Hello World

前面，我们对 Dojo 的下载和安装进行了介绍。接下来，我们将通过一个 Dojo 版的 Hello World 示例来了解如何初步使用 Dojo 工具包。本节中，将通过一个客户端登陆验证的例子来进行讲述。
清单 1. 客户端登陆验证示例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <!-- djConfig="parseOnLoad: true" 
 7     表示在页面加载完成以后，启用 Dojo 的解析模块对页面中的 Dojo 标签属性
 8     （Dojo 标签属性是指由 Dojo 定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。
 9     djConfig 是使用 Dojo 页面的一个全局配置参数。
10     通过对这个参数不同的赋值，可以控制页面中 Dojo 的解析模块是否运行， Dojo 的调试模块是否工作等。 -->
11  <script type="text/javascript" 
12     src="js/dojo/dojo.js"  
13     djConfig="parseOnLoad: true"></script> 
14     
15     <!-- @import "dojo_path/dijit/themes/tundra/tundra.css" 表示引入 Dojo tundra 风格的层叠样式表。 -->
16   <style type="text/css"> 
17     @import "js/dijit/themes/tundra/tundra.css"; 
18   </style> 
19   
20   <!-- dojo.require("dojo.parser") 表示引入 Dijit 的解析功能模块。
21   该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。
22   需要与 djConfig="parseOnLoad:true" 相区别的是，djConfig="parseOnLoad:true" 
23   表示确定在页面加载完成以后执行解析功能，但解析功能模块的引入要靠 dojo.require("dojo.parser") 来实现。 -->
24   
25   <!-- dojo.require("dijit.form.TextBox") 和 dojo.require("dijit.form.Button") 
26   表示引入 Dojo 风格的文本输入框和按钮的功能模块。 -->
27   <script type="text/javascript"> 
28     dojo.require("dojo.parser"); 
29     dojo.require("dijit.form.TextBox"); 
30     dojo.require("dijit.form.Button"); 
31     function init() 
32     { 
33     //dojo.connect(dijit.byId("mybutton").domNode, "onclick", "login")
34     //表示将按钮的点击事件和 login 函数联系起来，当点击 id 为 mybutton 的按钮时，执行 login 函数。
35       dojo.connect(dijit.byId("mybutton").domNode,"onclick","login"); 
36     } 
37     function login() 
38     { 
39       if( dijit.byId("myname").value=="goodguy" && 
40         dijit.byId("mypassword").value=="goodgoodstudy")
41         alert("Dojo World welcome you!"); 
42       else 
43       { 
44           //dijit.byId("myname").setValue("") 表示调用 id 为 myname 的 Dojo 文本框的 setValue 函数，将文本框里面的内容清为空。
45         dijit.byId("myname").setValue(""); 
46         dijit.byId("mypassword").setValue(""); 
47         alert("Dojo does not like you!"); 
48       } 
49     } 
50     dojo.addOnLoad(init); 
51   </script> 
52 </head>
53 <!-- <input type="text" length="20" id="myname" dojoType="dijit.form.TextBox">
54      中的 dojoType="dijit.form.TextBox" 表示在页面中文本输入框是 Dojo 风格的。
55      需要注意的是，通过声明 dojoType="dijit.form.TextBox" 这种方式来实现某些 Dojo 功能的使用，
56      其表现形式上如同声明一个 HTML 标签的属性（如同 width="10px"），
57     因此在本文中称其为 Dojo 标签属性。在页面加载完成以后，Dojo 的解析模块会将 Dojo 标签属性转化为浏览器能够识别执行的标记。 -->
58 <body class="tundra">
59     UserName:
60     <input type="text" length="20" id="myname"
61         dojoType="dijit.form.TextBox">
62     <br> PassWord:
63     <input type="password" length="20" id="mypassword"
64         dojoType="dijit.form.TextBox">
65     <br>
66     <div id="mybutton" dojotype="dijit.form.Button">Submit</div>
67 </body>
68 </html>
posted on 2017-01-03 10:19 Sharpest 阅读(211) 评论(0) 收藏举报