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

 更新时间:2017年07月13日 08:00:59   投稿:jingxian  
下面小编就为大家带来一篇js学习总结_选项卡封装(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这个插件对应的html的结构如下

<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>

版本1

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

~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
  
}()

版本2(将for循环改为使用事件委托的方式)

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

~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
  
}()

版本3:面向对象的方式,使用构造函数

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

~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)

以上这篇js学习总结_选项卡封装(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 简易的投票系统以及js刷票思路和方法

    简易的投票系统以及js刷票思路和方法

    这篇文章主要介绍了简易的投票系统以及js刷票思路和方法,文章十分的详尽,思路也很清晰,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • JavaScript中几种常见排序算法小结

    JavaScript中几种常见排序算法小结

    JavaScript中几种常见排序算法小结,学习js的朋友可以参考下,下面对多种方法进行了简单的小结。
    2011-02-02
  • 如何通过vscode运行调试javascript代码

    如何通过vscode运行调试javascript代码

    这篇文章主要介绍了如何通过vscode运行调试javascript代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

    微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图

    这篇文章主要介绍了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能,结合图文与实例形式详细分析了微信小程序选项卡切换相关操作实现技巧,需要的朋友可以参考下
    2019-05-05
  • JavaScript本地储存:localStorage、sessionStorage、cookie的使用

    JavaScript本地储存:localStorage、sessionStorage、cookie的使用

    这篇文章主要介绍了JavaScript本地储存:localStorage、sessionStorage、cookie的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • js继承的6种方式详解

    js继承的6种方式详解

    这篇文章主要给大家介绍了关于js继承的6种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JS实现弹性漂浮效果的广告代码

    JS实现弹性漂浮效果的广告代码

    这篇文章主要介绍了JS实现弹性漂浮效果的广告代码,涉及javascript动态操作图片弹性运动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 深入理解JavaScript系列(29):设计模式之装饰者模式详解

    深入理解JavaScript系列(29):设计模式之装饰者模式详解

    这篇文章主要介绍了深入理解JavaScript系列(29):设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数),需要的朋友可以参考下
    2015-03-03
  • 解析Javascript单例模式概念与实例

    解析Javascript单例模式概念与实例

    本文将介绍Javascript模式中较为常见和实用的模式——单例模式,主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进行讲解。需要的朋友可以看下
    2016-12-12
  • 通过一次报错详细谈谈Point事件

    通过一次报错详细谈谈Point事件

    这篇文章主要给大家介绍了关于如何通过一次报错详细谈谈Point事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2018-05-05

最新评论