如果僅僅是為了練習Dojo,或者進行測試，可以參考下面的步驟。下面的文件均是在Windows下測試
需要的工具
1 Tomcat服務器：下載地址 選擇適合自己的機器型號，即可
2 Dojo的工具包：下載地址 由於dojo toolkit沒有測試頁面，所以推薦下載下面的那個SDK的
3 瀏覽器 博主使用的是chrome
接下來就可以配置文件了。
首先是Tomcat
Tomcat,直接解壓縮就可以了。
bin文件夾下面有個startup.bat，雙擊就可以運行。雙擊shutdown.bat停止服務器。
運行服務器后，我們輸入網址http://localhost:8080 看到下面的頁面，表示服務器啟動成功。
這個默認的頁面，其實是E:\tomcat\apache-tomcat-7.0.54\webapps\ROOT目錄下的index.jsp，記住這個地址，后面要用到。
dojo工具包
解壓縮后，修改文件夾名稱dojoroot，放到ROOT目錄下。輸入下面的網址
http://localhost:8080/dojoroot/dijit/themes/themeTester.html
看到下面的頁面表示成功。
這樣表示dojo可以使用了！
自己的測試用例
我們自己寫一個測試頁面,創建頁面test.html，放在ROOT文件夾下：
<html>
<head>
<script type="text/javascript" src="./dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>
<style type="text/css">
@import "./dojoroot/dijit/themes/tundra/tundra.css";
@import "./dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");</script>
<style>
.formContainer{
width:600px;
height:600px;
}
label{
width:150px;
float:left;
}
</style>
</head>
<body class="tundra">
<div class="formContainer" dojoType="dijit.layout.TabContainer">
<div dojoType="dijit.layout.ContentPane" title="Personal">
123
</div>
<div dojoType="dijit.layout.ContentPane" title="Address">
321
</div>
<div dojoType="dijit.layout.ContentPane" title="phone">
456
</div>
</div>
</body>
</html>
從工具包中，引入js或者css，注意路徑的問題。如果要使用絕對路徑，就要寫全路徑名。比如本文中dojoroot放在ROOT下面，頁面test.html也在ROOT中，因此相對路徑位："./dojoroot/dojo/dojo.js" 絕對路徑位："http://localhost:8080/dojoroot/dojo/dojo.js"（即相對於服務器web根目錄而言）
引入dojo.js
<script type="text/javascript" src="./dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>
引入特定的css
<style type="text/css"> @import "./dojoroot/dijit/themes/tundra/tundra.css"; @import "./dojoroot/dojo/resources/dojo.css"; </style>
動態加載特定的js
<script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer");</script>
在<body>里面，加載dojo特有的風格
<body class="tundra">
最后，我們使用幾個div，制作一個選項卡
<div class="formContainer" dojoType="dijit.layout.TabContainer">
<div dojoType="dijit.layout.ContentPane" title="Personal">
123
</div>
<div dojoType="dijit.layout.ContentPane" title="Address">
321
</div>
<div dojoType="dijit.layout.ContentPane" title="phone">
456
</div>
</div>
運行頁面
http://localhost:8080/test.html就可以看到如下的頁面了。
轉載注明：http://i.cnblogs.com/EditPosts.aspx?postid=3810785