ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

Stella981
• 阅读 702

前两篇文章主要介绍了类和对象、类的继承,如果想了解更多理论请查阅《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象》、《ES6学习笔记(二):教你玩转类的继承和类的对象》,今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能。

文章目录

要实现的功能分析

  1. 点击tab栏可以切换效果
  2. 点击+号,可以添加tab项和内容项
  3. 点击X号,可以删除当前的tab项和内容项
  4. 点击tab文字或者内容项文字,可以修改里面的字体内容

抽像对象: Tab对象 (增删改查功能)
实现功能效果如下图:
ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
首先建立一个class 类Tab:

let that
class Tab {
   
  constructor(id) {
   
    that=this
    // 获取元素
    this.main = document.getElementById('tab')
    //获取li的父元素
    this.ul = this.main.querySelector('.firstnav ul:first-child')
    // 获取section的父元素
    this.fSection = this.main.querySelector('.tabscon')
    this.add = this.main.querySelector('.tabadd')
    this.remove = this.main.querySelectorAll('i')
    this.init()
  }
  //初始化
  init() {
   
    this.updateNode()
    // init 初始化操作让相关的元素绑定事件
    this.add.onclick = this.addTab
    for(var i = 0; i<this.lis.length; i++) {
   
      this.lis[i].index = i
      this.lis[i].onclick = this.togggleTab
      this.remove[i].onclick = this.removeTab
      this.spans[i].ondblclick = this.editTab
      this.sections[i].ondblclick = this.editTab
    }

  }
  //我们动态添加元素,删除元素时,需要从新获取对应的元素
  updateNode() {
   
    this.lis = this.main.querySelectorAll('li')
    this.sections = this.main.querySelectorAll('section')
    this.remove = this.main.querySelectorAll('i') 
    this.spans = this.main.querySelectorAll('span')
  }
  //切换功能
  togggleTab() {
   }
  //清除li和section的class,主要实现切换功能用
  clearClass() {
   
    for(var i = 0; i< this.lis.length; i++) {
   
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }
  //添加功能
  addTab() {
   }
  //删除功能
  removeTab(e) {
   }
  // 修改功能
  editTab() {
   }
}
let tab = new Tab('#tab')

切换功能

  1. 点击上面的tab标题实现切换功能,下面对应的section也显示,其他的隐藏
  2. 实现思路,先去掉已有的选中class,
  3. 根据li的索引值,找到要显示的section,添加对应的class,使其显示

实现的主要代码是:

that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'

添加功能实现

  1. 点击+ 可以实现添加新的选项卡和内容
  2. 第一步:创建新的选项卡li和新的内容section
  3. 第二步: 把创建的两个元素追加到对应的父元素中
  4. 以前的做法:动态创建元素createElement,但是元素里面内容较多,需要innerHTML赋值在appendChild追加到父元素里面
  5. 现在高级做法,利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中,appendChild不支持追加字符串的子元素,insertAdjacentHTML支持追加字符串的元素

实现功能的主要代码是:

//创建li元素和section元素
    that.clearClass()
    let li = ' <li class="liactive" ><span>新选项卡</span><i>X</i></li>'
    let section = '<section class="conactive">新内容区</setion>'
    that.ul.insertAdjacentHTML('beforeend', li)
    that.fSection.insertAdjacentHTML('beforeend',section)
    that.init()

删除功能

  1. 点击X可以删除当前的选项卡和当前的section
  2. X是没有索引号的,但是它的父元素li有索引号,这个索引号正是我们想要的索引号
  3. 所以核心思路就是:点击x号可以删除这个索引号对应的li和section

实现功能的主要代码是:

e.stopPropagation();//阻止冒泡,
    let index = this.parentNode.index
    //根据索引号删除对应的li 和section
    that.lis[index].remove()
    that.sections[index].remove()
    that.init()
    //当我们删除的不是选中状态的元素时,原来的选中状态保持不变
    if(document.querySelector('.liactive')) return
    //当我们删除 了选中状态的生活,让它前一个li处于选中状态
    index--
    //手动调用click事件,不需要鼠标触发
    that.li[index] && that.lis[index].click()

编辑功能

  1. 双击选项卡li或者section里面的文字,可以实现修改功能
  2. 双击事件是:ondblclick
  3. 如果双击文字,会默认选定文字,此时需要双击禁止选中文字
  4. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
  5. 核心思路:双击文字的时候,在里面生成一个文本框,当失去焦点或者按下回车然后把文本输入的值给原先元素即可

实现功能的主要代码是:

let str = this.innerHTML
    //双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.innerHTML ='<input type="text" value="'+ str +'"/>'
    let input = this.children[0]
    //文本框里面的文字处于选中状态
    input.select() 
    //当鼠标离开文本框就把文本框的值给span
    input.onblur = function() {
   
      this.parentNode.innerHTML=input.value

    }
    // 按回车键也饿可以把文本框里的值给span
    input.onkeyup = function(e) {
   
      if(e.keyCode === 13) {
   
        this.blur()
      }
    }

总结

这篇文章主要是通过我学习的技术总结后来分享了如何用面向对象的思路方法来实现tab栏的切换、编辑、增加、删除功能。用到了很多ES6的一些语法。
案例源码地址:https://github.com/qiuqiulanfeng/tab

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这