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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php 使用array函数实现分页
2015/02/13 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
详解Python中的多线程编程
2015/04/09 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python实现弹跳小球
2019/05/13 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
初中女生自我鉴定
2013/12/19 职场文书
银行求职信范文
2014/05/26 职场文书
会议室标语
2014/06/21 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
出租车拒载检讨书
2015/01/28 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python