实现效果
SDGIF_Rusult_1.gif
功能介绍
1.上面tab部分双击可以输入内容，失去焦点或者回车都能将输入框里的内容添加上去
2.点击叉号，可以删除当前小框，删除的如果是被选中的，那就自动选中被删除的前面的那一个，
易忘知识点：
1.解决文字禁止双击选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
2.添加节点(element.insertAdjacentHTML(position, text)可以添加字符串，且可以解析字符串)
position:
-
'beforebegin'：元素本身的前面。 -
'afterbegin'：插入元素内部的第一个子例程之前。 -
'beforeend'：插入元素内部的最后一个子例程之后。 -
'afterend'：元素本身的后面。
var li = ' <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
var section = '<section class="conactive">测试' + random + '</section>';
that.ul.insertAdjacentHTML('beforeend', li);
that.tabscon.insertAdjacentHTML('beforeend', section);
3.双击事件
element.ondblclick = function () {}
4.this和that指向问题要细心
代码部分
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>面向对象 Tab</title>
<link rel="stylesheet" href="./styles/tab.css">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<main>
<h4>
Js 面向对象 动态添加标签页
</h4>
<div class="tabsbox" id="tab">
<!-- tab 标签 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab 内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
</main>
<script src="js/text.js"></script>
<!-- <script src="js/tab.js"></script> -->
</body>
</html>
javaScript部分
var that;
class Tab {
//接受传过来的参数
constructor(id) {
that = this;
this.main = document.querySelector(id);
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.add = this.main.querySelector('.tabadd');
this.tabscon = this.main.querySelector('.tabscon');
this.ul = this.main.querySelector('ul');
this.init();
}
init() {
this.updateNode();
this.add.onclick = this.addTab;
//初始化绑定页面中原有的元素
for (var i = 0; i < this.lis.length; i++) {
//给每一个小li自定义一个序号index
this.lis[i].index = i;
this.lis[i].onclick = this.toggleTab;
this.remove[i].onclick = this.removeTab;
this.spans[i].ondblclick = this.edit;
this.sections[i].ondblclick = this.edit;
}
}
updateNode() {
this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
this.remove = this.main.querySelectorAll('.icon-guanbi');
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
}
//切换
toggleTab() {
that.clearClass(); //此处是tab中的所有小li清除类
//当前小li点击之后会添加一个类名liactive，取消下边框
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() {
var random = Math.random();
that.clearClass();
var li = ' <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
var section = '<section class="conactive">测试' + random + '</section>';
//添加
that.ul.insertAdjacentHTML('beforeend', li);
that.tabscon.insertAdjacentHTML('beforeend', section);
that.init(); //让刚添加的也有功能
}
//删除
removeTab(e) {
e.stopPropagation();
var index = this.parentNode.index;
that.lis[index].remove();
that.sections[index].remove();
that.updateNode();
//不初始化一下会出问题
that.init();
//如果我们选删除的不是选定状态下的li,那就就不让前一个点击了
if (document.querySelector('.liactive')) {
return 0;
} else {
index--;
that.lis[index] && that.lis[index].click();
}
//让前一个li添加点击事件
}
//修改
edit() {
//双击禁止选中文字
var str = this.innerHTML;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.innerHTML = '<input type="text">';
var input = this.children[0];
input.value = str;
input.select(); //文本框里的内容处于选中状态
//当鼠标离开文本框那就把文本框里的内容给span
input.onblur = function() {
this.parentNode.innerHTML = input.value;
}
//利用键盘弹起事件，如果是回车键 keycode=13，那就做失去焦点通洋的操作
input.onkeyup = function(e) {
if (e.keyCode === 13) {
this.blur();
}
}
}
}
new Tab('#tab');
网友评论