2013-4-8 藍藍設計的小編
轉載藍藍設計( m.qdjdjx.cn )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.cnblogs.com/Wayou/archive/2012/10/02/jquery_ui.html
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近項目中使用了一些插件來做頁面，這里把jQuery UI的使用分享出來，希望 對新手有幫助。文章結尾附源碼下載。
有時你僅僅是為了實現一個漸變的動畫效果而不得不把javascrip 重新學習一遍然后書寫大量代碼。直到jQuery的出現，讓開發人員從一大堆繁瑣的js代碼中解脫，取而代之幾行jQuery代碼。現今，jQuery無疑已成為最為流行沒有之一的JavaScript類庫。
而jQuery UI 則是在jQuery 基礎上開發的一套界面工具，幾乎包括了網頁上你所能想到和用到的插件以及動畫，讓一個毫無藝術感只知道碼字的碼農不費吹灰之力就可以做出令人炫目的界面。讓你在做界面的時候隨便‘拿來’就用，還有一點就是，它是免費開源的，用戶可根據需要自定義甚至重新設計。
下面以Tabs和Accordion插件來看看如何在項目中使用jQuery UI。其他插件的詳盡使用文檔及演示在這里可以學習到，只不過是英文的。
Tabs 形式的插件在網頁及桌面應用程序中都使用得相當廣泛，可以用作菜單，也可做為一小部分內容的選項卡
圖0
首先在VS2010新建一個MVC項目，要使用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文件的聲明：
1 <script src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript" ></script>
為了在頁面上呈現Tabs插件，我們需要定義一個Div，并且在<script>腳本代碼里面選中它，在它身上應用tabs方法。
1 <div id="tabs"> 2 </div> 3 4 <script type="text/javascript"> 5 6 $(document).ready(function () { 7 8 $("#tabs").tabs(); 9 10 })11 12 </script>
現在運行程序不會看到任何東西，因為我們還沒有往主體Div中定義要顯示的tab,只是定義好了一個可以放tabs的地方。現在tabs Div中定義一個無序列表，列表項決定了要顯示的標簽個數及要顯示的標簽名稱。
1 <div id="tabs"> 2 3 <ul> 4 5 <li><a href="#tabs-1">Tabs1</a></li> 6 7 <li><a href="#tabs-2">Tabs2</a></li> 8 9 <li><a href="#tabs-3">Tabs3</a></li> 10 11 </ul> 12 13 <div id="tabs-1"> 14 15 <p>content of tab one</p> 16 17 </div> 18 19 <div id="tabs-2"> 20 21 <p>content of tab two</p> 22 23 </div> 24 25 <div id="tabs-3"> 26 27 <p>content of tab three</p> 28 29 </div> 30 31 </div>
這里定義3個列表項，名稱分別為Tabs1、Tabs2、Tabs3，列表下方的三個Div對應著上面定義的三個標簽，用來呈現每個標簽里面要顯示的正文。頁面部分基本完工。運行程序：
圖 2
值得注意的是，進行到這一步并沒有出現圖0中的效果，tabs樣式沒有應用上。原因只可能有一個，那就是樣式表。后來谷歌一下果然是沒有把相應的樣式表包含到頁面。這在官方的Demo里也沒有提及，也沒給出相應的注意，我覺得這里Demo不該省略點如果重要的一句代碼的，不一定每個第一次使用jQuery UI人都能快速找到問題。對于每一個新手，在進行到這一步都需要去谷歌一下為什么效果沒出來。找到問題后解決起來就很簡單了。在頁面里加上對jQuery UI 樣式表的引用。
圖 3
最后完整的代碼大概是這樣的。
1 <link href="http://www.cnblogs.com/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/> 2 3 <script src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script> 4 5 <div id="tabs"> 6 7 <ul> 8 9 <li><a href="#tabs-1">Tabs1</a></li> 10 11 <li><a href="#tabs-2">Tabs2</a></li> 12 13 <li><a href="#tabs-3">Tabs3</a></li> 14 15 </ul> 16 17 <div id="tabs-1"> 18 19 <p>content of tab one</p> 20 21 </div> 22 23 <div id="tabs-2"> 24 25 <p>content of tab two</p> 26 27 </div> 28 29 <div id="tabs-3"> 30 31 <p>content of tab three</p> 32 33 </div> 34 35 </div> 36 37 <script type="text/javascript"> 38 39 $(document).ready(function () {40 41 $("#tabs").tabs();42 43 })44 45 </script>
由于是用的MVC模板生成的項目，所以在Content/themes/base文件夾里已經放入了jQuery UI的CSS樣式表，如果沒有，你需要單獨下載然后放到項目中，并在頁面正確引用。
現在再來刷新一下頁面，效果就出來了。
圖 4
既然是用樣式表控制的，代表著我們可以隨意對它進行自定義，換顏色等，這在后面的應用樣式 里介紹。
對于Accordion控件就有一些東西需要說的了。因為對于一個東西，如果它不夠靈活，不易擴展，會給使用者帶來很大的不便。
圖 5
先來看一下如何將Accordion插件應用起來。我們將它放到我們的Tabs1頁面里。同Tabs一樣，應用起來也非常的簡單，只需把相應的Div定義好，之后，在腳本總要所要做的工作也就是一句代碼的事。是不是體驗到了jQuery UI所帶來的便捷了。
將之前tabs-1 Div 中的<P>標簽及內容刪除掉，用如下的代碼替換。
1 <div id="tabs-1"> 2 3 <div id="accordion"> 4 5 <h3> 6 7 <a href="#">Section 1</a></h3> 8 9 <div> 10 11 <p>content of section 1</p> 12 13 </div> 14 15 <h3> 16 17 <a href="#">Section 2</a></h3> 18 19 <div> 20 21 <p>content of section 2</p> 22 23 </div> 24 25 <h3> 26 27 <a href="#">Section 3</a></h3> 28 29 <div> 30 31 <p>content of section 3</p> 32 33 </div> 34 35 </div> 36 37 </div>
其中id為accordion的外圍Div是容器，在腳本代碼里面選中它然后對它應用accordion方法。
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion").accordion(); 8 9 })10 11 </script>
之后，里面的每個<a>標簽就會被解析成一個可以點擊的標題，<a>標簽后緊跟<div>用于放置本小塊的內容。最后效果如下圖。
圖 6
需要注意的地方有兩點。一是樣式，每個jQuery UI其實都用了在上面說的那個樣式表，如果先前沒將它引用進頁面，這里的Accordion效果也是不會出來的。二是這里的格式需要嚴格按照一個<a>標簽然后跟一個<div>標簽的形式，這樣的交叉形式如果被打亂，呈現出來的結果將是你所不愿意扯的。比如你在<a>跟兩個<div>：
1 <div id="accordion"> 2 3 <h3> 4 5 <a href="#">Section 1</a></h3> 6 7 <div> 8 9 <p>content of section 1.1</p> 10 11 </div> 12 13 <div> 14 15 <p>content of section 1.2</p> 16 17 </div> 18 19 <h3> 20 21 <a href="#">Section 2</a></h3> 22 23 <div> 24 25 <p>content of section 2</p> 26 27 </div> 28 29 <h3> 30 31 <a href="#">Section 3</a></h3> 32 33 <div> 34 35 <p>content of section 3</p> 36 37 </div> 38 39 </div>
你原本以為 這兩個div會被包在第一個secion里面，但其實真實的效果會是有點離譜的：
圖 7
是不是有點坑爹。那如果我需要在section里進行布局，非要放兩個Div或者更多呢。那就必需把這些內容裝到一個div中再放到section1里面，這樣就不會出錯了。為了顯示出確實是放了兩個Div，給每個Div加上邊框。
1 <div id="accordion"> 2 3 <h3> 4 5 <a href="#">Section 1</a></h3> 6 7 <div> 8 9 <div style="border: 1px solid gray"> 10 11 <p>content of section 1.1</p> 12 13 </div> 14 15 <div style="border: 1px solid gray"> 16 17 <p>content of section 1.2</p> 18 19 </div> 20 21 </div> 22 23 <h3> 24 25 <a href="#">Section 2</a></h3> 26 27 <div> 28 29 <p>content of section 2</p> 30 31 </div> 32 33 <h3> 34 35 <a href="#">Section 3</a></h3> 36 37 <div> 38 39 <p>content of section 3</p> 40 41 </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并放入相應內容:
1 <div id="tabs-1"> 2 3 <div id="accordion1"> 4 5 <h3><a href="#">Section 1</a></h3> 6 7 <div>content of section 1</div> 8 9 </div> 10 11 <div id="accordion2"> 12 13 <h3><a href="#">Section 2</a></h3> 14 15 <div>content of section 2</div> 16 17 </div> 18 19 <div id="accordion3"> 20 21 <h3><a href="#">Section 3</a></h3> 22 23 <div>content of section 3</div> 24 25 </div> 26 27 </div>
然后修改腳本代碼：
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion(); 8 9 $("#accordion2").accordion();10 11 $("#accordion3").accordion();12 13 })14 15 </script>
運行程序，發現三個secton同時打開了，并且還不能關閉！這顯然也不是我們想要的結果。原因很簡單，如果上面所說的accordion這個插件有且僅有一個section是被打開的，每個accordion里我們只定義了一個section，那這個section毫無疑問應該處于被打開狀態，由于只有它一個，把它關閉了之后沒有其他section可以打開，所以索性我們想關它都關不掉了。
但幸運的是，我們可以通過設置accordion的collapsible為true來讓這個唯一的section可以進行折疊打開操作。只需修改腳本如下：
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion({ collapsible: true }); 8 9 $("#accordion2").accordion({ collapsible: true });10 11 $("#accordion3").accordion({ collapsible: true });12 13 })14 15 </script>
再次運行程序，Okay，一切如我們所想的那樣。
圖 10
還有個問題就是accordion的嵌套。一開始我在嘗試去實現這個功能時也是遇到了些麻煩的。
比如現在我們要在section 1里面想再放一個accordion，給它取名為subaccordion吧，需要注意的地方就是 這個subaccordion一定要放在“content of section1”這個Div中，其他任何形式的擺放都不會出現正確的效果。如果你覺得直接在Accordion 1里面加一個<a>標簽再加一個<div>，就會正確地在Section1里面解析出一個內嵌于Accortion1的Accordion，那你就錯了。最后的代碼及效果如下。
1 <div id="tabs-1"> 2 3 <div id="accordion1"> 4 5 <h3><a href="#">Section 1</a></h3> 6 7 <div> 8 9 <div id="subaccortion"> 10 11 <h3><a href="#">subaccortion</a></h3> 12 13 <div>content of subaccortion</div> 14 15 </div> 16 17 </div> 18 19 </div> 20 21 <div id="accordion2"> 22 ........
圖 11
有點不完美的地方就是Section1出現了滾動條，下面我們設置一下高度屬性并且讓里面那個子accortion一開始處于折疊狀態。
修改腳本代碼如下：
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion({ collapsible: true, autoHeight: false }); 8 9 $("#subaccortion").accordion({ collapsible: true, active:false });10 11 $("#accordion2").accordion({ collapsible: true, autoHeight: false });12 13 $("#accordion3").accordion({ collapsible: true, autoHeight: false });14 15 })16 17 </script>
圖 12
從這里你已經可以看到，可以設置任意一個標簽一開始是處于折疊還是打開狀態。當然也可以將一個accortion disable掉，那樣點擊標題就不會有折疊打開動作了。
現在，我們是可以方便地使用jQuery UI 做出界面了。但試想，那么多人如果都在用，會不會把整個互聯網搞得千篇一律，用戶一打開瀏覽器走到哪里看到的都是同一個東西，會不會有點摸不著北。并且我們也需要在使用這些插件的時候進行一些調整以符合我們自己網站的主題，色調等。
jQuery UI支持用戶定義樣式，你甚至可以更改實現代碼來進行更高級的自定義，如果你有能力的話。
你可以修改相應的css文件以達到修改樣式的目的，但這不如到官網的主題網站去下載自己需要的主題，并且還可以在線編輯出自己想要的主題。
進入theme roller后，選擇自己喜歡的主題樣式下載下來。
圖 13
解壓后進行到css文件夾，將jquery-ui-1.8.24.custom.css文件和images文件夾復制到項目中適當位置，然后需要在頁面正確地引用到，便可將樣式應用上。不管你應用什么主題，主題所使用的圖片名字都是一樣的，只是顏色不一樣而以。由于本例是用MVC模板生成的項目，所以項目中的imges文件夾中已經存在的圖片和下載下來的圖片可能部分重名，復制時詢問是否替換，點擊確實即可。
圖 14
圖 15
這時把之前寫的樣式表引用改成對這個customer樣式表的引用
1 <link href="http://www.cnblogs.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文件夾的相對位置最好不要改變，也就是把它們兩個放一起，因為css文件中會調用images文件夾中的圖片，如果你改變了他們的相對位置，就需要到css中把所有對圖片的調用路徑通通改正確后才能使主題正常工作。
不僅僅是顏色，jQuery UI的主題里面，也為我們預設了很多圖標可供選擇，在網頁上我們可以看到有一大堆豐富的圖標。這些圖標的顏色對應你所下載的主題，包含在了imges文件夾中。
圖 17
問題是在這么多圖標中如何準確指定我們想要的那一個。比如現在想把Accordion標題左邊的三角形圖標改成線條形的尖角形狀。
下面只是個人提供的一個小技巧。將鼠標指到你想要的圖標身上，會出現tooltip提示文本，這個文字就對應這個圖標。
圖 18
現在我們得到這個名字后，就可以到腳本代碼里去進行修改了。
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion({ collapsible: true, autoHeight: false, 8 9 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }10 11 });12 13 $("#subaccortion").accordion({ collapsible: true, active:false ,14 15 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }16 17 });18 19 $("#accordion2").accordion({ collapsible: true, autoHeight: false ,20 21 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }22 23 });24 25 $("#accordion3").accordion({ collapsible: true, autoHeight: false,26 27 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }28 29 });30 31 })32 33 </script>
最后來看下效果,perfect.
圖19
到這里基本介紹了jQuery UI的使用過程。當然，jQuery UI不只包含tabs和accordion 這兩個插件，其他的插件及效果的使用也相差不多，詳盡的使用及設置方法都可以在官方的文檔及Demo中找到答案。
后記：因為jQuery已經火得一塌糊涂了,如果再結合jQuery UI，將更大程度上減輕程序員的負擔。在享受這些便利的同時，我們不得不默默地內心要感謝一下那些為jQuery及UI做出奉獻的同行們，同時我們也能盡我們自己的一分力量，來豐富擴展jQuery的插件及UI庫。
例子源碼下載：http://files.cnblogs.com/Wayou/jQueryUIExample.rar
出品公司：
藍藍設計(北京蘭亭妙微科技有限公司)是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的視覺設計、ui界面設計、網站建設、用戶體驗服務，涉及互聯網、IT軟件、電子、銀行、保健品等多個行業，并建立了良好的口碑，積累了豐富的經驗。
全國統一服務熱線 400-608-6026 QQ:896757335