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 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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常用的缓存技术汇总
2014/05/05 PHP
php递归json类实例
2014/12/02 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
python实现图片批量剪切示例
2014/03/25 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python实现计算器功能
2019/10/31 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
2014全年工作总结
2014/11/27 职场文书
司机个人年终总结
2015/03/03 职场文书
运动会开幕式主持词
2015/07/01 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS