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打造TabPanel效果代码
May 22 Javascript
JQuery live函数
Dec 24 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
详解Python设计模式之策略模式
2020/06/15 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
会计工作决心书
2014/03/11 职场文书
给校长的建议书200字
2014/05/16 职场文书
八项规定整改方案
2014/10/01 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
导游词之云南丽江古城
2019/09/17 职场文书