dojo 1.7翻訳は簡単なコードで迅速にdojoを理解します。

2662 ワード

住所: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>