Jquery Tabs 插件简介-更友好地组织你的页面

转自：http://www.cnblogs.com/ywqu/archive/2009/09/02/1558423.html

关于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      -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 ：背景变暗效果

$(document).ready(function(){dp.SyntaxHighlighter.HighlightAll('code');});

原文链接：
http://blog.csdn.net/vanessa219/article/details/4512968