轉自:http://www.cnblogs.com/ywqu/archive/2009/09/02/1558423.html
?
jquery插件庫、關于Jquery Tab插件,比較流行的是jQuery UI Tabs,最近此插件也已經有了更新,地址為http://stilbuero.de/jquery/tabs_3/?,目前國內很多網站也在使用此插件,希望大家有時間了試用一下。
今天突然發現了一個更加輕量級的,功能更加豐富的 Jquery Tab插件。先展示一下其功能;
1、簡單配置一下就可以實現如下效果:
jquery常用插件、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、只是瀏覽器的【前進】和【后退】
?
$(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 :背景變暗效果
?