[Jquery Plugin]Jquery Tabs 外掛程式簡介-更友好地組織你的頁面

關於Jquery Tab外掛程式，比較流行的是jQuery UI Tabs，最近此外掛程式也已經有了更新,地址為http://stilbuero.de/jquery/tabs_3/ ，目前國內很多網站也在使用此外掛程式，希望大家有時間了試用一下。

今天突然發現了一個更加輕量級的，功能更加豐富的 Jquery Tab外掛程式。先展示一下其功能；

1、簡單配置一下就可以實現如下效果：

http://flowplayer.org/tools/demos/tabs/index.html

2、擴充CSS樣式就可以定做自己的tabs

/* alternate colors: skin2 */ 
ul.skin2 a { 
    background-color:#89a;         
    color:#fff !important; 
} 
 
/* mouseover state */ 
ul.skin2 a:hover { 
    background-color:#678; 
} 
 
/* active tab */ 
ul.skin2 a.current { 
    background-color:#4F5C6A; 
    border-bottom:2px solid #4F5C6A;     
} 
 
/* tab pane with background gradient */ 
div.skin2 div { 
    color:#fff; 
    background:#234 url(/img/global/gradient/h300.png) repeat-x scroll 0 -50px; 
    min-height:200px; 
}

效果如下：

http://flowplayer.org/tools/demos/tabs/skins.html

3、只是瀏覽器的【前進】和【後退】

 

Code
$(function() {     $("ul.css-tabs").tabs("div.css-panes > div", {history: true}); });

效果如下：

http://flowplayer.org/tools/demos/tabs/history.html

4.通過Ajax調用每個Tab的內容，只有第一次點擊Tab按鈕的時候 調用Tab頁內容

使用非常簡單，效果如下：

http://flowplayer.org/tools/demos/tabs/ajax.html

5、Tab嚮導，比如形成購物車訂單過程

完善個人資訊->修改購物車商品->查看訂單

效果如下：http://flowplayer.org/tools/demos/tabs/wizard.html

此種功能特別有用。

6、其他的還有手風琴效果，自己發掘吧，顯示地址如下：

http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

 

此外掛程式的如下：

http://flowplayer.org/tools/download.html

jquery.tools.min.js是一個UI功能包，還包括其他的一個UI特效

Tooltip ：很不錯的提示功能外掛程式

Scrollable ：滾動效果外掛程式

Overlay ：很好用的遮罩層外掛程式

Expose ：背景變暗效果