DOJO的一个例子
DOJO的第一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FUN WITH DIGIT</title>
<style type="test/css">
@import "dojo/dijit/themes/tundra/tundra.css"
@import "dojo/dojo/resources/dojo.css"
</style>
<link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css">
<style type="text/css">
h3{
margin : 10 px;
color : red;
}
label,input{
display:block;
float: left;
margin-bottom:5px;
}
label{
text-align:right;
width:70px;
padding-right :20px;
color : red;
}
br{
clear: left;
}
.grouping{
width: 300px;
borer:solid 1px rgb(230,230,230);
padding: 5px;
margin:10px;
}
</style>
<!-- 加载Base 并指定应该在页面加载后解析部件 -->
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad : true"></script>//表示页面加载完成以后，启用Dojo的解析模块对页面中的Dojo标签属性（Dojo标签属性是指Dojo定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。djConfig是使用Dojo页面的一个全局配置参数。通过对这个参数不同的赋值，可以控制页面中Dojo的解析模块是否运行，Dojo的调试模块是否工作等。
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");//设置AccordionContainer
//dojo.require("dijit.layout.LinkPane"); //这里看是否需要使用LinkPane，不用的话取消这句
dojo.require("dijit.layout.ContentPane");
// dojo.require("dijit.layout.LayoutContainer");
</script>
</head>
<!-- 通过为body标签添加class="tundra"属性，指定为页面中所有元素应用默认tundra主题(Dijit 十分依赖css，因此在使用部件时指定主题是非常重要的。) -->
<body class="tundra">
<div dojoType="dijit.layout.AccordionContainer" style ="width :150 px; height :150px; margin :5px" duration="500"><!--duration 用来显示滑动效果的显示时间 单位是毫秒 -->
<div dojoType="dijit.layout.AccordionPane" title="one">
<p> One fish...</p>
</div>
<div dojoType="dijit.layout.AccordionPane" title="two">
<p> Two fish...</p>
</div>
<div dojoType="dijit.layout.AccordionPane" title="red">
<p> Red fish...</p>
</div>
</div>
<h3>Sign-up for our great offers:</h3>
<form id="registration_form">
<!-- 通过定义一些标签并分别为它们添加相应的dojoType属性来指定所要使用的部件，以便解析器找到他们并将部件插入到页面中-->
<div class="grouping">
<label>First Name:</label>
<input type="text" maxlength=25 name="first" id="username" dojoType="dijit.form.TextBox" trim="true" propercase="true"/><br>
<!-- <script type="text/javascript">
var username=dojo.byId('username').value
alert(username);
</script>
-->
<label>Last Name:</label>
<input type="text" maxlength=25 name="last" dojoType="dijit.form.TextBox" trim="true" propercase="true"/><br>
<label>Your Email:</label>
<input type="text" maxlength=25 name="email" dojoType="dijit.form.ValidationTextBox" trim="true" lowercase="true" regExp="[a-z0-9._%+-]+@[a-z0-9-]+/.[a-z]{2,4}" required="true" invalidMessage="please enter a valid e-mail address"/>
<button dojoType="dijit.form.Button" onclick ="alert('Boo!')">Sign Up!</button>
</div>
<div dojoType="dijit.layout.TabContainer" style="width:225px; height:100px; margin:5px; border:solid 1px;">
<div dojoType="dijit.layout.ContentPane" title="one">
one fish....
</div>
<div dojoType="dijit.layout.ContentPane" title="two">
Two fish...
</div>
<div dojoType="dijit.layout.ContentPane" title="red" closable="true">//表示那个窗口可以关闭
Red fish.....
<script type="dojo/method" event ="onClose" args="evt">
console.log("Closing",this.title);
return true;
</script>
</div>
<div dojoType="dijit.layout.ContentPane" title="blue">
Blue fish...
</div>
</div>
</form>
</body>
</html>
DOJO的第二个例子：Dialog 部件（当点击sign up 按钮时 页面被锁住）
<html>
<head>
<title>Fun With Dialog!</title>
<link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css"/>
<link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css"/>
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"> </script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" id="hello">sign up</button>
<script type="text/javascript">
function sayhello(){
dijit.byId("dialog").show();
};
dojo.addOnLoad(function(){
var btn= dojo.byId("hello");
dojo.connect(btn,"onclick",sayhello)
});
</script>
<div id="dialog" dojoType="dijit.Dialog">
<p color="red">Hello</p>
</div>
</body>
</html>
DOJO的第三个例子：关于TooltipDialog 和 DropDownButton 作用是给创建的图像就地加标签的功能
<html>
<head>
<title>TooltipDialog</title>
<link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");//要加载TooltipDialog，必须使用dojo.require("dijit.Dialog"),因为TooltipDialog包含在Dialog的资源文件中
dojo.require("dijit.form.TextBox");
</script>
<style type ="text/css">
.customImage{
background-image : url('img/butterfly.jpg');
background-repeat : no-repeat;
width :120px;
height : 120px;
}
</style>
</head>
<body class="tundra">
<button dojoType="dijit.form.DropDownButton" iconClass="customImage" showLabel="false">
<span>This label is hidden....</span>
<div dojoType="dijit.TooltipDialog" >
<span>Tag this image...</span>
<div dojoType="dijit.form.TextBox"></div>
</div>
<button>
</body>
</html>