jQuery Tools——不可錯(cuò)過的jQuery UI庫(kù)（二）

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

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

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

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

選項(xiàng)卡應(yīng)用(Tabs)

示例一：選項(xiàng)卡效果在Web開發(fā)時(shí)經(jīng)常會(huì)用到，下面先來看最簡(jiǎn)單的實(shí)現(xiàn)

上面是最終要實(shí)現(xiàn)的效果?？匆幌麓a：

HTML:

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

Javascript：

$(function() {// 將ul.tabs區(qū)域設(shè)定為選項(xiàng)卡，用來控制div.panes區(qū)域中最近一層的各div區(qū)域// 注意tabs和panes與html中class的對(duì)應(yīng)關(guān)系$("ul.tabs").tabs("div.panes > div",{history: true});});

說明：

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

示例二：通過鼠標(biāo)滑過事件切換選項(xiàng)卡，看效果先：

HTML:

<!--定義選項(xiàng)卡區(qū)域，用id為products的div包起來--><div id="products"><img src="http://image7.360doc.com/DownloadImg/2010/03/0117/2435431_2.png" alt="Free version" /><img src="http://image7.360doc.com/DownloadImg/2010/03/0117/2435431_3.png" alt="Commercial version" /><img src="http://image7.360doc.com/DownloadImg/2010/03/0117/2435431_4.png" alt="Multidomain version" /></div><!--定義pane區(qū)域，為每個(gè)區(qū)域定義相同的class：description--><div class="description" id="free"><div class="arrow"></div> .. 產(chǎn)品介紹一 .. </div><div class="description" id="commercial"><div class="arrow"></div> .. 產(chǎn)品介紹二 .. </div><div class="description" id="multidomain"><div class="arrow"/></div> .. 產(chǎn)品介紹三 .. </div>

Javascript:

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

說明：

CSS代碼，也就是整個(gè)樣式完全是由你來控制的。這里是上面選項(xiàng)卡用到的css，供你參考。
tabs中的參數(shù){event:’mouseover’}，更改默認(rèn)的點(diǎn)擊事件為鼠標(biāo)劃過事件，這里你可以改為自定義事件。

示例三：創(chuàng)建折疊效果（手風(fēng)琴效果），看效果先：

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

//上面第一個(gè)效果的$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', //確定哪些區(qū)域?yàn)檫x項(xiàng)卡effect: 'slide' //展開效果，slide為縱向滑動(dòng)}); //上面第二個(gè)效果的$("#accordion").tabs("#accordion div", {tabs: 'img', //確定哪些區(qū)域?yàn)檫x項(xiàng)卡effect: 'horizontal' //展開效果，horizontal為橫向滑動(dòng)});

說明：

這里是上面第一個(gè)效果用到的css，這里是第二個(gè)的，供你參考。
與前兩個(gè)示例的聲明方式不同，上面兩個(gè)效果在tabs方法的第二個(gè)參數(shù)的tabs屬性中確定哪些區(qū)域?yàn)檫x項(xiàng)卡。

Tabs選項(xiàng)卡總結(jié)：

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

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

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

jQuery輕量級(jí)響應(yīng)式扁平風(fēng)格tabs選項(xiàng)卡插件

基于swiper的Tab選項(xiàng)卡

python測(cè)試開發(fā)django-153.bootstrap導(dǎo)航-標(biāo)簽頁(yè)切換(nav-tabs)

jQuery實(shí)現(xiàn)選項(xiàng)卡Tab菜單滾動(dòng)

jQuery單頁(yè)滾動(dòng)插件pagePiling.js

Jquery EasyUi實(shí)戰(zhàn)教程布局篇

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

jQuery Tools——不可錯(cuò)過的jQuery UI庫(kù)（二）