jQuery Tools——不可錯過的jQuery UI庫（二）

作者: IIduce 來源: css9 發布時間: 2009-12-22 17:58 閱讀: 30434 次推薦: 2 原文鏈接 [收藏]

在上篇對jQuery Tools做了總體的介紹，從本篇起開始介紹jQuery Tools的各個工具組件。

在進入正題前，還是想啰嗦一些東西，也許對jQuery Tools的理解會有所幫助。

jQueryTools的功能側重于信息展示和視覺效果，從網頁常用的功能點上改善用戶體驗和可閱讀性。這一點與其它一些JavascriptUI庫不同，它們可能會側重于一些桌面應用程序效果，諸如拖拽、滑動、排序等，這在富應用程序（RIA）中的應用可能會更多些。而jQueryTools可用于廣泛的網站設計中；
jQueryTools并不是一個框架性的東西，不具有什么學習難度，在掌握一些使用規則后，在頁面中引用了它的腳本文件就可以立即使用了。雖然它是基于jQuery的，但是并不意味著你需要掌握jQuery才能使用它。當然如果你能了解jQuery的諸如選擇器的簡單使用，更有助于掌握jQuery Tools；
jQuery Tools的使用嚴格遵循了javascript代碼不與css定義混合的原則。它在使用時僅僅是通過預定義的class來控制html，CSS樣式定義完全由你來控制。
類似于google提供了jquery的CDN服務，jQuery Tools也提供了它的CDN免費服務至2010年底，你可以使用以下方式引用它：
```
 
```
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
可惜的是該CDN目前沒有在亞洲設立服務器，官方說要到2009年秋，所以暫時就不建議用了。

不再啰嗦，言歸正傳看使用：

選項卡應用(Tabs)
示例一：選項卡效果在Web開發時經常會用到，下面先來看最簡單的實現

上面是最終要實現的效果。看一下代碼：

HTML:

<!-- 定義選項卡按鈕，注意最外層的class定義為tabs --> 
<ul class="tabs"> 
    <li><a href="#first">選項卡1</a></li> 
    <li><a href="#second">選項卡2</a></li> 
    <li><a href="#third">選項卡3</a></li> 
</ul> 
<!-- 定義選項卡切換的每個區域，注意最外層的class定義為panes --> 
<div class="panes"> 
    <div>第一個選項卡內容，<a href="#second">跳轉至選項卡2</a></div> 
    <div>第二個選項卡內容，<a href="#third">跳轉至選項卡3</a></div> 
    <div>第三個選項卡內容，<a href="#first">跳轉至選項卡1</a></div> 
</div>

Javascript：

$(function() { 
    // 將ul.tabs區域設定為選項卡，用來控制div.panes區域中最近一層的各div區域
   // 注意tabs和panes與html中class的對應關系
    $("ul.tabs").tabs("div.panes > div",{history: true}); 
});

說明：

CSS代碼，也就是整個樣式完全是由你來控制的。這里是上面選項卡用到的css，供你參考。使用css控制樣式時，需注意的一點是當前選項卡的class為“current”。
可設定選項卡錨點，通過鏈接在選項卡中切換
tabs中的參數{history: true}，使得選項卡與瀏覽器歷史的前進后退關聯在一起。不用的話可以不要這個參數。

示例二：通過鼠標滑過事件切換選項卡，看效果先：

HTML:

<!--定義選項卡區域，用id為products的div包起來-->
<div id="products">
<img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
<img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
<img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
</div>  
<!--定義pane區域，為每個區域定義相同的class：description-->
<div class="description" id="free"><div class="arrow"></div> .. 產品介紹一 .. </div> 
<div class="description" id="commercial"><div class="arrow"></div> .. 產品介紹二 .. </div> 
<div class="description" id="multidomain"><div class="arrow"/></div> .. 產品介紹三 .. </div>

Javascript:

$("#products").tabs("div.description", {event:'mouseover'});

說明：

CSS代碼，也就是整個樣式完全是由你來控制的。這里是上面選項卡用到的css，供你參考。
tabs中的參數{event:’mouseover’}，更改默認的點擊事件為鼠標劃過事件，這里你可以改為自定義事件。

示例三：創建折疊效果（手風琴效果），看效果先：

HTML

<div id="accordion"> 
    <h2>First pane</h2> 
    <div class="pane">... pane content1 ...</div> 
 
    <h2>Second pane</h2> 
    <div class="pane">... pane content2 ...</div> 
 
    <h2>Third pane</h2> 
    <div class="pane">... pane content3 ...</div> 
</div>

Javascript

//上面第一個效果的
$("#accordion").tabs("#accordion div.pane", { 
    tabs: 'h2',     //確定哪些區域為選項卡
    effect: 'slide'     //展開效果，slide為縱向滑動
});
 
//上面第二個效果的
$("#accordion").tabs("#accordion div", { 
    tabs: 'img',    //確定哪些區域為選項卡
    effect: 'horizontal'  //展開效果，horizontal為橫向滑動
});

說明：

這里是上面第一個效果用到的css，這里是第二個的，供你參考。
與前兩個示例的聲明方式不同，上面兩個效果在tabs方法的第二個參數的tabs屬性中確定哪些區域為選項卡。

Tabs選項卡總結：

從上面幾個示例的用法可以看到，調用Tabs效果的關鍵在于HTML的預定義。我們應當為選項卡區域設定一個id或者為每一個選項卡設定相同class，然后為每一個pane區域設定class。在調用tabs方法的時候，關鍵在于傳入上面定義的這兩個對象集合。了解到這一點，其余都就可以自由發揮了。
Tabs工具本身不具備任何CSS，CSS需要完全由你來控制，希望不會因為這種自由而難住你。
在官方示例中還有不少是上面沒有提到的，例如tabs中通過ajax填充pane、通過選項卡制作導航器等，這里去查看更多

通過Tabs的學習，想必大家對jquery tools有了進一步的了解。有什么要說的么，可以再下面留言討論。
在后面的文章中會繼續探討其它工具的使用示例，欲知后事如何，請坐好沙發，搬好小馬扎，且聽下回分解。