初步了解dojo js框架之学习实例

<!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,"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>

目录结构:

初步了解dojo js框架之学习实例

猜你在找的Dojo相关文章