dojo 第 3 部分: 利用 Dijit 组件框架打造丰富的用户界面

  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 <script type="text/javascript" src="js/dojo/dojo.js"
  7     djConfig="parseOnLoad: true"></script>
  8 
  9 <!-- @import "dojo_path/dijit/themes/tundra/tundra.css" è¡¨ç¤ºå¼å¥ Dojo tundra é£æ ¼çå±å æ ·å¼è¡¨ã -->
 10 <style type="text/css">
 11 @import "js/dijit/themes/tundra/tundra.css";
 12 </style>
 13 
 14 </head>
 15 <body class="tundra">
 16 
 17     <!-- 以声明的方式使用 Dijit -->
 18 
 19     <script type="text/javascript">
 20         dojo.require("dijit.dijit");
 21         dojo.require("dijit._Calendar");
 22     </script>
 23     <div dojoType="dijit._Calendar"></div>
 24     
 25 
 26     <script type="text/javascript">
 27         dojo.require("dijit.TitlePane");
 28         dojo.require("dijit.ColorPalette");
 29     </script>
 30     <div dojoType="dijit.TitlePane" title="Color Picker">
 31         <div dojoType="dijit.ColorPalette"></div>
 32 
 33 
 34         <script type="text/javascript">
 35             dojo.require("dijit.TitlePane");
 36             dojo.require("dijit.ColorPalette");
 37         </script>
 38         <div dojoType="dijit.TitlePane" title="Color Picker">
 39             <div dojoType="dijit.ColorPalette" onChange="alert(this.value);"></div>
 40         </div>
 41 
 42 
 43         <script type="text/javascript">
 44             dojo.require("dijit.TitlePane");
 45             dojo.require("dijit.ColorPalette");
 46         </script>
 47         <div dojoType="dijit.TitlePane" title="Color Picker">
 48             <div dojoType="dijit.ColorPalette">
 49                 <script type="dojo/method" event="onChange" args="evt">
 50          alert(this.value);
 51     </script>
 52             </div>
 53         </div>
 54 
 55         <!-- 利用 JavaScript 处理 Dijit -->
 56         <div id="myCalendar"></div>
 57         <script type="text/javascript">
 58             dojo.require("dijit.dijit");
 59             dojo.require("dijit.Calendar");
 60 
 61             dojo.addOnLoad(function() {
 62                 //此函数的第一个参数是一个配置对象（本例中为空）。
 63                 //第二个参数是应将组件绑定到的 HTML 元素的 ID，在本例中是 myCalendar。非常简单，不是吗？
 64                 var calendar = new dijit.Calendar({}, "myCalendar");
 65             });
 66         </script>
 67 
 68         <div id="myTitlePane"></div>
 69         <script type="text/javascript">
 70             dojo.require("dijit.TitlePane");
 71             dojo.require("dijit.ColorPalette");
 72 
 73             dojo.addOnLoad(function() {
 74                 var colorPalette = new dijit.ColorPalette({});
 75                 var titlePane = new dijit.TitlePane({
 76                     content : colorPalette,
 77                     title : "Color Picker"
 78                 }, "myTitlePane");
 79             });
 80         </script>
 81 
 82         <!-- 定义事件 -->
 83         <div id="myTitlePane">
 84             <div id="myColorPalette"></div>
 85         </div>
 86         <script type="text/javascript">
 87             dojo.require("dijit.TitlePane");
 88             dojo.require("dijit.ColorPalette");
 89 
 90             dojo.addOnLoad(function() {
 91                 var colorPalette = new dijit.ColorPalette({
 92                     onChange : function(evt) {
 93                         alert(this.value);
 94                     }
 95                 }, "myColorPalette");
 96                 var titlePane = new dijit.TitlePane({
 97                     title : "Color Picker"
 98                 }, "myTitlePane");
 99             });
100 
101             <div id="myTitlePane">
102             <div id="myColorPalette"></div>
103             </div>
104             <script type="text/javascript">
105             dojo.require("dijit.TitlePane");
106             dojo.require("dijit.ColorPalette");
107 
108             dojo
109                     .addOnLoad(function() {
110                         var colorPalette = new dijit.ColorPalette({},
111                                 "myColorPalette");
112                         var titlePane = new dijit.TitlePane({
113                             title : "Color Picker"
114                         }, "myTitlePane");
115 
116                         //使用 dojo.connect 添加事件处理程序
117                         dojo.connect(colorPalette, "onChange", null, function(
118                                 evt) {
119                             alert(this.value);
120                         });
121                     });
122         </script>
123 
124 
125         <!--     使用 dijit.byId -->
126         <button id="myButton" dojoType="dijit.form.Button">Push Me</button>
127         <script type="text/javascript">
128             dojo.require("dijit.form.Button");
129             dojo.require("dijit.Dialog");
130 
131             dojo.addOnLoad(function() {
132                 var button = dijit.byId("myButton");
133                 dojo.connect(button, "onClick", null, function(evt) {
134                     var dialog = new dijit.Dialog({
135                         content : "You clicked the button!",
136                         title : "Message"
137                     }).show();
138                 });
139             });
140         </script>
141 </body>
142 </html>

2.基本 Dijit 模板

 1 <!doctype html>
 2 <html lang="en" dir="ltr">
 3     <head>
 4         <title>Dijit Template</title>
 5         <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs
 6 /dojo/1.5/dijit/themes/claro/claro.css" />
 7         <style type="text/css">
 8             body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
 9         </style>
10     </head>
11     <body class="claro">
12         <!-- HTML content here -->
13         <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
14 djConfig="parseOnLoad: true"></script>
15         <script>
16             dojo.require("dijit.dijit");
17             //Add Dijit components you are using here using dojo.require
18     
19             dojo.addOnLoad(function() {        
20                 //JavaScript content here
21             });
22         </script>
23     </body>
24 </html>

posted on 2017-01-12 17:34 Sharpest 阅读(304) 评论(0) 收藏举报