jQuery TAB插件
最近的项目用到TAB效果的地方较多，于是自己稍微封装了下，写成了jQuery插件，方便以后使用，顺便重温下jQuery插件的实现机制。
在写插件之前对常见的TAB效果做了下总结，大体上也就那几种效果。插件力求简单易用，只要能实现常见的功能即可。
参数说明：
- event
- 触发TAB的事件类型，鼠标悬停：mouseover，鼠标点击：click，默认为mouseover。
- timeout
- 事件延迟，单位为毫秒，默认为0。
- auto
- 自动切换，单位为毫秒，默认为0。
- callback
- 回调函数，触发TAB时执行，函数的参数返回的是this。
HTML结构部分：
<div id="box"> <!-- TAB菜单部分 --> <ul class="tab_menu"> <li class="current">新闻</li> <li>图片</li> <li>军事</li> </ul> <!-- TAB内容部分 --> <div class="tab_box"> <div>新闻</div> <div class="hide">图片</div> <div class="hide">军事</div> </div> </div> |
CSS样式部分：
<!--
.tab_menu{
list-style:none;
width:210px;
overflow:hidden;
}
.tab_menu li{
width:70px;height:30px;
line-height:30px;
float:left;
color:#fff;
background:#093;
text-align:center;
cursor:pointer;
}
.tab_menu li.current{
color:#333;
background:#fff;
} /*TAB菜单高亮样式*/
.tab_box{
padding:20px;
height:120px;
}
.tab_box .hide{
display:none;
} /*隐藏TAB内容部分*/
--> 调用插件
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#box').Tabs({
event:'mouseover', //事件类型
timeout:100, //设置事件延迟
auto:3000, //3秒自动切换一次
callback:null //回调函数
}); //返回了this
});
</script>7月5日更新，优化插件源码，解决几个小BUG，插件下载地址：http://stylechen.com/wp-content/uploads/download/jquery.tabs.zip
原载于：雨夜带刀’s Blog本文链接：http://stylechen.com/jquery-tabs.html
如需转载请以链接形式注明原载或原文地址。