dojo 之基础篇


Posted in Javascript onMarch 24, 2007

假设我们的工程目录如下:

-- HelloWorld.html  |-- js/     -- dojo/  /*此处是dojo包下面的文件,列表如下
       		 -- build.txt
       		 -- CHANGELOG
      		 -- demos         		  -- ..
       		 -- dojo.js
       		 -- dojo.js.uncompressed.js
       		 -- iframe_history.html
       		 -- LICENSE
       		 -- README
       		 -- src/
现在我们创建HelloWorld.html文件,代码如下:
<html>
 <head>
  <title>Dojo: Hello World!</title>  <!-- SECTION 1 -->
  <script type="text/javascript" src="js/dojo/dojo.js"></script>  <!-- SECTION 2 --> 
 </head> <body>
 </body>
</html>
在body中加入一个widget button
<button dojoType="Button" widgetId="helloButton">Hello World!</button>上面不一定要使用widgetId,用平常的id就行了,widget会自己将其转化为widgetId。
以下开始加入section 2的代码。
<!-- SECTION 2 -->
  <script type="text/javascript">   //引入库
   //event.*是处理事件,比如:点击,的所有包。
   dojo.require("dojo.event.*");
   dojo.require("dojo.widget.*");
   dojo.require("dojo.widget.Button");   //点击按钮后调用的函数
   function helloPressed()
   {
    alert('You pressed the button');
   }   //将helloButton的点击事件绑定到helloPressed()函数
   function init()
   {
    var helloButton = dojo.widget.byId('helloButton');//获得button对象
    dojo.event.connect(helloButton, 'onClick', 'helloPressed')//绑定,这只是其中一种绑定方法
   }   dojo.addOnLoad(init);//当然也可以将init函数命为其它的名
  </script>
这样,就完成了HelloWorld.html的代码. 试试吧.另外,要注意的是:
如果init函数已经运行了,我们再使用document.getElementById 就没用了. 因为DOM
已经被widget改变. 只能用dojo.widget.byId.
Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
jQuery使用手册之 事件处理
Mar 24 #Javascript
jQuery使用手册之三 CSS操作
Mar 24 #Javascript
jQuery使用手册之二 DOM操作
Mar 24 #Javascript
jQuery使用手册之一
Mar 24 #Javascript
5 cool javascript apps
Mar 24 #Javascript
用JQuery 实现的自定义对话框
Mar 24 #Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 #Javascript
You might like
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
深入理解python对json的操作总结
2017/01/05 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python如何支持并发方法详解
2020/07/25 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
出国签证在职证明
2014/01/16 职场文书
优秀员工获奖感言
2014/03/01 职场文书
五四青年节演讲稿
2014/05/26 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
Python+pyaudio实现音频控制示例详解
2022/07/23 Python