快捷導(dǎo)航

dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡實(shí)現(xiàn)

更新時(shí)間：2011年08月28日 18:20:53 作者：

可能很多人都對(duì)dojo只聞其名，覺(jué)得有了jquery、prototype、YUI等這些優(yōu)秀的js庫(kù)了，dojo還有它存在的必要嗎？

其實(shí)不然，用《精通Dojo》里的話來(lái)說(shuō)就是"Dojo不只是一個(gè)程序庫(kù)，而是一個(gè)工具包"，它比其他所有的JS庫(kù)的插件更全面更廣闊。它包含大約40個(gè)用戶界面控件、1個(gè)圖形框架、cometd支持、1個(gè)打包系統(tǒng)，還有其他的一些東西。

從dojo官方網(wǎng)站上下載最新版1.6，解壓下來(lái)，它有三個(gè)文件夾分別是：

1. dojo: 是Dojo基礎(chǔ)，你要做的其它事情都是在它的基礎(chǔ)上，類似于jquery.js文件，但比它更豐富了一些其他功能;

2. dijit : Dojo的小部件框架及內(nèi)建的小控件集.(大約有40個(gè)HTML用戶小控件);

3 dojox: Dojo的擴(kuò)展庫(kù)，包含了從表格小部件到繪圖庫(kù)的所有功能。

了解了這些就足夠了，雖然才發(fā)布到1.6，沒(méi)有像jquery那樣到6.1，但dojo絕對(duì)是強(qiáng)大的，選擇它，將是你一生不變的追求。(廣告詞)

(注：dojo始于2004年，alex發(fā)起，然后經(jīng)過(guò)眾多DHTML專家開(kāi)發(fā),所以它現(xiàn)在已經(jīng)很成熟了。)

接下來(lái)，我們要來(lái)配置我們的第一個(gè)例子，準(zhǔn)備好了嗎？dojo旅程正式開(kāi)始,我們要做一個(gè)表單注冊(cè)的例子.

首先我們要引用它的主題樣式:

復(fù)制代碼代碼如下:

 
<style> 
@import url(../dijit/themes/tundra/tundra.css); 
@import url(../dojo/resources/dojo.css); 
</style> 

themes就是主題樣式了，里面已經(jīng)存在了幾個(gè)，我任選了其中的"tundra"，然后還要引用下dojo.css。再就是引用dojo基礎(chǔ)文件dojo.js:

<script src='../dojo/dojo.js' djConfig='parseOnLoad:true'></script>
這里要注意的是djConfig，由于我們要用到聲明式小部件，所以需要parse，這個(gè)使用起來(lái)會(huì)簡(jiǎn)單點(diǎn)，如果用編程式寫(xiě)法就不需要了，只需注意下就行了。然后是引用parser.js和ContentPane.js，parser是使用聲明式所必需的，ContentPane是內(nèi)容面板所必需的。在dojo里引用的方式是調(diào)用require方法，這個(gè)和PHP里的 require_once很相似，就是只引用一次該文件.

復(fù)制代碼代碼如下:

 
<script> 
dojo.require("dojo.parser"); 
dojo.require('dijit.layout.ContentPane'); 
dojo.require('dijit.layout.TabContainer'); 
</script> 

這里的"."寫(xiě)法，可以理解為文件夾下的類，或者命名空間，和AS3里很相似。大家是不是發(fā)現(xiàn)多了一個(gè)TabContainer，這個(gè)是我們要用到的選項(xiàng)卡切換小插件了。如果調(diào)用這個(gè)插件呢，很簡(jiǎn)單，只需要在我們要使用的地方用dojoType屬性指明就行了。

復(fù)制代碼代碼如下:

 
<div dojoType='dijit.layout.TabContainer' class="myForm"> 
<div dojoType='dijit.layout.ContentPane' title='個(gè)人信息'> 
<label for="firstName">First Name:</label><input type='text' id='firstName' /></br> 
<label for="lastName">Last Name:</label><input type='text' id='lastName' /></br> 
<label for="middleInitial">Middle Initial:</label><input type='text' id='middleInitial' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='聯(lián)系地址'> 
<label>Email:</label><input type='text' id='email' /></br> 
<label>Address:</label><input type='text' id='address' /></br> 
<label>State:</label><input type='text' id='state' /></br> 
<label>City:</label><input type='text' id='city' /></br> 
<label>Country:</label><input type='text' id='country' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='聯(lián)系電話'> 
<label>Work Phone:</label><input type='text' id='workPhone' /></br> 
<label>Home Phone:</label><input type='text' id='homePhone' /></br> 
<label>Cell Phone:</label><input type='text' id='CellPhone' /></br> 
</div> 
</div> 

然后我們來(lái)一句句理解， dojoType='dijit.layout.TabContainer'是指讓容器擁有tab選項(xiàng)卡功能,dojoType='dijit.layout.ContentPane'這個(gè)是指該容器是一個(gè)內(nèi)容塊，也就是單個(gè)的選項(xiàng)卡.

最后就沒(méi)了，這個(gè)簡(jiǎn)單的選項(xiàng)卡就完成了。大家是不是覺(jué)得很奇怪，我們竟然沒(méi)寫(xiě)其它的一行代碼就完成了這個(gè)功能？這就是聲明式小插件的好處了，因?yàn)槟憬odojoType聲明了，它就會(huì)自動(dòng)去綁定這個(gè)功能。

好了，這是我第一天的正式接觸dojo，可能有理解錯(cuò)誤的地方，大家可以指出來(lái)，我們一起學(xué)習(xí)進(jìn)步。如果你喜歡，我會(huì)寫(xiě)第二篇甚至更多.

本文的最終示例圖:demo演示請(qǐng)查閱：http://www.lovewebgames.com/dojoroot/myStudy/study_001.html

完整代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>第一天 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<style> 
@import url(../dijit/themes/tundra/tundra.css); 
@import url(../dojo/resources/dojo.css); 
</style> 
<script src='../dojo/dojo.js' djConfig='parseOnLoad:true'></script> 
<script> 
dojo.require("dojo.parser"); 
dojo.require('dijit.layout.ContentPane'); 
dojo.require('dijit.layout.TabContainer'); 
</script> 
<style> 
.myForm{width:600px;height:300px;line-height:1.6;} 
.myForm label{width:150px;float:left;} 
</style> 
</head> 

<body class="tundra"> 

<div dojoType='dijit.layout.TabContainer' class="myForm"> 
<div dojoType='dijit.layout.ContentPane' title='個(gè)人信息'> 
<label for="firstName">First Name:</label><input type='text' id='firstName' /></br> 
<label for="lastName">Last Name:</label><input type='text' id='lastName' /></br> 
<label for="middleInitial">Middle Initial:</label><input type='text' id='middleInitial' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='聯(lián)系地址'> 
<label>Email:</label><input type='text' id='email' /></br> 
<label>Address:</label><input type='text' id='address' /></br> 
<label>State:</label><input type='text' id='state' /></br> 
<label>City:</label><input type='text' id='city' /></br> 
<label>Country:</label><input type='text' id='country' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='聯(lián)系電話'> 
<label>Work Phone:</label><input type='text' id='workPhone' /></br> 
<label>Home Phone:</label><input type='text' id='homePhone' /></br> 
<label>Cell Phone:</label><input type='text' id='CellPhone' /></br> 
</div> 
</div> 
</body> 
</html> 