jQuery TAB插件

原文地址: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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值