jQuery UI 入門知識
1 jQuery UI
有時你僅僅是爲了實現一個漸變的動畫效果而不得不把javascrip 從新學習一遍而後書寫大量代碼。直到jQuery的出現，讓開發人員從一大堆繁瑣的js代碼中解脫，取而代之幾行jQuery代碼。現今，jQuery無疑已成爲最爲流行沒有之一的JavaScript類庫。javascript
而jQuery UI 則是在jQuery 基礎上開發的一套界面工具，幾乎包括了網頁上你所能想到和用到的插件以及動畫特效，讓一個毫無藝術感只知道碼字的碼農不費吹灰之力就能夠作出使人炫目的界面。讓你在作界面的時候隨便‘拿來’就用，還有一點就是，它是免費開源的，用戶可根據須要自定義甚至從新設計。css
2 爲我所用
下面以Tabs和Accordion插件來看看如何在項目中使用jQuery UI。其餘插件的詳盡使用文檔及演示在這裏能夠學習到，只不過是英文的。java
2.1Tabs
Tabs 形式的插件在網頁及桌面應用程序中都使用得至關普遍，能夠用做菜單，也可作爲一小部份內容的選項卡jquery
圖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文件的聲明：學習
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個列表項，名稱分別爲Tabs一、Tabs二、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
既然是用樣式表控制的，表明着咱們能夠隨意對它進行自定義，換顏色等，這在後面的應用樣式 裏介紹。
2.2Accordion
對於Accordion控件就有一些東西須要說的了。由於對於一個東西，若是它不夠靈活，不易擴展，會給使用者帶來很大的不便。
圖 5
2.2.1使用基本的Accordion
先來看一下如何將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
2.2.2實現打開多個標籤
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
2.2.3Accordion的嵌套
還有個問題就是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掉，那樣點擊標題就不會有摺疊打開動做了。
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樣式表的引用
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中把全部對圖片的調用路徑統統改正確後才能使主題正常工做。
3.2更改圖標
不只僅是顏色，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
相關鏈接
jQuery UI 官網
theme roller
- 1. Jquery 入門知識
- 2. jQuery入門知識點
- 3. JQuery UI 入門
- 4. 入門知識
- 5. 入門知識——Linux入門
- 6. jQuery心得1--jQuery入門知識串講1
- 7. springboot知識入門
- 8. Vue入門知識
- 9. Snap.svg 基本知識入門
- 10. Java入門知識
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Jquery 入門知識
- 2. jQuery入門知識點
- 3. JQuery UI 入門
- 4. 入門知識
- 5. 入門知識——Linux入門
- 6. jQuery心得1--jQuery入門知識串講1
- 7. springboot知識入門
- 8. Vue入門知識
- 9. Snap.svg 基本知識入門
- 10. Java入門知識