js面向对象思维来实现 tab栏增删改查功能

作者: 小棋子js | 来源:发表于2020-03-18 09:14 被阅读0次

DAY2
js面向对象思维来实现 tab栏增删改查功能
TAB栏切换javascript面向对象
常见tab效果的实现
【Java】面向对象编程
javaScript进阶面向对象ES6-2020-01-06
DOM 的一些增删改查
python 面向对象
js 实现类的继承的5种方式
四、面向对象编程

如何用面向对象的思路方法来实现tab栏的切换、编辑、增加、删除功能。用到了很多ES6的一些语法不兼容ie低版本

image.png

<!DOCTYPE html>
<head>
  <meta charset="UTF-8"/>
  <title>对象实现的tab</title>
  <style>
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.main h2 {
  margin: 20px auto;
  text-align: center;
}

.tabsbox {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #ebebeb;
  height: 400px;
}
.firstnav {
  height: 56px;
  border-bottom: 1px solid #ebebeb;
}
.tabadd {
  float: right;
  border: 1px solid #ebebeb;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin: 10px;
  cursor: pointer;
}
.firstnav ul{
  float: left;
}
.firstnav  li{
  float: left;
  border-right: 1px solid #ebebeb;
  height: 56px;
  padding: 0 24px;
  line-height: 56px;
  position: relative;
  min-width: 60px;
}
.firstnav  li  i {
  position: absolute;
  right:8px;
  top: -12px;
  color: red;
}
.firstnav .liactive {
  height: 57px;
  margin-bottom: -1px;
  background: #fff;
}
.tabscon .conactive {
 
  display: block;
}
.tabscon section {
  display: none;
  width: 100%;
  height: 100%;
  padding: 20px;
}
  </style>
</head>
<body>
  <div class="main">
    <h2>js面向对象 动态添加标签页</h2>
    <div class="tabsbox" id="tab">
      <nav class="firstnav">
        <ul>
          <li class="liactive">
            <span>测试1</span>
            <i>x</i>
          </li>
          <li>
            <span>测试2</span>
            <i>x</i>
          </li>
          <li>
            <span>测试3</span>
            <i>x</i>
          </li>
        </ul>
        <div class="tabadd">
          <span>+</span>
        </div>
      </nav>
      <div class="tabscon">
        <section class="conactive">测试一</section>
        <section>测试二</section>
        <section>测试三</section>
      </div>
    </div>
  </div>
  <script>
  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() {
    that.clearClass()
    this.className='liactive'
    that.sections[this.index].className='conactive'

  }
  clearClass() {
    for(var i = 0; i< this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }
  //添加功能
  addTab() {
    //创建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()
  }
  //删除功能
  removeTab(e) {
    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()
  }
  // 修改功能
  editTab() {
    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()
      }
    }
  }
}
let tab = new Tab('#tab')
  </script>
 </body>
</html>