快捷導(dǎo)航

js學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)

更新時(shí)間：2017年07月13日 08:00:59 投稿：jingxian

下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

這個(gè)插件對(duì)應(yīng)的html的結(jié)構(gòu)如下

<div class='box' id='tabFir'>
    <ul id='tabOptions'>
      <li class='select'>頁(yè)卡一</li>
      <li>頁(yè)卡二</li>
      <li>頁(yè)卡三</li>
    </ul>
    <div class='select'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    <div>內(nèi)容二</div>
    <div>內(nèi)容三</div>
  </div>

版本1

//實(shí)現(xiàn)一個(gè)選項(xiàng)卡封裝：我們可以分析出，只要多個(gè)選項(xiàng)卡的主體結(jié)構(gòu)一樣，那么每個(gè)實(shí)現(xiàn)的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個(gè)選項(xiàng)卡的插件，只要大結(jié)構(gòu)保持統(tǒng)一，以后實(shí)現(xiàn)選項(xiàng)卡的功能，只需要調(diào)取這個(gè)方法執(zhí)行即可實(shí)現(xiàn)
    param：container當(dāng)前要實(shí)現(xiàn)選項(xiàng)卡的這個(gè)容器
        defaultIndex:默認(rèn)選中項(xiàng)的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //讓defaultIndex對(duì)應(yīng)的頁(yè)卡有選中的樣式
    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
  
}()

版本2(將for循環(huán)改為使用事件委托的方式)

//實(shí)現(xiàn)一個(gè)選項(xiàng)卡封裝：我們可以分析出，只要多個(gè)選項(xiàng)卡的主體結(jié)構(gòu)一樣，那么每個(gè)實(shí)現(xiàn)的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個(gè)選項(xiàng)卡的插件，只要大結(jié)構(gòu)保持統(tǒng)一，以后實(shí)現(xiàn)選項(xiàng)卡的功能，只需要調(diào)取這個(gè)方法執(zhí)行即可實(shí)現(xiàn)
    param：container當(dāng)前要實(shí)現(xiàn)選項(xiàng)卡的這個(gè)容器
        defaultIndex:默認(rèn)選中項(xiàng)的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //讓defaultIndex對(duì)應(yīng)的頁(yè)卡有選中的樣式
    defaultIndex = defaultIndex || 0;
    utils.addClass(oLis[defaultIndex],"select");
    utils.addClass(divList[defaultIndex],"select");
    //具體的切換功能
    
    //使用事件委托優(yōu)化
    tabFirst.onclick = function(e){
      e = e || window.event;
      e.target = e.target || e.srcElement;
      if(e.target.tagName.toLowercase()==="li"){//說(shuō)明當(dāng)前點(diǎn)擊的是li標(biāo)簽
        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
  
}()

版本3:面向?qū)ο蟮姆绞?，使用?gòu)造函數(shù)

//實(shí)現(xiàn)一個(gè)選項(xiàng)卡封裝：我們可以分析出，只要多個(gè)選項(xiàng)卡的主體結(jié)構(gòu)一樣，那么每個(gè)實(shí)現(xiàn)的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個(gè)選項(xiàng)卡的插件，只要大結(jié)構(gòu)保持統(tǒng)一，以后實(shí)現(xiàn)選項(xiàng)卡的功能，只需要調(diào)取這個(gè)方法執(zhí)行即可實(shí)現(xiàn)
    param：container當(dāng)前要實(shí)現(xiàn)選項(xiàng)卡的這個(gè)容器
        defaultIndex:默認(rèn)選中項(xiàng)的索引
  */


  function TabChange(container,defaultIndex){
    this.init(container,defaultIndex);

  }
  TabChange.prototype = {
    constructor:TabChange,//注意重寫原型方法，需要重新指定構(gòu)造器
    //初始化 ，也是當(dāng)前插件的唯一入口
    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;
    },
    //事件委托實(shí)現(xiàn)綁定切換
    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"){//說(shuō)明當(dāng)前點(diǎn)擊的是li標(biāo)簽
          _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");
      }
    },
    //按照索引來(lái)設(shè)置默認(rèn)選中的頁(yè)卡
    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)

以上這篇js學(xué)習(xí)總結(jié)_選項(xiàng)卡封裝(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: