javascript：自定义选项卡插件

对于经常开发前端的人，有很多喜欢直接用jQuery及jQuery插件，也有很多人喜欢自己写插件。相对于jQuery及jQuery插件，自己写的插件一般都很简单，易懂，也容易维护，也不臃肿。因最近夜里时间比较宽裕，所以准备分享一些自己写插件的过程和最终成果。

自定义选项卡插件

一、新建测试用的demo.html

1、添加3个

标签做选项卡用

    
    
button 1
    
    
button 2
    
    
button 3

2、添加3个

做选项卡的分页

选项卡在切换的时候，将会显示对应的分页。
为了区分和看的明显，给不同的div设置不同的背景颜色和设置一个高度。

    this is tab1.



    this is tab1.



    this is tab1.

效果如下：

image.png

二、设置

标签横排显示

1、给3个

标签设置style：

    
button 1
    
button 2
    
button 3

效果如下：

image.png

2、消除

的float对

的影响：

发现tab1分页显示有问题，此时需要给

设置一个style：clear:left，消除

的float对它的影响：

......

.....

    this is tab 1.


    this is tab 2.


    this is tab 3.

效果如下：

image.png

二、美化

标签

我们发现

标签上带着小黑点，而且三个标签是连在一起的，为了好看，我们需要美化一下

标签。为了使三个标签通用一个style，我做了以下定义和设置：

......

......

    
button 1
    
button 2
    
button 3

......

效果如下（好看多了吧 ^_^ ）：

image.png

三、写js，控制

标签的切换

在和标签中间添加，准备在这里直接写js代码：

......

1、找到

标签

为了控制

标签，我们就要先找到

标签。因为

标签的父标签

已经有一个class，所以我们可以通过该class找到
标签，再通过
标签的子节点找到其拥有的这些
• 标签：

  2、给

  标签添加点击事件

  继续遍历childLiNodeList，给每一个

• 节点添加onclick事件：

  测试查看效果，包您满意 ^_^

  3、把

  分页和

  标签关联起来

  到目前为止，

  分页和
• 标签还没产生任何联系，为了使
• 标签能够控制
  分页，我给
• 标签添加了一个自定义的data属性，该属性的值，即对应
  分页的id：

  
      
      
  button 1
      
      
  button 2
      
      
  button 3
  
  

  这样，我们可以在js中通过获取

• 标签"data-tab"属性值，来获得对应的分页，并控制
  分页的显示和隐藏。

  4、获得

  标签对应的

  分页

  5、控制

  标签对应的

  分页

  现在打开页面，可以看到，3个

  分页都是显示的，所以我们需要先把这三个

  分页隐藏，并且在点击
  
• 节点时，显示对应的
  分页。

  效果如下（点击tab button查看）：

  
  

  image.png

  
  

  image.png

  
  

  image.png

  6、美化

  标签效果

  上面效果中，

• 标签点击时没什么变化，我们需要做下美化和脚本控制，增加鼠标滑过，鼠标点击等样式：

  
  ......
  
  

  效果如下：
  鼠标点击后

  
  
  image.png
  
  

  鼠标悬浮时

  
  
  image.png

  7、初始化选项卡显示

  在刚打开网页的时候，我们发现3个

  分页还都一起显示，跟我们预期不一样，所以需要在网页打开时，在js里做一些初始化的操作，使页面刚打开时，默认选中选项卡1，显示

  分页1。

  效果如下：

  
  

  image.png

  四、封装插件

  上面几步，我们把想要的基本功能实现了，这一步就是要把上面的实现逻辑封装一下，封装好的js，可以被更好的移植和使用。

  1、创建一个TabBar对象

  封装时需要用到闭包，我们先创建一个Tab对象：

  var TabBar = (function () {
          function TabBar() {
          }
          return TabBar;
      }());
  

  2、复制基本功能逻辑到TabBar的构造方法中

  记得初始化TabBar

  new TabBar();
  

  运行查看效果，应该和第三步的效果一样。

  3、给TabBar添加show方法，方便在外面控制选项卡的显示

  添加show方法：

  实现show方法，优化脚本，全部脚本如下：

  给

  标签设置id：tabBar1

  在脚本中调用：

  new TabBar();
  

  或

  new TabBar().show("tabBar1", 1);
  

  运行查看效果是否是预期的效果。

  4、设置TabBar对象为单例

  因为在脚本中，我们处理的是所有class包含rootTab的元素，所以当页面中有其他的class包含rootTab选项卡时，也会被该脚本处理。为了减少部分开销，不每次都new TabBar()，就需要把TabBar对象设置为单例。
  在html中添加另一个选项卡，最终成果（html+css+js）如下：

  
  
  
      
      
  
  
  
  
      
      
  button 1
      
      
  button 2
      
      
  button 3
  
  
      this is tab 1.
  
  
      this is tab 2.
  
  
      this is tab 3.
  
  
      
      
  button 4
      
      
  button 5
      
      
  button 6
  
  
      this is tab 4.
  
  
      this is tab 5.
  
  
      this is tab 6.
  
  
  
  
  

  注意在脚本中调用：

  new TabBar().show("tabBar1", 1).show("tabBar2", 0);
  

  运行查看效果，如果与预期的一致，恭喜你，大功告成 ^_^ 。

  
  
  image.png