Vanessa

大前端的点滴生活

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


<span class="css__comment"><span style="color: #808000;">/<em> alternate colors: skin2 </em>/</span><br/></span><br/> <br/><br/><strong><span class="css__element"><span style="color: #800080;">ul</span><br/></span><br/><span class="css__class"><span style="color: #cc0066;">.skin2</span><br/></span><br/></strong><br/> <span class="css__element"><strong><span style="color: #800080;">a</span><br/></strong><br/></span><br/> { <br/><br/>    <span class="css__property"><span style="color: #330066;">background-color:</span><br/></span><br/><span class="css__color"><span style="color: #008000;">#89a</span><br/></span><br/>;         <br/><br/>    <span class="css__property"><span style="color: #330066;">color:</span><br/></span><br/><span class="css__color"><span style="color: #008000;">#fff</span><br/></span><br/> !important; <br/><br/>} <br/><br/> <br/><br/><span class="css__comment"><span style="color: #808000;">/<em> mouseover state </em>/</span><br/></span><br/> <br/><br/><strong><span class="css__element"><span style="color: #800080;">ul</span><br/></span><br/><span class="css__class"><span style="color: #cc0066;">.skin2</span><br/></span><br/></strong><br/> <span class="css__element"><strong><span style="color: #800080;">a</span><br/></strong><br/></span><br/><span class="css__pseudo"><span style="color: #cc9900;">:hover</span><br/></span><br/> { <br/><br/>    <span class="css__property"><span style="color: #330066;">background-color:</span><br/></span><br/><span class="css__color"><span style="color: #008000;">#678</span><br/></span><br/>; <br/><br/>} <br/><br/> <br/><br/><span class="css__comment"><span style="color: #808000;">/<em> active tab </em>/</span><br/></span><br/> <br/><br/><strong><span class="css__element"><span style="color: #800080;">ul</span><br/></span><br/><span class="css__class"><span style="color: #cc0066;">.skin2</span><br/></span><br/></strong><br/> <strong><span class="css__element"><span style="color: #800080;">a</span><br/></span><br/><span class="css__class"><span style="color: #cc0066;">.current</span><br/></span><br/></strong><br/> { <br/><br/>    <span class="css__property"><span style="color: #330066;">background-color:</span><br/></span><br/><span class="css__color"><span style="color: #008000;">#4F5C6A</span><br/></span><br/>; <br/><br/>    <span class="css__property"><span style="color: #330066;">border-bottom:</span><br/></span><br/><span class="css__number"><span style="color: #ff0000;">2px</span><br/></span><br/> <span class="css__value"><span style="color: #3366ff;">solid</span><br/></span><br/> <span class="css__color"><span style="color: #008000;">#4F5C6A</span><br/></span><br/>;     <br/><br/>} <br/><br/> <br/><br/><span class="css__comment"><span style="color: #808000;">/<em> tab pane with background gradient </em>/</span><br/></span><br/> <br/><br/><strong><span class="css__element"><span style="color: #800080;">div</span><br/></span><br/><span class="css__class"><span style="color: #cc0066;">.skin2</span><br/></span><br/></strong><br/> <span class="css__element"><strong><span style="color: #800080;">div</span><br/></strong><br/></span><br/> { <br/><br/>    <span class="css__property"><span style="color: #330066;">color:</span><br/></span><br/><span class="css__color"><span style="color: #008000;">#fff</span><br/></span><br/>; <br/><br/>    <span class="css__property"><span style="color: #330066;">background:</span><br/></span><br/><span class="css__color"><span style="color: #008000;">#234</span><br/></span><br/> <span class="css__url"><span style="color: #ff00ff;">url(</span><br/></span><br/>/img/global/gradient/h300.png<span class="css__url"><span style="color: #ff00ff;">)</span><br/></span><br/> <span class="css__value"><span style="color: #3366ff;">repeat-x</span><br/></span><br/> <span class="css__value"><span style="color: #3366ff;">scroll</span><br/></span><br/> <span class="css__number"><span style="color: #ff0000;">0</span><br/></span><br/> -<span class="css__number"><span style="color: #ff0000;">50px</span><br/></span><br/>; <br/><br/>    <span class="css__property"><span style="color: #330066;">min-height:</span><br/></span><br/><span class="css__number"><span style="color: #ff0000;">200px</span><br/></span><br/>; <br/><br/>}


效果如下:


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


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

留下你的脚步