IT教程 ·

ES6进修笔记(三):教你用js面向对象头脑来完成 tab栏增编削查功用

Docker实战之MySQL主从复制

前两篇文章重要引见了类和对象、类的继续,假如想相识更多理论请查阅《》、《》,本日重要来分享关于如何用js面向对象的头脑来完成tab栏的一些相干的功用。

要完成的功用分析

  1. 点击tab栏能够切换结果
  2. 点击+号,能够增添tab项和内容项
  3. 点击X号,能够删除当前的tab项和内容项
  4. 点击tab笔墨或许内容项笔墨,能够修正内里的字体内容

抽像对象: 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的一些语法。
案例源码地点:

Spring源码分析-BeanFactoryPostProcessors 应用之 PropertyPlaceholderConfigurer

参与评论