第一课：面向对象案例：tab切换（2021/4/13）(最新补充功能：编辑的保存和回车保存）

清疚 2022-11-19 01:19 30阅读 0赞

// 功能需求:
    // 1．点击tab栏,可以切换效果.
    // 2．点击＋号,可以添加tab项和内容项.
    // 3．点击x号,可以删除当前的tab项和内容项.
    // 4．双击tab项文字或者内容项文字可以修改里面的文字内容.
    
    // step1:抽取共用方法和属性
    
    // 抽象对象: Tab对象
    // 1．该对象具有切换功能
    // 2.该对象具有添加功能
    // 3.该对象具有删除功能
    // 4.该对象具有修改功能
    var that;
    class Tab {
      constructor(id) {
        that = this;
        //  获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');
        // li的父元素
        this.ul = this.main.querySelector('.firstnav ul:first-child');
        // section的父元素
        this.fsection = this.main.querySelector('.tabscon');
        this.init();
      }
      // 为了解决添加新的元素没有点击效果和状态显示异常的问题，新建一个新的方法
      // 获取所有的小li 和section
      updateNode(){
        this.lis = this.main.querySelectorAll('li'); //获取所有li
        this.section = this.main.querySelectorAll('section');//获取下面的所有section
        // 获取所有关闭按钮
        this.remove = this.main.querySelectorAll('.icon-error');
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
      }
      // init 初始化操作让相关的元素绑定事件
      init(){
        this.updateNode();
        this.add.onclick = this.addTab;
        for(var i = 0; i< this.lis.length;i++){
          this.lis[i].index = i;//给每个li添加索引
          //给每个li添加点击事件
          this.lis[i].onclick = this.toggleTab;
          this.remove[i].onclick = this.removeTab;
          this.spans[i].ondbclick = this.editTab;
          // 效果是一样的，可以直接使用(双击修改内容)
          this.sections[i].ondbclick = this.editTab;
        }
      }
      // 1.切换功能
      toggleTab(){
        that.clearClass(); //清除所有再设置更改的那一条
        this.className = 'liactive'; //this指向单个li
        that.sections[this.index].className = 'conactive'; //获取实例对象的sections
      }
      // 清除所有li和section的样式
      clearClass(){
        for(var i = 0;i<this.lis.length;i++){
          this.lis[i].className = '';
          this.section[i].className = '';
        }
      }
      // 2.添加功能
      // 第一步:创建新的选项卡li和新的内容section
      // 第二步:把创建的两个元素追加到对应的父元素中.
    
      addTab(){
        // 先所有class表现状态的都清除掉，再去添加新的 
        that.clearClass();
        // 设置一个随机数看看是不是每次创建都是不一样的
        var random = Math.random();
        // (1) 创建li元素和section元素
        var li = '<li class="liactive"><span>新选项卡</span><i class="iconfont icon-error"></i></li>'
        // section跟着一起添加
        var section = '<section class="conactive">测试 ' + random +'</section>'
        // (2) 把这两个元素追加到对应点父元素里面
        // appendChild方法需要创建新节点元素再添加，而这个方法可以通过字符串的形式添加html，更快捷方便
        that.ul.insertAdjacentHTML('beforeend',li);
        that.init(); //每次添加新标签都要重新获取之前以及现在的li和section的所有内容
       
      }
      // 3.删除功能
      removeTab(){
        e.stopPropagation();//阻止冒泡 防止触发li的切换点击事件
        //获取按钮所在的li的下标
        var index = this.parentNode.index;
        //根据索引号删除对应的li和section
        that.lis[index].remove();
        that.sections[index].remove();
        //重新执行获取事件
        that.init();
        // 当前我们删除的不是选中状态的li 的时候，原来的选中状态li保持不变
        if(document.querySelector('.liactive')) return; //return 下面的代码不再执行
        // 当我们删除了选中状态的这个li 的时候，让它的前一个li处于选定状态
        index--;
        // 直接执行点击事件来切换删除后保留最后一个的状态
        // 删除到仅剩一个的时候，index会被修改为-1，这个是无法获取的。
        // 我们这里有巧思妙招：（前面为真，则执行后面的程序，为假，则不执行。不需要if来判断）
        that.lis[index] && that.lis[index].cilck();
      }
      // 4.修改功能
      // 双击选项卡li或者section里面的文字，可以实现修改功能
      // 双击事件是：ondbclick
      // 如果双击文字，会默认选定文字，此时需要双击禁止选中文字
      // 代码如下：
      // window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
      // 失去焦点和回车都可以编辑成功修改
      editTab(){
        var str = this.innnerHTML;
        // 双击禁止选定文字
         window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
        // 双击tab文字生成一个文本框
         this.innnerHTML = '<input type="txet" />';
         var input = this.children[0];
         input.value = str;
         input.select(); // 文本框里面的文字处于选定状态
        //  当我们离开文本框就把文本框里面的值传给span
        input.onblur = function(){
          this.parentNode.innnerHTML = this.value;
        }
    
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e){
          if(e.keyCode === 13){
            // 手动调用表单失去焦点事件 不需要鼠标离开操作
            this.blur();
          }
        }
    
      }
    }
    
    var tab = new Tab('#tab'); //执行的时候立即执行constructor的函数