面向对象版tab 栏切换案例

1.面向对象版tab 栏切换

 

 

 

1.1功能需求

1. 点击 tab栏,可以切换效果.

2. 点击 + 号, 可以添加 tab 项和内容项.

3. 点击 x 号, 可以删除当前的tab项和内容项.

4. 双击tab项文字或者内容项文字可以修改里面的文字内容

1.2案例准备

1. 获取到标题元素

2. 获取到内容元素

3. 获取到删除的小按钮 x号

4. 新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)

5. 时刻注意this的指向问题

1.3切换

• 为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引

   this.lis[i].index = i;
   this.lis[i].onclick = this.toggleTab;

   

• 使用排他,实现只有一个元素的显示

   toggleTab() {
     //将所有的标题与内容类样式全部移除
       for (var i = 0; i < this.lis.length; i++) {
       this.lis[i].className = '';
       this.sections[i].className = '';
       }
     //为当前的标题添加激活样式
       this.className = 'liactive';
      //为当前的内容添加激活样式
       that.sections[this.index].className = 'conactive';
    }

   

1.4添加

• 为添加按钮+ 绑定点击事件

   this.add.onclick = this.addTab;

   

• 实现标题与内容的添加,做好排他处理

  addTab() {
      that.clearClass();
      // (1) 创建li元素和section元素 
      var random = Math.random();
      var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi">             </span></li>';
      var section = '<section class="conactive">测试 ' + random + '</section>';
      // (2) 把这两个元素追加到对应的父元素里面
      that.ul.insertAdjacentHTML('beforeend', li);
      that.fsection.insertAdjacentHTML('beforeend', section);
      that.init();
      }

   

1.5删除

• 为元素的删除按钮x绑定点击事件

   this.remove[i].onclick = this.removeTab;

   

• 获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容

   removeTab(e) {
       e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
       var index = this.parentNode.index;
       console.log(index);
       // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
       that.lis[index].remove();
       that.sections[index].remove();
       that.init();
       // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
       if (document.querySelector('.liactive')) return;
       // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
       index--;
       // 手动调用我们的点击事件  不需要鼠标触发
       that.lis[index] && that.lis[index].click();
   }

   

1.6编辑

• 为元素(标题与内容)绑定双击事件

  this.spans[i].ondblclick = this.editTab;
   this.sections[i].ondblclick = this.editTab;

   

• 在双击事件处理文本选中状态,修改内部DOM节点,实现新旧value值的传递

  editTab() {
      var str = this.innerHTML;
      // 双击禁止选定文字
      window.getSelection ? window.getSelection().removeAllRanges() :                     
       document.selection.empty();
      // alert(11);
        this.innerHTML = '<input type="text" />';
        var input = this.children[0];
        input.value = str;
        input.select(); // 文本框里面的文字处于选定状态
        // 当我们离开文本框就把文本框里面的值给span 
        input.onblur = function() {
        this.parentNode.innerHTML = this.value;
        };
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e) {
        if (e.keyCode === 13) {
        // 手动调用表单失去焦点事件  不需要鼠标离开操作
        this.blur();
        }
      }
  }
  ​