msn email google-talk twitter tumblr flickr

自制jQuery Tab控件Tabbie

很久没有静下心来写javascript了,最近正好有些外力影响就顺道把一个快要烂在脑子里的Tab页控件给实现了.

命名Tabbie,主要优点就是轻,绝对的轻量级的(一共三十几行吧^ ^).看Demo先.

简单介绍下用法:

   1      $('#tabs').tabbie();
   2  
   3      <ul id="tabs">
   4          <li class="active"><a rel="tab1" href="#">tab1</a></li>
   5          <li><a rel="tab2" href="http://joeydarko.heroku.com">tab2</a></li>
   6          <li><a rel="tab3" href="http://foobar.me">tab3</a></li>
   7      </ul>

无序列表(ul)的表项(li)使用class='active'属性作为初始显示的标签页.li中必须有一个a标签(这个是必须的),a中使用rel属性关联相对应的标签页面容器的id.

即a标签中的rel="tab1",这个tab1就是要显示的Tab的id了,顺序什么的可以无视.

   1      <div id="tab1" class="content">
   2          <h2>tab1</h2>
   3          tab1
   4      </div>

至于为什么用rel属性而不用现成的href,我要说明一下,因为有些时候我们喜欢点击tab标签的时候跳转到另一个页面,而不是显示tab的内容,就如同Demojoeydarko.heroku.comfoobar.me标签那样.其实你还可以这么初始化Tabbie:

   1  $('#tabs').tabbie({event:'click'});

传一个event参数定义你要捕捉的事件.默认的事件是mouseover.要提醒的是,如果想要点击跳转的话就不要用click了,否则一点链接就跳转Tab页就没有意义了.

最后简单再总结下,除了li中必须有个a和li的初始class的值必须为active之外,再没有其他的限制了.剩下就是自己配置关联和css的显示活了.

github地址在这里:Tabbie

题外话,说是Tab页插件,其实童鞋们可以发散开来想想看,很多动态切换效果都是跟tab一个原理做的,拿Tabbie稍微改改外观加上几行自动播放代码就可以变成很多网站首页都有的图片切换显示效果,就是那种鼠标放在1或文字链接上面就显示相关图片的效果.或者等我哪天心血来潮也改一个玩玩吧:)