dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡 實(shí)現(xiàn)
從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è)的例子.
首先我們要引用它的主題樣式:
<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很相似,就是只引用一次該文件.
<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屬性指明就行了。
<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
完整代碼:
<!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>
相關(guān)文章
dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡 實(shí)現(xiàn)
可能很多人都對(duì)dojo只聞其名,覺(jué)得有了jquery、prototype、YUI等這些優(yōu)秀的js庫(kù)了,dojo還有它存在的必要嗎?2011-08-08dojo學(xué)習(xí)第二天 ajax異步請(qǐng)求之綁定列表
在上一篇《dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡》,我們學(xué)到了,怎么用dojo的選項(xiàng)卡插件來(lái)制作更易于用戶使用的表單,所有的一切都是為了使用更加方便,一切都是為了用戶的體驗(yàn)2011-08-08dojo 之基礎(chǔ)篇(三)之向服務(wù)器發(fā)送數(shù)據(jù)
dojo 之基礎(chǔ)篇(三)之向服務(wù)器發(fā)送數(shù)據(jù)...2007-03-03Dojo 學(xué)習(xí)筆記入門(mén)篇 First Dojo Example
Dojo學(xué)習(xí)筆記入門(mén)篇,第一個(gè)小例子, 剛開(kāi)始學(xué)習(xí)dojo的朋友可以參考下。2009-11-11Dojo之路:如何利用Dojo實(shí)現(xiàn)Drag and Drop效果
Dojo之路:如何利用Dojo實(shí)現(xiàn)Drag and Drop效果...2007-04-04