1 jQuery UI
2 為我所用
2.1 Tabs
2.2 Accordion
2.2.1 使用基本的Accordion 2.2.1 使用基本的Accordion 3 給外掛應用程式主題－Theme Roller
3.1 更改配色
3.2 更改圖示
4 相關連結
jQuery UI
4 相關連結
jQuery UI
圖 2
值得注意的是，進行到這一步並沒有出現圖0中的效果，tabs樣式沒有應用上。原因只可能有一個，就是樣式表。後來谷歌一下果然是沒有把對應的樣式表包含到頁面。這在官方的Demo裡也沒有提及，也沒給出相應的注意，我覺得這裡Demo不該省略點如果重要的一句代碼的，不一定每個第一次使用jQuery UI人都能快速找到問題。對於每一個新手，在進行到這一步都需要去谷歌一下為什麼效果沒出來。找到問題後解決就很簡單了。在頁面裡加上jQuery UI 樣式表的引用。
圖 3
最後完整的程式碼大概是這樣的。
現在再來刷新頁面，效果就出來了。
圖 4
既然是用樣式表控制的，代表著我們可以隨意對它進行自定義，換顏色等，這在後面的應用樣式 裡介紹。
對於Accordion控制就有一些東西需要說的了。因為對於一個東西，如果它不夠靈活，不易擴展，會給使用者帶來很大的不便。
圖 5
先來看看如何將Accordion插件套用起來。我們將它放到我們的Tabs1頁面。就像Tabs一樣，應用起來也非常的簡單，只要把對應的Div定義好，之後，在腳本總要要做的工作也就是一句程式碼的事。是不是體驗到了jQuery UI所帶來的便捷了。
將先前tabs-1 Div 中的
標籤及內容刪除掉，並用如下的程式碼取代。
圖 7 是不是有點坑爹。那如果我需要在section進行佈局，非要放兩個Div或更多呢。那就必要把這些內容裝到一個div中再放到section1裡面，這樣就不會出錯了。為了顯示確實是放了兩個Div，給每個Div加上邊框。 content of section 1.1 content of section 1.2 content of section 2 content of section 3 圖 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並放入對應內容: 圖 10 還有個問題就是accordion的巢狀。一開始我在嘗試去實現這個功能時也是遇到了些麻煩的。 例如現在我們要在section 1裡面想再放一個accordion，給它取名為subaccordion吧，需要注意的地方就是這個subaccordion一定要放在“content of section1”這個Div中，其他任何形式的擺放都不會出現正確的效果。如果你覺得直接在Accordion 1裡面加一個標籤再加一個
圖 12 從這裡你已經可以看到，可以設定任一個標籤一開始是處於折疊還是開啟狀態。當然也可以將一個accortion disable掉，這樣點選標題就不會有折疊打開動作了。 3 給外掛應用程式主題－Theme Roller 3.1更改配色 現在，我們是可以方便地使用jQuery UI 做出介面了。但試想，那麼多人如果都在用，會不會把整個網路搞得千篇一律，用戶一打開瀏覽器走到哪裡看到的都是同一個東西，會不會有點摸不著北。而我們也需要在使用這些外掛的時候進行一些調整以符合我們自己網站的主題，色調等。 jQuery UI支援使用者定義樣式，甚至可以更改實作程式碼來進行更進階的自訂，如果你有能力的話。 你可以修改對應的css檔案以達到修改樣式的目的，但這不如到官網的主題網站去下載自己需要的主題，並且還可以在線編輯出自己想要的主題。 進入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中把所有對圖片的調用路徑通通改正確後才能使主題正常工作。 3.2更改圖示 不只是顏色，jQuery UI的主題裡面，也為我們預設了許多圖示可供選擇，在網頁上我們可以看到有一大堆豐富的圖示。這些圖示的顏色對應你所下載的主題，包含在了imges資料夾中。
圖 17 問題是在這麼多圖示中如何準確指定我們想要的那一個。例如現在想把Accordion標題左邊的三角形圖示改成線條形狀的尖角形狀。 下面只是個人提供的一個小技巧。將滑鼠指到你想要的圖示身上，會出現tooltip提示文本，這個文字就對應這個圖示。
圖 18 圖19 到這裡基本介紹了jQuery UI的使用過程。當然，jQuery UI不只包含tabs和accordion 這兩個插件，其他的插件及效果的使用也相差不多，詳盡的使用及設定方法都可以在官方的文檔及Demo中找到答案。 後記：因為jQuery已經火得一塌糊塗了,如果再結合jQuery UI，將更大程度上減輕程式設計師的負擔。在享受這些便利的同時，我們不得不默默地內心要感謝一下那些為jQuery及UI做出奉獻的同行們，同時我們也能盡我們自己的一分力量，來豐富擴展jQuery的插件及UI庫。 範例原始碼下載：http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar 
之後，裡面的每個標籤就會被解析成一個可以點擊的標題，標籤後緊跟用於放置本小塊的內容。最後效果如下圖。
圖 6
需要注意的地方有兩點。一是樣式，每個jQuery UI其實都用了在上面說的那個樣式表，如果先前沒將它引用進頁面，這裡的Accordion效果也是不會出來的。二是這裡的格式需要嚴格按照一個標籤然後跟一個
標籤的形式，這樣的交叉形式如果被打亂，呈現出來的結果將是你所不願意扯的。例如你在跟兩個
你原本以為 這兩個div會被包在第一個secion裡面，但其實真實的效果會是有點離譜的：
複製程式碼 程式碼如下:
Section 1
Section 2
Section 3
複製程式碼
複製程式碼
複製程式碼
複製程式碼
然後修改腳本程式碼： 複製程式碼 程式碼複製程式碼 程式碼 >
再次運行程序，Okay，一切如我們所想的那樣。
，就會正確地在Section1裡面解析出一個內嵌於Accortion1的Accordion，那你就錯了。最後的程式碼及效果如下。
複製程式碼 程式碼如下:
........ 
有點不完美的地方就是Section1出現了滾動條，下面我們設定一下高度屬性並且讓裡面那個子accortion一開始處於折疊狀態。
})
程式碼如下:
程式碼如下
最後來看效果,perfect.
相關連線jQuery UI 長
相關連線jQuery UI 長 theme roller
http://jqueryui.com/themeroller/ jQuery 學習：張子秋《從零開始學習jQuery》系列：
http://www.jb51.net/article/24908.htm
