原文地址:jQuery TAB插件
最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。
在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果。插件力求简单易用,只要能实现常见的功能即可。
event
触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover。
timeout
事件延迟,单位为毫秒,默认为0。
auto
自动切换,单位为毫秒,默认为0。
callback
回调函数,触发TAB时执行,函数的参数返回的是this。
<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>
<!--
.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>