Sym - 一个用 Java 实现的现代化社区平台 • 源码注册

Pipe - 小而美的开源博客平台 • 体验皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步