[JQuery]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

效果如下:

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 :背景变暗效果

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏