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
如需转载请以链接形式注明原载或原文地址。

“jQuery TAB插件”目前已有 21 条评论

  • *
  • *

评论列表

  • 大宝说道:

    增加一个快速滑过不触发. 体验就更好了.

  • 雨夜带刀说道:

    @大宝 我测试了不少知名网站的TAB效果,基本上都是鼠标滑过即触发的,你说的这种感觉比较少见哦。

  • jeroo说道:

    划过不触发,可以减少不必要的干扰,感觉如果有这个功能应该会更好,我找了好久没找到

  • 雨夜带刀说道:

    @jeroo 不错的建议 有时间我会进行优化。

  • wkylin说道:

    博主的主页又变漂亮了。。。。内容也更充实了。。。

  • qq说道:

    之前找的都是dt dd布局,因为页面已排版好了,所以就想找个ul布局的。这个好像还不错,简单易用,先拿回去试试,3Q!

  • ragbear说道:

    博主的博客设计的不错啊

  • […] 题外话:今天听到某高手的一句话,“总是找jQuery插件,写jQuery插件的人百分之九十九都是菜鸟”,虽然本博承认该高手技术水平的确不错,但是本博还是觉得这话有点偏激了,本博喜欢jQuery是因为它把复杂的JavaScript简单化了,能把复杂的事情简单化那也是需要相当的能耐。jQuery这种简单易用的框架,可能某些痴迷于技术的高手会嗤之以鼻,但是对于广大的新手或者更关注于WEB的交互特效的开发人员来说还是挺不错的。当然,一味的只会使用jQuery其JavaScript的水平的确难以进步,有时间还是要多多学习JavaScript,研究一些更底层的原理,所以本博接下来的学习重心将是研究YUI的源码。 原载于:雨夜带刀’s Blog本文链接:http://stylechen.com/jquery-tabs.html如需转载请以链接形式注明原载或原文地址。 […]

  • Crowne说道:

    最近被一个jq跳转的问题给搞死了!
    首先是有5个页面,index.html,1.2.3.4.html,在2的页面里面有个table,,我双击table中的一行数据,他自动切换到标签3里面去了

  • 火星-大象说道:

    一个页面有N多个相同的特效怎么办?希望有这样一个tabs:

    tabs导航,

    tabs内容,
    tabs内容,

    ……通过类名页面N处重复利用~

  • 雨夜带刀说道:

    @火星-大象
    你看看我的DEMO页面是否多个调用的。

  • 火星-大象说道:

    嗯,我看了,您都是$(‘.demo1′)这样开始的,我想要的效果是所有tabs效果都是一个class名。
    下面是淘宝KISSY实现的效果。
    KISSY.use(“switchable”,function(S,Switchable){
    S.all(“.tabs-box”).each(function(t){
    var mytabs = new Switchable.Tabs(t,{
    aria:false,
    autoplay:false,
    navCls:’tabs-nav’,
    contentCls:’tabs-con’,
    activeTriggerCls:’selected’,
    switchTo:’0′
    });
    });});

  • 雨夜带刀说道:

    @火星-大象
    问题已修复,谢谢你的意见。

  • […] 原载于:雨夜带刀’s Blog 本文链接:http://stylechen.com/jquery-tabs.html […]

  • Mortimer说道:

    当tab_box里还有Div的时候就用不了了,

    如果这样写的话,这个Div也会被加上hide而再返回来的时候又并没有去掉,所以看不到,需要改进

  • storm说道:

    插件不错,不过那个延迟触发效果我认为可以加判断,改为当时间不足的时候移动到元素外面后不再触发,目前是快速划过,最后一个是会触发的。
    if(options.timeout){
    hover …setTimeout…,clear…
    }

  • Baran说道:

    不知道为什么猎豹的chrome模式有问题 tab都不会动 博主可以试一试

  • dllen说道:

    可不可改进成可以关闭式的标签…

  • 高高说道:

    这个tab能不能做到防刷新呢?

  • 守护幸福说道:

    以前用过IDTAB,它好像有点小问题。idtabs有个我感觉好的地方就是,他在插件中可以设置默认显示哪一个,不用直接在HTML中定义class=”current”,默认第一个,包括下面内容BOX,也不用直接写class=”hidden”,因为在某些情况下,调用数据,比如:
    从数据库中循环栏目:
    栏目一
    栏目二
    不加它会自动把第一个加一个class=”current”。

  • 奇物志说道:

    不错,使用中……