网上有不少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,是为了更多的自由,要写个样式并不难。
写的是简单了些,因为是自己写的插件,太熟了,还真是不好写。
感觉复杂,推荐阅读:jTabView选项卡插件的简易原理版
《ToFishes系列jQuery插件 – jTabView选项卡式浏览》有 2 条评论
2011.08.02 @ 05:08 吖刚
2011.08.03 @ 04:08 tofishes