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


Posted in Javascript onJuly 13, 2017

这个插件对应的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学习总结_选项卡封装(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
通过命令行生成vue项目框架的方法
Jul 12 #Javascript
微信小程序实现点击返回顶层的方法
Jul 12 #Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 #Javascript
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 #Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python requests 使用快速入门
2017/08/31 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python获取引用对象的个数方式
2019/12/20 Python
如何对python的字典进行排序
2020/06/19 Python
python实现批处理文件
2020/07/28 Python
Python类成员继承重写的实现
2020/09/16 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
广州盈通面试题
2015/12/05 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
总经理岗位职责
2013/11/09 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
《王二小》教学反思
2014/02/27 职场文书
《春笋》教学反思
2014/04/15 职场文书
学生检讨书如何写
2014/10/30 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
Python数组变形的几种实现方法
2022/05/30 Python