!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"htmlheadtitlemydojo.html/titlemeta http-equiv="keywords" content="keyword1,keyword2,keyword3"meta http-equiv="description" content="this is my page"meta http-equiv="content-type"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>mydojo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script> -->
</head>
<body>
<h2>基于教程<a href="http://www.ibm.com/developerworks/cn/web/wa-ground/">http://www.ibm.com/developerworks/cn/web/wa-ground/</a>
dojo和jquery差不多。。。据说一个重量级的一个轻量级的。 了解即可,使用谷歌浏览器或者firebug查看日志 <br />
<a href="dijit/themes/themeTester.html">dijit/themes/themeTester.html</a><br />
<a href="login.html">login.html</a><br />
<a href="demos/mail/demo.html">demo.html</a><br />
<a href="http://blog.csdn.net/dojotoolkit/">dojo中文博客</a><br />
<a href="http://download.dojotoolkit.org/release-1.10.2/">官方demo和源码下载</a><br />
<h1>Exploring Dojo</h1>
<div id="message">This is a DIV element with id attribute message.</div>
<ul id="list">
<li>This is the first item in a list</li>
<li class="highlight">This is the second item in a list</li>
<li>This is the third item in a list</li>
</ul>
<button onclick="test001()" style="cursor: pointer;">test001</button>
<button onclick="test002()" style="cursor: pointer;">test002</button>
<button onclick="test003()" style="cursor: pointer;">test003</button>
<button onclick="test004()" style="cursor: pointer;">test004</button>
<button onclick="forEach()" style="cursor: pointer;">forEach</button>
<button onclick="connect()" style="cursor: pointer;">connect</button>
<button onclick="connectArray()" style="cursor: pointer;">connectArray</button>
<button onclick="get()" style="cursor: pointer;">get</button>
<button onclick="json()" style="cursor: pointer;">json</button>
</body>
<script src="dojo/dojo.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function() {
dojo.create(
"div",
{
"innerHTML": "Hello, World!"
},
dojo.body()
);
});
function test001()
{
dojo.query("#list li").forEach(function(item) {
console.log(item.innerHTML);
});
}
function test002()
{
dojo.fadeOut({
node: dojo.byId("message"),
duration: 600
}).play();
}
function test003()
{
dojo.fadeIn({
node: dojo.byId("message"),
duration: 600
}).play();
}
function test004()
{
dojo.query(".highlight").style({
backgroundColor: "yellow",
color: "red"
});
}
function forEach()
{
var list = ['My','name','is','Joe'];
dojo.forEach(list, function(item, i) {
console.log((i+1)+'. '+item);
});
var index=dojo.indexOf(list, "name");
console.log(index);
}
function connect()
{
var message = dojo.byId("message");
dojo.connect(message, "onclick", function() {
alert(message.innerHTML);
});
}
function connectArray()
{
dojo.query("#list li").onclick(function(e) {
dojo.style(e.target, {
fontWeight: "bold"
});
});
}
function get()
{
//跨域了。
dojo.xhrGet({
url: "http://www.baidu.com/",
content: {
id: "100",
first_name: "Joe",
last_name: "Lennon"
}
});
}
function json()
{
dojo.xhrGet({
url: "data.json",
handleAs: "json",
load: function(data) {
var table = "<table border=\"1\">";
table += "<tr><th>Name</th><th>Age</th></tr>";
dojo.forEach(data.people, function(person) {
table += "<tr><td>";
table += person.first_name+" "+person.last_name;
table += "</td><td>";
table += person.age;
table += "</td></tr>";
});
table += "</table>";
dojo.place(table, dojo.body());
}
});
}
</script>
</html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
@import "dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
function init()
{
dojo.connect(dijit.byId("mybutton").domNode,"onclick","login");
}
function login()
{
if( dijit.byId("myname").value=="goodguy" &&
dijit.byId("mypassword").value=="goodgoodstudy")
alert("Dojo World welcome you!");
else
{
dijit.byId("myname").setValue("");
dijit.byId("mypassword").setValue("");
alert("Dojo does not like you!");
}
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
UserName:
<input type="text" length="20" id="myname" dojoType="dijit.form.TextBox">
<br>
PassWord:
<input type="password" length="20" id="mypassword" dojoType="dijit.form.TextBox">
<br>
<div id="mybutton" dojotype="dijit.form.Button">Submit</div>
</body>
</html>
目录结构: