原文地址：http://dojotoolkit.org/reference-guide/1.7/quickstart/gettingstarted.html#id1
要使用dojo非常简单，只要在页面里引入以下的js就可以使用dojo了
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"></script>
就这么一句，没有安装文件，没有复杂的内容就能使用了，这个你不会认为很难吧？
通过下面的例子就展现了动画、事件等丰富的功能。
在页面里再加入下面的代码你就可以马上就实现这些效果。
dojo.ready(function(){
dojo.query("#showMe").onclick(function(e){
var node = e.target;
var a = dojo.anim(node, {
backgroundColor: "#363636",
color: "#f7f7f7"
}, 1000);
dojo.connect(a, "onEnd", function(){
dojo.anim(node, { color: "#363636" }, null, null, function(){
node.innerHTML = "wow, that was easy!";
dojo.anim(node, { color: "white" });
});
});
});
});
<div id="showMe" style="padding: 10px;">
click here to see how it works
</div>
整个页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"></script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<script>
dojo.ready(function(){
dojo.query("#showMe").onclick(function(e){
var node = e.target;
var a = dojo.anim(node, {
backgroundColor: "#363636",
color: "#f7f7f7"
}, 1000);
dojo.connect(a, "onEnd", function(){
dojo.anim(node, { color: "#363636" }, null, null, function(){
node.innerHTML = "wow, that was easy!";
dojo.anim(node, { color: "white" });
});
});
});
});
</script>
<div id="showMe" style="padding: 10px;">
click here to see how it works
</div>
</body>
</html>
分享到：
相关推荐
Dojo 1.7 引入了AMD规范，这是JavaScript中的一种模块化加载机制，使得代码可以异步加载，从而提高页面的加载速度。通过`require`和`define`函数，开发者可以更好地组织和管理代码，实现模块间的依赖注入。 二、...
这个"最新dojo包"中的实例文件可以帮助初学者快速理解和上手Dojo框架，通过实际操作掌握如何使用这些功能和组件。无论是对于前端开发新手还是有经验的开发者，Dojo 1.7都是一个值得深入研究的工具集。通过实践这些...
【Dojo 1.7 知识点详解】 Dojo 1.7 是 Dojo Toolkit 重要的版本更新，其中引入了显著的改进和新特性，尤其是对模块加载机制的革新。这一版本的主要焦点在于Asynchronous Module Definition (AMD)，这是一种优化...
【Dojo 1.7 中文版本注释功能说明】 Dojo 1.7 是一个重大的版本更新，其中引入了显著的改进和新特性，尤其是对模块加载机制的革新。这一版本的核心亮点是实现了Asynchronous Module Definition (AMD)机制，这是一项...
此外，Dojo 1.7 还提供了一个强大的数据绑定框架，叫做`dojox/data`，它支持各种数据源，如XML、JSON等，并且能实现视图和数据之间的双向绑定，使得数据驱动的应用程序开发变得更加简单。 压缩包中的“dijit”目录...
手册中列举了一些常用的Dojo包，如dojo.io用于不同类型的IO传输，dojo.dnd提供拖放功能的API，dojo.string提供了字符串处理方法，dojo.date帮助解析和操作日期，dojo.event处理事件驱动和AOP开发，dojo.back管理撤销...
Dojo 1.7 引入了异步模块定义（AMD）模式，通过`dojo.require`和`dojo.provide`实现了模块化的代码组织。AMD允许开发者按需加载依赖，减少了初始页面加载的时间，并提高了代码的可维护性。同时，`dojo/has`特性可以...
Dojo 1.7引入了声明式编程的概念，使得创建和配置UI组件变得非常简单。通过在HTML中使用data-dojo-type和data-dojo-props属性，开发者可以直接在模板中声明dijit组件，减少了与JavaScript交互的复杂性。 5. **dojo...
《Dojo入门》这本书主要介绍了Dojo JavaScript库的使用，帮助初学者快速掌握这个强大的前端开发工具。Dojo是一个开源的JavaScript框架，旨在提供一站式的解决方案，包括UI组件、数据管理、动画效果、Ajax交互等功能...
Dojo 1.7.2 鼓励模块化开发，每个功能都可以封装成独立的模块，通过AMD机制组织和管理，有利于代码的重用和维护。 在`dojo-release-1.7.2`压缩包中，你会找到Dojo框架的所有相关文件，包括源码、文档、示例和资源...
4. **工具集和组件**：dojo包含了丰富的UI组件，如按钮、表单、日历、树形视图等，这些都可以通过`dijit`模块来访问。此外，`dojox`模块则提供了更高级和实验性的功能，如图表、GIS地图等。 5. **数据绑定**：dojo...
10. **dojo.on**: Dojo 1.7引入了`dojo/on`模块，它提供了更现代、更符合DOM Level 2事件接口的事件处理方式，同时兼容老版本的`dojo.connect`。 以上所述是Dojo 1.6在DOM操作方面的核心功能。通过这些API，开发者...
《精通Dojo(中文版)》是一本专为开发者打造的Dojo框架深入学习指南，旨在帮助读者全面理解和掌握Dojo工具集的...通过阅读本书，读者不仅可以掌握Dojo的基本用法，还能了解到如何利用Dojo构建高效、可维护的Web应用。
**DOJO工具包简单介绍** Dojo工具包是一款强大的JavaScript库，专为Web开发者提供一套完整的前端解决方案。它集成了丰富的UI组件、数据管理、动画效果、Ajax交互以及国际化等功能，帮助开发者高效地构建高性能、可...
`dojo/store` API 是一个更现代的数据访问接口，适用于Dojo 1.7及以上版本，但1.2.1版本可能仍包含一些相关的实现。 8. **Dojo事件处理** Dojo 提供了一种统一的方式来处理DOM事件，如`dojo/on` 函数。它简化了...
3. **AMD模块化**：Dojo 1.7 引入了基于AMD的模块化系统，通过dojo/require和dojo/define，开发者可以方便地定义和引用模块。这使得大型项目的组织和维护变得更为容易。在示例中，你可以看到如何组织模块，以及如何...
由于Dojo，Dijit和DojoX都是如此庞大和复杂的代码库，因此存储库试图将其分解为易于维护的部分，从而也允许轻松地进行添加，修改等。 每个主要名称空间都分为dojo ， dijit和dojox目录，其中的主要版本号位于其中的...
升级移动平台发布工具：增加 Dojo 1.7 移动控件库支持，精确到像素级别匹配的设备底版，浏览器预览增加缩放支持。 增加从 Maqetta 导出到 Eclipse 的教学文档。 改善了云端多人协作时的 Review 和 Comment 可用性。 ...
这意味着开发者不必因 API 使用了 Dojo 1.7 而修改其应用程序代码。 #### 五、JavaScript API 实际应用 - **API 下载**：官方提供了 API 的下载地址（http://support.esrichina.com.cn/2011/0223/960.html），需要...