面向对象版 tab 栏切换
功能需求:
1.点击 tab栏,可以切换效果.
2.点击 + 号, 可以添加 tab 项和内容项.
3.点击 x 号, 可以删除当前的tab项和内容项.
双击tab项文字或者内容项文字,可以修改里面的文字内容
基本结构
抽象对象: Tab 对象
1.该对象具有切换功能
2.该对象具有添加功能
3.该对象具有删除功能
4.该对象具有修改功能
面向对象版 tab 栏切换 添加功能
1.点击 + 可以实现添加新的选项卡和内容
2.第一步: 创建新的选项卡li 和 新的 内容 section
3.第二步: 把创建的两个元素追加到对应的父元素中.
4.以前的做法: 动态创建元素 createElement , 但是元素里面内容较多, 需要innerHTML赋值,在 appendChild 追加到父元素里面.
5.现在高级做法: 利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
6.appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素
7.insertAdjacentHTML(追加的位置,‘要追加的字符串元素’)
8.追加的位置有: beforeend 插入元素内部的最后一个子节点之后
9.该方法地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
出现这样的原因是因为，我们后面添加的小li是后添加的，而前面的获取元素是页面加载时，获取已经准备好的。解决方案就是把获取放在一个函数中，加载时调用一次，添加完成后在调动一次init()就可以了
面向对象版 tab 栏切换 删除功能
1.点击 × 可以删除当前的li选项卡和当前的section
2.X是没有索引号的, 但是它的父亲li 有索引号, 这个索引号正是我们想要的索引号
3.所以核心思路是: 点击 x 号可以删除这个索引号对应的 li 和 section
4.但是,当我们动态删除新的li和索引号时,也需要重新获取 x 这个元素. 需要调用init 方法
icon-guanbi是我们要的X号
删除功能
面向对象版 tab 栏切换 编辑功能
1.双击选项卡li或者 section里面的文字,可以实现修改功能
2.双击事件是: ondblclick
3.如果双击文字,会默认选定文字,此时需要双击禁止选中文字
4.window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
5.核心思路: 双击文字的时候, 在 里面生成一个文本框, 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可.
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('.fisrstnav ul:first-child')
// section的父元素
this.fsection=this.main.querySelector('.tabscon');
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.toggleTab;
this.remove[i].onclick=this.removeTab;
this.spans[i].ondblclick = this.editTab;
this.sections[i].ondblclick = this.editTab;
}
}
// 获取所有的小li和section
updateNode(){
this.lis=this.main.querySelectorAll('li')
this.sections=this.main.querySelectorAll('section');
this.remove=this.main.querySelectorAll('.icon-guanbi')
this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
}
// 1.切换功能
toggleTab(){
// console.log(this.index);
that.clearClass()
this.className='liactive';
that.sections[this.index].className='conactive'
}
// clearClass this指向的是that 也就是实例化对象
clearClass(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].className='';
this.sections[i].className='';
}
}
// 2.添加功能
addTab(){
that.clearClass()
//创建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>'
// 追加父元素
that.ul.insertAdjacentHTML('beforeend',li)
that.fsection.insertAdjacentHTML('beforeend',section)
that.init()
}
// 3.删除功能
removeTab(e){
e.stopPropagation();
var index=this.parentNode.index;
console.log(index);
// remove()方法可以直接删除指定的元素
that.lis[index].remove();
that.sections[index].remove();
that.init();
// 当我们删除的不是选中状态的li的时候，原本的状态
if(document.querySelector('.liactive')) return;//return了就是不执行后面的代码
// 当我们点击了选中状态的这个li的时候，让它前一个li处于选中状态
index--;
// 手动调用我们点击事件，不需要鼠标触发
that.lis[index]&&that.lis[index].click();
that.sections[index].click();
}
// 4.修改功能
editTab(){
var str=this.innerHTML;
// 双击禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.innerHTML='<input tpye="text"/>'
var input=this.children[0]
input.value=str
input.select();//文本框里面的文字处于选定状态
// 当我们离开文本框就把文本框里面的值给span
input.onblur=function(){
input.parentNode.innerHTML=this.value;
}
// 按下回车也可以把文本框里面的值给span
input.onkeyup = function(e) {
if (e.keyCode === 13) {
// 手动调用表单失去焦点事件 不需要鼠标离开操作
this.blur();
}
}
}
}
new Tab('#tab');
