js学习总结_选项卡封装(实例讲解)

<div class='box' id='tabfir'>
    <ul id='taboptions'>
      <li class='select'>页卡一</li>
      <li>页卡二</li>
      <li>页卡三</li>
    </ul>
    <div class='select'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    <div>内容二</div>
    <div>内容三</div>
  </div>

//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
  /*
    tabchange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
    param：container当前要实现选项卡的这个容器
        defaultindex:默认选中项的索引
  */
  function tabchange(container,defaultindex){
    var tabfirst = utils.firstchild(container),olis = utils.children(tabfirst);
    var divlist = utils.children(container,"div");
    //让defaultindex对应的页卡有选中的样式
    defaultindex = defaultindex || 0;
    utils.addclass(olis[defaultindex],"select");
    utils.addclass(divlist[defaultindex],"select");
    //具体的切换功能
    for(var i = 0;i<olis.length;i++){
      olis[i].onclick = function(){
        utils.addclass(this,"select");
        var cursiblings = utils.siblings(this);
        for(var i = 0;i<cursiblings.length;i++){
          utils.removeclass(cursiblings[i],"select")
        }
        var index = utils.index(this);
        for(var i = 0;i<divlist.length;i++){
          i===index ? utils.addclass(divlist[i],"select") : utils.removeclass(divlist[i],"select")
        }
      }  
    }
    
  }
  window.ftab = tabchange
  
}()

//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
  /*
    tabchange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
    param：container当前要实现选项卡的这个容器
        defaultindex:默认选中项的索引
  */
  function tabchange(container,defaultindex){
    var tabfirst = utils.firstchild(container),olis = utils.children(tabfirst);
    var divlist = utils.children(container,"div");
    //让defaultindex对应的页卡有选中的样式
    defaultindex = defaultindex || 0;
    utils.addclass(olis[defaultindex],"select");
    utils.addclass(divlist[defaultindex],"select");
    //具体的切换功能
    
    //使用事件委托优化
    tabfirst.onclick = function(e){
      e = e || window.event;
      e.target = e.target || e.srcelement;
      if(e.target.tagname.tolowercase()==="li"){//说明当前点击的是li标签
        detailfn.call(e.target,olis,divlist);

      }
    }
  }
  function detailfn(olis,divlist){
    var index = utils.index(this);
    utils.addclass(this,"select");
    for(var i = 0;i<olis.length;i++){
      i!==index?utils.removeclass(olis[i],"select"):null;
      i===index ? utils.addclass(divlist[i],"select") : utils.removeclass(divlist[i],"select");
    }
  }
  window.ftab = tabchange
  
}()

//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样

~function(){
  /*
    tabchange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现
    param：container当前要实现选项卡的这个容器
        defaultindex:默认选中项的索引
  */


  function tabchange(container,defaultindex){
    this.init(container,defaultindex);

  }
  tabchange.prototype = {
    constructor:tabchange,//注意重写原型方法，需要重新指定构造器
    //初始化 ，也是当前插件的唯一入口
    init:function(container,defaultindex){
      this.container = container || null;
      this.defaultindex = defaultindex || 0;
      this.tabfirst = utils.firstchild(this.container);
      this.olis = utils.children(this.tabfirst);
      this.divlist = utils.children(this.container,"div");

      this.defaultindexeven();
      this.liveclick();
      return this;
    },
    //事件委托实现绑定切换
    liveclick:function(){
      var _this = this;
      this.tabfirst.onclick = function(e){
        e = e || window.event;
        e.target = e.target || e.srcelement;
        if(e.target.tagname.tolowercase()==="li"){//说明当前点击的是li标签
          _this.detailfn(e.target);

        }
      }
    },
    detailfn:function(curele){
      var index = utils.index(curele);
      utils.addclass(curele,"select");
      for(var i = 0;i<this.olis.length;i++){
        i!==index?utils.removeclass(this.olis[i],"select"):null;
        i===index ? utils.addclass(this.divlist[i],"select") : utils.removeclass(this.divlist[i],"select");
      }
    },
    //按照索引来设置默认选中的页卡
    defaultindexeven:function(){
      utils.addclass(this.olis[this.defaultindex],"select");
      utils.addclass(this.divlist[this.defaultindex],"select");
    }

  }
  window.ftab = tabchange
  
}()

//使用
var box1 = new ftab(boxlist[0],0)