最近項目中使用了一些插件來做頁面，這裡把jQuery UI的使用分享出來，希望 對新手有幫助。文章結尾附源碼下載下傳。
有時你僅僅是為了實作一個漸變的動畫效果而不得不把javascrip 重新學習一遍然後書寫大量代碼。直到jQuery的出現，讓開發人員從一大堆繁瑣的js代碼中解脫，取而代之幾行jQuery代碼。現今，jQuery無疑已成為最為流行沒有之一的JavaScript類庫。
而jQuery UI 則是在jQuery 基礎上開發的一套界面工具，幾乎包括了網頁上你所能想到和用到的插件以及動畫特效，讓一個毫無藝術感隻知道碼字的碼農不費吹灰之力就可以做出令人炫目的界面。讓你在做界面的時候随便‘拿來’就用，還有一點就是，它是免費開源的，使用者可根據需要自定義甚至重新設計。
Tabs 形式的插件在網頁及桌面應用程式中都使用得相當廣泛，可以用作菜單，也可做為一小部分内容的頁籤
圖0
首先，要使用jQuery UI,首先要把jQuery及jQuery UI 腳本檔案包含在項目當中，并且相關頁面要用<script>标簽進行引用。當我們建立好一個MVC項目後，在Scripts檔案夾裡，系統已經自動把jQuery及jQuery UI 腳本檔案包含在項目當中了（如圖1）。
圖 1
圖中jquery-1.5.1-vsdoc.js為包含完整提示注釋的版本，在VS裡編寫代碼時會有智能地顯示提示資訊及注釋；jquery-1.5.1.js為标準版本；帶min的為壓縮精簡後的版本，為的是在用戶端減少下載下傳時間。一般頁面中我們會使用精簡的版本，隻要項目檔案夾包含jquery-1.5.1-vsdoc.js，VS會自動調用裡面的提示資訊。
現在需要做的就是在頁面将它包含進來。由于建立好項目後，系統在Site.Mater頁面中已經将jQuery引用到頁面，這意味着所有使用了母版頁的頁面都預設引用了jQuery,是以我們在index頁面隻需要添加對是jQuery UI檔案的聲明：
為了在頁面上呈現Tabs插件，我們需要定義一個Div，并且在<script>腳本代碼裡面選中它，在它身上應用tabs方法。
現在運作程式不會看到任何東西，因為我們還沒有往主體Div中定義要顯示的tab,隻是定義好了一個可以放tabs的地方。現在tabs Div中定義一個無序清單，清單項決定了要顯示的标簽個數及要顯示的标簽名稱。
這裡定義3個清單項，名稱分别為Tabs1、Tabs2、Tabs3，清單下方的三個Div對應着上面定義的三個标簽，用來呈現每個标簽裡面要顯示的正文。頁面部分基本完工。運作程式：
圖 2
值得注意的是，進行到這一步并沒有出現圖0中的效果，tabs樣式沒有應用上。原因隻可能有一個，那就是樣式表。後來谷歌一下果然是沒有把相應的樣式表包含到頁面。這在官方的Demo裡也沒有提及，也沒給出相應的注意，我覺得這裡Demo不該省略點如果重要的一句代碼的，不一定每個第一次使用jQuery UI人都能快速找到問題。對于每一個新手，在進行到這一步都需要去谷歌一下為什麼效果沒出來。找到問題後解決起來就很簡單了。在頁面裡加上對jQuery UI 樣式表的引用。
圖 3
最後完整的代碼大概是這樣的。
由于是用的MVC模闆生成的項目，是以在Content/themes/base檔案夾裡已經放入了jQuery UI的CSS樣式表，如果沒有，你需要單獨下載下傳然後放到項目中，并在頁面正确引用。
現在再來重新整理一下頁面，效果就出來了。
圖 4
既然是用樣式表控制的，代表着我們可以随意對它進行自定義，換顔色等，這在後面的應用樣式 裡介紹。
對于Accordion控件就有一些東西需要說的了。因為對于一個東西，如果它不夠靈活，不易擴充，會給使用者帶來很大的不便。
圖 5
先來看一下如何将Accordion插件應用起來。我們将它放到我們的Tabs1頁面裡。同Tabs一樣，應用起來也非常的簡單，隻需把相應的Div定義好，之後，在腳本總要所要做的工作也就是一句代碼的事。是不是體驗到了jQuery UI所帶來的便捷了。
将之前tabs-1 Div 中的<P>标簽及内容删除掉，用如下的代碼替換。
其中id為accordion的外圍Div是容器，在腳本代碼裡面選中它然後對它應用accordion方法。
之後，裡面的每個<a>标簽就會被解析成一個可以點選的标題，<a>标簽後緊跟<div>用于放置本小塊的内容。最後效果如下圖。
圖 6
需要注意的地方有兩點。一是樣式，每個jQuery UI其實都用了在上面說的那個樣式表，如果先前沒将它引用進頁面，這裡的Accordion效果也是不會出來的。二是這裡的格式需要嚴格按照一個<a>标簽然後跟一個<div>标簽的形式，這樣的交叉形式如果被打亂，呈現出來的結果将是你所不願意扯的。比如你在<a>跟兩個<div>：
你原本以為 這兩個div會被包在第一個secion裡面，但其實真實的效果會是有點離譜的：
圖 7
是不是有點坑爹。那如果我需要在section裡進行布局，非要放兩個Div或者更多呢。那就必需把這些内容裝到一個div中再放到section1裡面，這樣就不會出錯了。為了顯示出确實是放了兩個Div，給每個Div加上邊框。
圖 8
jQuery UI Accordion最大的一個硬傷也是最讓人蛋疼的特性就是同時隻能打開一個标簽，比如Section1被點開了，其他Secton必然處于閉合狀态。如果我想實作同時有幾個标簽處于打開狀态呢，并且我不希望打開的标簽因為我點選了另外的标簽而關閉掉。很遺憾，這個插件并不有提供相應的Option。更牛逼的是，在官方的Demo中明确說了，如果你非要讓多個标簽同時處于打開狀态，那你就不要用我們的Accordion好了，愛用啥用啥，反正我們就是要讓它隻支援一個标簽被打開。
圖 9
好吧，我還沒強大到可以重寫這個Accordion插件，于是我谷歌“expander”” multi open accordion”之類的，确實還是有很多朋友是有這樣的需求的，并且也有牛人給出了一些解決方法，但都有點複雜。最後的最後，我突然頓悟，把每個section都定義成accordion不就行了嘛。一個acction同時隻能打開一個secton，如果我想要每個section都可任意打開關閉而不影響别的部分，那把每個section用accordion代替就好了，并且accordion裡隻定義一個section。
說起來有點暈，下面修改之前的代碼，定義id分别為accordion1,accordion2,accordion3三個div并放入相應内容:
然後修改腳本代碼：
運作程式，發現三個secton同時打開了，并且還不能關閉！這顯然也不是我們想要的結果。原因很簡單，如果上面所說的accordion這個插件有且僅有一個section是被打開的，每個accordion裡我們隻定義了一個section，那這個section毫無疑問應該處于被打開狀态，由于隻有它一個，把它關閉了之後沒有其他section可以打開，是以索性我們想關它都關不掉了。
但幸運的是，我們可以通過設定accordion的collapsible為true來讓這個唯一的section可以進行折疊打開操作。隻需修改腳本如下：
再次運作程式，Okay，一切如我們所想的那樣。
圖 10
還有個問題就是accordion的嵌套。一開始我在嘗試去實作這個功能時也是遇到了些麻煩的。
比如現在我們要在section 1裡面想再放一個accordion，給它取名為subaccordion吧，需要注意的地方就是 這個subaccordion一定要放在“content of section1”這個Div中，其他任何形式的擺放都不會出現正确的效果。如果你覺得直接在Accordion 1裡面加一個<a>标簽再加一個<div>，就會正确地在Section1裡面解析出一個内嵌于Accortion1的Accordion，那你就錯了。最後的代碼及效果如下。
圖 11
有點不完美的地方就是Section1出現了滾動條，下面我們設定一下高度屬性并且讓裡面那個子accortion一開始處于折疊狀态。
修改腳本代碼如下：
圖 12
從這裡你已經可以看到，可以設定任意一個标簽一開始是處于折疊還是打開狀态。當然也可以将一個accortion disable掉，那樣點選标題就不會有折疊打開動作了。
現在，我們是可以友善地使用jQuery UI 做出界面了。但試想，那麼多人如果都在用，會不會把整個網際網路搞得千篇一律，使用者一打開浏覽器走到哪裡看到的都是同一個東西，會不會有點摸不着北。并且我們也需要在使用這些插件的時候進行一些調整以符合我們自己網站的主題，色調等。
jQuery UI支援使用者定義樣式，你甚至可以更改實作代碼來進行更進階的自定義，如果你有能力的話。
進入theme roller後，選擇自己喜歡的主題樣式下載下傳下來。
圖 13
解壓後進行到css檔案夾，将jquery-ui-1.8.24.custom.css檔案和images檔案夾複制到項目中适當位置，然後需要在頁面正确地引用到，便可将樣式應用上。不管你應用什麼主題，主題所使用的圖檔名字都是一樣的，隻是顔色不一樣而以。由于本例是用MVC模闆生成的項目，是以項目中的imges檔案夾中已經存在的圖檔和下載下傳下來的圖檔可能部分重名，複制時詢問是否替換，點選确實即可。
圖 14
圖 15
這時把之前寫的樣式表引用改成對這個customer樣式表的引用
然後去重新整理頁面，效果如下圖：
圖 16
需要注意的是jquery-ui-1.8.24.custom.css與images檔案夾的相對位置最好不要改變，也就是把它們兩個放一起，因為css檔案中會調用images檔案夾中的圖檔，如果你改變了他們的相對位置，就需要到css中把所有對圖檔的調用路徑通通改正确後才能使主題正常工作。
不僅僅是顔色，jQuery UI的主題裡面，也為我們預設了很多圖示可供選擇，在網頁上我們可以看到有一大堆豐富的圖示。這些圖示的顔色對應你所下載下傳的主題，包含在了imges檔案夾中。
圖 17
問題是在這麼多圖示中如何準确指定我們想要的那一個。比如現在想把Accordion标題左邊的三角形圖示改成線條形的尖角形狀。
下面隻是個人提供的一個小技巧。将滑鼠指到你想要的圖示身上，會出現tooltip提示文本，這個文字就對應這個圖示。
圖 18
現在我們得到這個名字後，就可以到腳本代碼裡去進行修改了。
最後來看下效果,perfect.
圖19
到這裡基本介紹了jQuery UI的使用過程。當然，jQuery UI不隻包含tabs和accordion 這兩個插件，其他的插件及效果的使用也相差不多，詳盡的使用及設定方法都可以在官方的文檔及Demo中找到答案。
後記：因為jQuery已經火得一塌糊塗了,如果再結合jQuery UI，将更大程度上減輕程式員的負擔。在享受這些便利的同時，我們不得不默默地内心要感謝一下那些為jQuery及UI做出奉獻的同行們，同時我們也能盡我們自己的一分力量，來豐富擴充jQuery的插件及UI庫。
jQuery UI 官網
<a href="http://jqueryui.com/">http://jqueryui.com/</a>
theme roller
<a href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a>