Javascript TAB选项卡切换类:LixTabs.js最新版

LixTabs.js是我之前因为工作原因而写的一个小JS类,主要作用是批量实现Tab切换效果。之前已经在博客园发布过两个版本了,虽然依然有缺点但还是在艰难地改进着。

2013/9/17更新:
原来的tabs.js有一个漏洞,替换class的时候用的是字符串,有bug,比如此标签有content on两个class,本来只想去掉on,却变成了ctent ,把content里的on也去掉了。

这是个很低级的错误,但我一直都没发现真是奇迹。现在改成了正则表达式,且优化了替换class的函数,减少了计算量,且Tabs.js的整体代码量还变小了,<3Kb. 另外废话几句,其中的cutover(切换样式)函数,里面有些值得学习的地方,想提高JS水平的可以看下,如果不明白欢迎联系我。 LixTabs最新版(0.5)特性说明:

  1. 在同一网页方便的实现多个tab选项卡切换效果
  2. 也可以用来实现简单的图片切换效果
  3. 整体封装,但调用时不用写new
  4. 可以设置触发延迟,所以当鼠标飞速的移入移出tab标签不会触发切换
  5. 代码精简,迄今为止代码大小:3.3KB
  6. 因为精简,所以切换没有特效(如淡入淡出等)

LixTabs效果示例页

前言:使用有任何问题尽管联系我

tab切换基本html结构:

<div class=“wrapDiv” id=“wrapDiv”>
<div class=“tabHead”>
<a class=“now” title=“” href=“#”>第1个</a>
<a title=“” href=“#” class=“”>第2个</a>
<a title=“” href=“#” class=“”>第3个</a>
</div>
<div class=“tabBody”>
<div class=“cur”> 第一个tab内容 </div>
<div> 第二个tab内容 </div>
<div> 第三个tab内容 </div>
</div>
</div>

给新人的说明:外围一个整体,而整体分为两个区域,一个tab头,一个tab内容区。其中tab头中当前显示者的样式为.now,tab内容区中当前显示者的样式为.cur,加上.cur即可让该元素显示出来。当然,这些都可以自定义。

LixTabs参数说明:

LixTabs第一个参数是必须的,即要实现切换效果的某个html元素;第2个参数是一个对象,其值即下面这些选项。

  1. hdtag:’DIV’,//tab头的标签
  2. hdcn:’tabhd’,//tab头的className
  3. hdtagcur:’cur’,//tab头中当前标签的className
  4. bdtag:’DIV’,//tab内容区的标签
  5. bdcn:’tabbd’,//tab内容区的className
  6. bdtagcur:’cur’,//tab内容区中当前标签的className
  7.  event:’mouseover’,//切换如何触发
  8. auto:null //是否自动切换,值为毫秒,默认没有;只要一传值,就会自动切换
以上格式:参数:默认值

注:如果要传的参数是默认值,就不用传了

LixTabs使用方法(0.5版)

1,实现一个tab切换:var t1=Tabs($id(‘tabLite’),{hdcn:’tabHead’,hdtagcur:’now’,bdcn:’tabBody’,auto:4000});

注意:不用写 new…

2,实现多个tab切换:可以像上面这样重复定义N个,只要变量不同参数不同即可

3,大量结构类似的tab切换:先给所有要切换的块加上同一个className比如.tabs,而且参数值如hdcn,bdcn等也要一致,然后:

for(var i=0,l=as.length;i<l;i++){ as[i].tab = new Tabs(as[i],{hdtag:’UL’,hdcn:’sn’,hdtagcur:’now’,bdtag:’DIV’,bdcn:’imgs’,bdtagcur:’cur’}); }

使用提醒:

以上文中的”基本HTML”为例,当前显示的DIV的class为.cur,这个.cur是此DIV比其他未显示的DIV多出来的一个className.比如其他DIV都有一串样式.c1.c2.c3,而当前显示的DIV的样式为.c1.c2.c3.cur——这样,在传参数的时候只传这个控制显示与否的特殊的className:.cur即可,这样不会替换掉以前的样式而造成页面混乱。

LixTabs实例及下载 ,请尽量参考

LixTabs jQuery版

《Javascript TAB选项卡切换类:LixTabs.js最新版》有6个想法

发表评论

电子邮件地址不会被公开。