dojo1.7翻译通过简单的代码快速了解dojo

最新推荐文章于 2012-05-29 10:11:58 发布

原创最新推荐文章于 2012-05-29 10:11:58 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

Dojo 专栏收录该内容

22 篇文章

订阅专栏

原文地址：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>