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 相关文章推荐
javascript jq 弹出层实例
Aug 25 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
Javascript动画效果(2)
Oct 11 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
webpack优化的深入理解
Dec 10 Javascript
用户管理的设计_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时间戳使用实例代码
2008/06/07 PHP
php 分库分表hash算法
2009/11/12 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
php框架知识点的整理和补充
2021/03/01 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
js格式化时间小结
2014/11/03 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python selenium 获取接口数据的实现
2020/12/07 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
街道社区活动报告
2015/02/05 职场文书
儿子满月酒致辞
2015/07/29 职场文书
python删除csv文件的行列
2021/04/06 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技