你现在的位置:网站首页 > JS代码 > 广告代码 > TAB标签

[插件] jTabView选项卡式浏览【切换事件、自动切换、手风琴方式、记忆功能】

【更新时间:2013-09-21】    【来源:网络收集】

网上有不少jQuery的选项卡插件,官方的tab貌似也不错,但用来用去哪有自己写的顺手。

该插件实际使用于公司旗下网站 – 易扑网(eapoo.com), 在网站开发过程中编写,同时扩展了不少功能。

本插件遵循 结构、表现、行为 相分离的原则,所以,html结构与css样式(决定UI)请自己决定。

快速入门:
首先编写html,比如下例:

<div class="jtabview"><!-- or has id="jtabview" -->
    <a class="jtab">tab1</a>
    <a class="jtab">tab2</a>
    ...more tags 
    <a class="jtab">
    <div class="jtab-con">content1</div>
    <div class="jtab-con">content2</div>
    ...more tags 
    <div class="jtab-con">
</div>

然后js调用(别忘了引入jQuery文件):

$(function(){
    $(".jtabview, #jtabview... ...").jTabView({ //支持多个选择器,前提是它们有相同的参数配置,以下是可以配置的参数
        tab:".jtab", //选项卡标题, 选择器子元素,允许为jQuery对象,例如tab:$(".jtab")
        con:".jtab-con", // 选项卡对应的内容元素,确保选项卡数与内容数一致。选择器子元素,允许为jQuery对象,例如con:$(".jtab-con")
        event: "click", //设置触发tab切换的事件,默认是单击,也可以设定为mousehover,这样鼠标悬浮就会切换
        curr: "curr", //设置当前激活中的选项卡样式类
        auto: 0, //是否自动切换, 默认否
        time: 5000, //自动切换的时间间隔, 默认5秒
        hoverTime: 300, //如果是鼠标悬浮切换,为了提高体验,设置一定的延迟然后再触发切换
        retain: 0, //在浏览器刷新的情况下,是否记忆保持选项卡的激活位置,这样可以防刷新,默认不开启,依赖jquery.cookie插件
        expires:1, //设置记忆的过期时间,过了这个时间防刷新失效,默认1天
        accordion: 0 //设置开启手风琴风格的切换,点击当前项会在显示与隐藏之间切换,默认否
    });
});

上面已经罗列了可以配置的默认参数,可以有选择的设置。其中最主要的就是 tab,con参数,应该属于应用了插件的元素的子元素,因为提供了可设置为jQuery对象(有点鸡肋吧,当时想着应用广泛,就加上了),此时就无此限制。

另外需要说明一个参数:curr,它的存在既是为了当前显示项的状态类,也是初始需要显示第N项的参数。 比如说tab项目是这样的结构:<a >选项1</a><a class=”curr”>选项2</a><a >选项3</a>,在选项2加了curr,那么初始化会先显示第二项的内容。

这里并没有提供css,是为了更多的自由,要写个样式并不难。

更多精彩内容...