關(guān)于jQuery UI 使用心得及技巧
1 jQuery UI
2 為我所用
2.1 Tabs
2.2 Accordion
2.2.1 使用基本的Accordion
2.2.2 實(shí)現(xiàn)打開多個(gè)標(biāo)簽
2.2.3 Accordion的嵌套
3 給插件應(yīng)用主題——Theme Roller
3.1 更改配色
3.2 更改圖標(biāo)
4 相關(guān)連接
jQuery UI
有時(shí)你僅僅是為了實(shí)現(xiàn)一個(gè)漸變的動畫效果而不得不把javascrip 重新學(xué)習(xí)一遍然后書寫大量代碼。直到j(luò)Query的出現(xiàn)，讓開發(fā)人員從一大堆繁瑣的js代碼中解脫，取而代之幾行jQuery代碼?，F(xiàn)今，jQuery無疑已成為最為流行沒有之一的JavaScript類庫。
而jQuery UI 則是在jQuery 基礎(chǔ)上開發(fā)的一套界面工具，幾乎包括了網(wǎng)頁所能想到和用到的插件以及動畫特效，讓一個(gè)毫無藝術(shù)感只知道碼字的碼農(nóng)不費(fèi)吹灰之力就可以做出令人炫目的界面。讓你在做界面的時(shí)候隨便‘拿來’就用，還有一點(diǎn)就是，它是免費(fèi)開源的，用戶可根據(jù)需要自定義甚至重新設(shè)計(jì)。
2 為我所用
下面以Tabs和Accordion插件來看看如何在項(xiàng)目中使用jQuery UI。其他插件的詳盡使用文檔及演示在這里可以學(xué)習(xí)到，只不過是英文的。
2.1Tabs
Tabs 形式的插件在網(wǎng)頁及桌面應(yīng)用程序中都使用得相當(dāng)廣泛，可以用作菜單，也可做為一小部分內(nèi)容的選項(xiàng)卡
首先在VS2010新建一個(gè)MVC項(xiàng)目，要使用jQuery UI,首先要把jQuery及jQuery UI 腳本文件包含在項(xiàng)目當(dāng)中，并且相關(guān)頁面要用<script>標(biāo)簽進(jìn)行引用。當(dāng)我們創(chuàng)建好一個(gè)MVC項(xiàng)目后，在Scripts文件夾里，系統(tǒng)已經(jīng)自動把jQuery及jQuery UI 腳本文件包含在項(xiàng)目當(dāng)中了（如圖1）。
圖 1
注釋：圖中jquery-1.5.1-vsdoc.js為包含完整提示注釋的版本，在VS里編寫代碼時(shí)會有智能地顯示提示信息及注釋；jquery-1.5.1.js為標(biāo)準(zhǔn)版本；帶min的為壓縮精簡后的版本，為的是在客戶端減少下載時(shí)間。一般頁面中我們會使用精簡的版本，只要項(xiàng)目文件夾包含jquery-1.5.1-vsdoc.js，VS會自動調(diào)用里面的提示信息。
現(xiàn)在需要做的就是在頁面將它包來。由于創(chuàng)建好項(xiàng)目后，系統(tǒng)在Site.Mater頁面中已經(jīng)將jQuery引用到頁面，這意味著所有使用了母版頁的頁面都默認(rèn)引用了jQuery,所以我們在index頁面只需要添加對是jQuery UI文件的聲明：
為了在頁面上呈現(xiàn)Tabs插件，我們需要定義一個(gè)Div，并且在<script>腳本代碼里面選中它，在它身上應(yīng)用tabs方法。
<div id="tabs">
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
})
</script>
現(xiàn)在運(yùn)行程序不會看到任何東西，因?yàn)槲覀冞€沒有往主體Div中定義要顯示的tab,只是定義好了一個(gè)可以放tabs的地方?，F(xiàn)在tabs Div中定義一個(gè)無序列表，列表項(xiàng)決定了要顯示的標(biāo)簽個(gè)數(shù)及要顯示的標(biāo)簽名稱。
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs1</a></li>
<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
這里定義3個(gè)列表項(xiàng)，名稱分別為Tabs1、Tabs2、Tabs3，列表下方的三個(gè)Div對應(yīng)著上面定義的三個(gè)標(biāo)簽，用來呈現(xiàn)每個(gè)標(biāo)簽里面要顯示的正文。頁面部分基本完工。運(yùn)行程序：
圖 2
值得注意的是，進(jìn)行到這一步并沒有出現(xiàn)圖0中的效果，tabs樣式?jīng)]有應(yīng)用上。原因只可能有一個(gè)，那就是樣式表。后來谷歌一下果然是沒有把相應(yīng)的樣式表包含到頁面。這在官方的Demo里也沒有提及，也沒給出相應(yīng)的注意，我覺得這里Demo不該省略點(diǎn)如果重要的一句代碼的，不一定每個(gè)第一次使用jQuery UI人都能快速找到問題。對于每一個(gè)新手，在進(jìn)行到這一步都需要去谷歌一下為什么效果沒出來。找到問題后解決起來就很簡單了。在頁面里加上對jQuery UI 樣式表的引用。
圖 3
最后完整的代碼大概是這樣的。
<link href="//www.dhdzp.com/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/>
<script src="//www.dhdzp.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs1</a></li>
<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
})
</script>
由于是用的MVC模板生成的項(xiàng)目，所以在Content/themes/base文件夾里已經(jīng)放入了jQuery UI的CSS樣式表，如果沒有，你需要單獨(dú)下載然后放到項(xiàng)目中，并在頁面正確引用。
現(xiàn)在再來刷新一下頁面，效果就出來了。
圖 4
既然是用樣式表控制的，代表著我們可以隨意對它進(jìn)行自定義，換顏色等，這在后面的應(yīng)用樣式 里介紹。
對于Accordion控件就有一些東西需要說的了。因?yàn)閷τ谝粋€(gè)東西，如果它不夠靈活，不易擴(kuò)展，會給使用者帶來很大的不便。
圖 5
先來看一下如何將Accordion插件應(yīng)用起來。我們將它放到我們的Tabs1頁面里。同Tabs一樣，應(yīng)用起來也非常的簡單，只需把相應(yīng)的Div定義好，之后，在腳本總要所要做的工作也就是一句代碼的事。是不是體驗(yàn)到了jQuery UI所帶來的便捷了。
將之前tabs-1 Div 中的<P>標(biāo)簽及內(nèi)容刪除掉，用如下的代碼替換。
<div id="tabs-1">
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<p>content of section 1</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
</div>
其中id為accordion的外圍Div是容器，在腳本代碼里面選中它然后對它應(yīng)用accordion方法。
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion").accordion();
})
</script>
之后，里面的每個(gè)<a>標(biāo)簽就會被解析成一個(gè)可以點(diǎn)擊的標(biāo)題，<a>標(biāo)簽后緊跟<div>用于放置本小塊的內(nèi)容。最后效果如下圖。
圖 6
需要注意的地方有兩點(diǎn)。一是樣式，每個(gè)jQuery UI其實(shí)都用了在上面說的那個(gè)樣式表，如果先前沒將它引用進(jìn)頁面，這里的Accordion效果也是不會出來的。二是這里的格式需要嚴(yán)格按照一個(gè)<a>標(biāo)簽然后跟一個(gè)<div>標(biāo)簽的形式，這樣的交叉形式如果被打亂，呈現(xiàn)出來的結(jié)果將是你所不愿意扯的。比如你在<a>跟兩個(gè)<div>：
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<p>content of section 1.1</p>
</div>
<div>
<p>content of section 1.2</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
你原本以為 這兩個(gè)div會被包在第一個(gè)secion里面，但其實(shí)真實(shí)的效果會是有點(diǎn)離譜的：
圖 7
是不是有點(diǎn)。那如果我需要在section里進(jìn)行布局，非要放兩個(gè)Div或者更多呢。那就必需把這些內(nèi)容裝到一個(gè)div中再放到section1里面，這樣就不會出錯(cuò)了。為了顯示出確實(shí)是放了兩個(gè)Div，給每個(gè)Div加上邊框。
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<div style="border: 1px solid gray">
<p>content of section 1.1</p>
</div>
<div style="border: 1px solid gray">
<p>content of section 1.2</p>
</div>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
圖 8
2.2.2實(shí)現(xiàn)打開多個(gè)標(biāo)簽
jQuery UI Accordion最大的一個(gè)硬傷也是最讓人的特性就是同時(shí)只能打開一個(gè)標(biāo)簽，比如Section1被點(diǎn)開了，其他Secton必然處于閉合狀態(tài)。如果我想實(shí)現(xiàn)同時(shí)有幾個(gè)標(biāo)簽處于打開狀態(tài)呢，并且我不希望打開的標(biāo)簽因?yàn)槲尹c(diǎn)擊了另外的標(biāo)簽而關(guān)閉掉。很遺憾，這個(gè)插件并不有提供相應(yīng)的Option。更的是，在官方的Demo中明確說了，如果你非要讓多個(gè)標(biāo)簽同時(shí)處于打開狀態(tài)，那你就不要用我們的Accordion好了，愛用啥用啥，反正我們就是要讓它只支持一個(gè)標(biāo)簽被打開。
圖 9
好吧，我還沒強(qiáng)大到可以重寫這個(gè)Accordion插件，于是我谷歌“expander”” multi open accordion”之類的，確實(shí)還是有很多朋友是有這樣的需求的，并且也有牛人給出了一些解決方法，但都有點(diǎn)復(fù)雜。最后的最后，我突然頓悟，把每個(gè)section都定義成accordion不就行了嘛。一個(gè)acction同時(shí)只能打開一個(gè)secton，如果我想要每個(gè)section都可任意打開關(guān)閉而不影響別的部分，那把每個(gè)section用accordion代替就好了，并且accordion里只定義一個(gè)section。
說起來有點(diǎn)暈，下面修改之前的代碼，定義id分別為accordion1,accordion2,accordion3三個(gè)div并放入相應(yīng)內(nèi)容:
<div id="tabs-1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>content of section 1</div>
</div>
<div id="accordion2">
<h3><a href="#">Section 2</a></h3>
<div>content of section 2</div>
</div>
<div id="accordion3">
<h3><a href="#">Section 3</a></h3>
<div>content of section 3</div>
</div>
</div>
然后修改腳本代碼：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
$("#accordion3").accordion();
})
</script>
運(yùn)行程序，發(fā)現(xiàn)三個(gè)secton同時(shí)打開了，并且還不能關(guān)閉！這顯然也不是我們想要的結(jié)果。原因很簡單，如果上面所說的accordion這個(gè)插件有且僅有一個(gè)section是被打開的，每個(gè)accordion里我們只定義了一個(gè)section，那這個(gè)section毫無疑問應(yīng)該處于被打開狀態(tài)，由于只有它一個(gè)，把它關(guān)閉了之后沒有其他section可以打開，所以索性我們想關(guān)它都關(guān)不掉了。
但幸運(yùn)的是，我們可以通過設(shè)置accordion的collapsible為true來讓這個(gè)唯一的section可以進(jìn)行折疊打開操作。只需修改腳本如下：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true });
$("#accordion2").accordion({ collapsible: true });
$("#accordion3").accordion({ collapsible: true });
})
</script>
再次運(yùn)行程序，Okay，一切如我們所想的那樣。
圖 10
還有個(gè)問題就是accordion的嵌套。一開始我在嘗試去實(shí)現(xiàn)這個(gè)功能時(shí)也是遇到了些麻煩的。
比如現(xiàn)在我們要在section 1里面想再放一個(gè)accordion，給它取名為subaccordion吧，需要注意的地方就是 這個(gè)subaccordion一定要放在“content of section1”這個(gè)Div中，其他任何形式的擺放都不會出現(xiàn)正確的效果。如果你覺得直接在Accordion 1里面加一個(gè)<a>標(biāo)簽再加一個(gè)<div>，就會正確地在Section1里面解析出一個(gè)內(nèi)嵌于Accortion1的Accordion，那你就錯(cuò)了。最后的代碼及效果如下。
<div id="tabs-1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<div id="subaccortion">
<h3><a href="#">subaccortion</a></h3>
<div>content of subaccortion</div>
</div>
</div>
</div>
<div id="accordion2">
........
圖 11
有點(diǎn)不完美的地方就是Section1出現(xiàn)了滾動條，下面我們設(shè)置一下高度屬性并且讓里面那個(gè)子accortion一開始處于折疊狀態(tài)。
修改腳本代碼如下：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true, autoHeight: false });
$("#subaccortion").accordion({ collapsible: true, active:false });
$("#accordion2").accordion({ collapsible: true, autoHeight: false });
$("#accordion3").accordion({ collapsible: true, autoHeight: false });
})
</script>
圖 12
從這里你已經(jīng)可以看到，可以設(shè)置任意一個(gè)標(biāo)簽一開始是處于折疊還是打開狀態(tài)。當(dāng)然也可以將一個(gè)accortion disable掉，那樣點(diǎn)擊標(biāo)題就不會有折疊打開動作了。
3 給插件應(yīng)用主題——Theme Roller 3.1更改配色
現(xiàn)在，我們是可以方便地使用jQuery UI 做出界面了。但試想，那么多人如果都在用，會不會把整個(gè)互聯(lián)網(wǎng)搞得千篇一律，用戶一打開瀏覽器走到哪里看到的都是同一個(gè)東西，會不會有點(diǎn)摸不著北。并且我們也需要在使用這些插件的時(shí)候進(jìn)行一些調(diào)整以符合我們自己網(wǎng)站的主題，色調(diào)等。
jQuery UI支持用戶定義樣式，你甚至可以更改實(shí)現(xiàn)代碼來進(jìn)行更高級的自定義，如果你有能力的話。
你可以修改相應(yīng)的css文件以達(dá)到修改樣式的目的，但這不如到官網(wǎng)的主題網(wǎng)站去下載自己需要的主題，并且還可以在線編輯出自己想要的主題。
進(jìn)入theme roller后，選擇自己喜歡的主題樣式下載下來。
圖 13
解壓后進(jìn)行到css文件夾，將jquery-ui-1.8.24.custom.css文件和images文件夾復(fù)制到項(xiàng)目中適當(dāng)位置，然后需要在頁面正確地引用到，便可將樣式應(yīng)用上。不管你應(yīng)用什么主題，主題所使用的圖片名字都是一樣的，只是顏色不一樣而以。由于本例是用MVC模板生成的項(xiàng)目，所以項(xiàng)目中的imges文件夾中已經(jīng)存在的圖片和下載下來的圖片可能部分重名，復(fù)制時(shí)詢問是否替換，點(diǎn)擊確實(shí)即可。
圖 14
圖 15
這時(shí)把之前寫的樣式表引用改成對這個(gè)customer樣式表的引用
<link href="//www.dhdzp.com/Content/themes/base/jquery-ui-1.8.24.custom.css" type="text/css" rel="stylesheet" />
然后去刷新頁面，效果如下圖：
圖 16
需要注意的是jquery-ui-1.8.24.custom.css與images文件夾的相對位置最好不要改變，也就是把它們兩個(gè)放一起，因?yàn)閏ss文件中會調(diào)用images文件夾中的圖片，如果你改變了他們的相對位置，就需要到css中把所有對圖片的調(diào)用路徑通通改正確后才能使主題正常工作。
不僅僅是顏色，jQuery UI的主題里面，也為我們預(yù)設(shè)了很多圖標(biāo)可供選擇，在網(wǎng)頁上我們可以看到有一大堆豐富的圖標(biāo)。這些圖標(biāo)的顏色對應(yīng)你所下載的主題，包含在了imges文件夾中。
圖 17
問題是在這么多圖標(biāo)中如何準(zhǔn)確指定我們想要的那一個(gè)。比如現(xiàn)在想把Accordion標(biāo)題左邊的三角形圖標(biāo)改成線條形的尖角形狀。
下面只是個(gè)人提供的一個(gè)小技巧。將鼠標(biāo)指到你想要的圖標(biāo)身上，會出現(xiàn)tooltip提示文本，這個(gè)文字就對應(yīng)這個(gè)圖標(biāo)。
圖 18
現(xiàn)在我們得到這個(gè)名字后，就可以到腳本代碼里去進(jìn)行修改了。
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true, autoHeight: false,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
$("#subaccortion").accordion({ collapsible: true, active:false ,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
$("#accordion2").accordion({ collapsible: true, autoHeight: false ,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
$("#accordion3").accordion({ collapsible: true, autoHeight: false,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
})
</script>
最后來看下效果,perfect.
圖19
到這里基本介紹了jQuery UI的使用過程。當(dāng)然，jQuery UI不只包含tabs和accordion 這兩個(gè)插件，其他的插件及效果的使用也相差不多，詳盡的使用及設(shè)置方法都可以在官方的文檔及Demo中找到答案。
后記：因?yàn)閖Query已經(jīng)火得一塌糊涂了,如果再結(jié)合jQuery UI，將更大程度上減輕程序員的負(fù)擔(dān)。在享受這些便利的同時(shí)，我們不得不默默地內(nèi)心要感謝一下那些為jQuery及UI做出奉獻(xiàn)的同行們，同時(shí)我們也能盡我們自己的一分力量，來豐富擴(kuò)展jQuery的插件及UI庫。
例子源碼下載：http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar
相關(guān)連接
jQuery UI 官網(wǎng)
http://jqueryui.com/
theme roller
http://jqueryui.com/themeroller/
jQuery 學(xué)習(xí)：張子秋《從零開始學(xué)習(xí)jQuery》系列：
//www.dhdzp.com/article/24908.htm
相關(guān)文章
這篇文章主要介紹了jquery獲得當(dāng)前html頁面源碼的方法,涉及jquery針對頁面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
如何使用CSS3+JQuery實(shí)現(xiàn)懸浮墻式菜單
這篇文章主要介紹了如何使用CSS3+JQuery實(shí)現(xiàn)懸浮墻式菜單,由于現(xiàn)在很流行的基礎(chǔ)觸摸的web站點(diǎn)可以運(yùn)行在移動設(shè)備上，我認(rèn)為我們可以讓那些基于桌面瀏覽器的人們使用站點(diǎn)更加簡單。,需要的朋友可以參考下2019-06-06
jQuery實(shí)現(xiàn)的縱向下拉菜單實(shí)例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的縱向下拉菜單,結(jié)合實(shí)例形式分析了jQuery動態(tài)操作頁面元素實(shí)現(xiàn)縱向下拉菜單的步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery上傳多張圖片帶進(jìn)度條樣式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦)
這篇文章主要介紹了jQuery通過ajax請求php遍歷json數(shù)組到table中代碼(推薦)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery圖片輪播插件代碼的相關(guān)資料,在各大網(wǎng)站都可以簡單圖片輪播效果，非常實(shí)用，需要的朋友可以參考下2016-05-05
基于JQuery的動態(tài)刪除Table表格的行和列的代碼
基于JQuery的動態(tài)刪除Table表格的行和列的代碼以前腳本之家也發(fā)布過相關(guān)的代碼，大家可以參考下。2011-05-05
詳解jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12
jQuery學(xué)習(xí)筆記之jQuery選擇器的使用
jQuery中最核心和最讓人愛不釋手的就是選擇器，下面就是各種選擇器代筆的意義。2010-12-12
這篇文章主要介紹了EasyUI加載完Html內(nèi)容樣式渲染完成后顯示的相關(guān)資料,需要的朋友可以參考下2016-07-07