面向对象实例-实现Tab选项卡的增删改功能
程序员文章站
2022-04-05 08:07:07
...
前言
今天主要就是使用面向对象的思想来简单实现下tab选项卡功能。
具体代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用类-编写选项卡实例</title>
<style>
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.tab {
width: 100%;
height: 500px;
border: 1px solid #aaa;
}
.tab-top, .tab-list {
display: flex;
align-items: center;
justify-content: start;
}
.tab-list li {
position: relative;
padding: 5px 30px;
background-color: #aaa;
}
.tab-list li.active {
background-color: white;
}
.tab-list li .remove{
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
font-weight: normal;
text-align: center;
line-height: 16px;
background-color: #ddd;
border-radius: 50%;
cursor: pointer;
}
.tab-add {
padding: 5px 30px;
cursor: pointer;
}
.tab-content section{
padding: 10px;
height: 200px;
display: none;
}
.tab-content section.active {
display: block;
}
</style>
</head>
<body>
<div id="tab">
<div class="tab-top">
<ul class="tab-list">
<li>
<span>语文</span>
<b class="remove">x</b>
</li>
<li class="active">
<span>数学</span>
<b class="remove">x</b>
</li>
<li>
<span>英语</span>
<b class="remove">x</b>
</li>
</ul>
<div class="tab-add">+</div>
</div>
<div class="tab-content">
<section>语文内容</section>
<section class="active">数学内容</section>
<section>英语内容</section>
</div>
</div>
<script>
class Tab {
constructor(mainId) {
// constructor 里面的this 指向的是 创建的实例对象
this.mainTab = document.querySelector(`#${mainId}`)
this.tabUl = this.mainTab.querySelector('.tab-list')
this.addBtn = this.mainTab.querySelector('.tab-add')
this.tabContent = this.mainTab.querySelector('.tab-content')
this.init()
}
// 初始化
init() {
this.updateNode()
this.addBtn.onclick = this.addTab.bind(this)
for(let i=0; i<this.tabLis.length; i++) {
this.tabLis[i].index = i
this.tabLis[i].onclick = this.toggleTab.bind(this.tabLis[i], this)
this.removeBtn[i].onclick = this.removeTab.bind(this.removeBtn[i], this)
this.texts[i].ondblclick = this.editTab
this.tabSections[i].ondblclick = this.editTab
}
}
// 动态更新节点 新增和删除需要
updateNode() {
this.tabLis = this.mainTab.querySelectorAll('.tab-list li')
this.texts = this.mainTab.querySelectorAll('.tab-list li span')
this.tabSections = this.tabContent.querySelectorAll('section')
this.removeBtn = this.mainTab.querySelectorAll('.tab-list li .remove')
}
// 切换
toggleTab(_this) {
_this.clearClassName()
this.className = 'active'
_this.tabSections[this.index].className = 'active'
}
// 清空选中状态
clearClassName() {
for(let i=0; i<this.tabLis.length; i++) {
this.tabLis[i].className = ''
this.tabSections[i].className = ''
}
}
// 添加
addTab() {
this.clearClassName()
let random = Math.random()
let li = `<li class="active"><span>新选项卡</span><b class="remove">x</b></li>`
let section = `<section class="active">新选项卡${random}内容</section>`
this.tabUl.insertAdjacentHTML('beforeend', li)
this.tabContent.insertAdjacentHTML('beforeend', section)
this.init()
}
// 移除
removeTab(_this, e) {
// 阻止冒泡
e.stopPropagation()
let index = this.parentNode.index
_this.tabLis[index].remove()
_this.tabSections[index].remove()
_this.init()
if(_this.mainTab.querySelector('.active')) return
index > 0 ? index-- : index
_this.tabLis[index] && _this.tabLis[index].click()
}
// 编辑
editTab() {
let str = this.innerHTML
// 双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.innerHTML = `<input type="text" />`
let input = this.children[0]
input.value = str
// 选中文本框的值
input.select()
// 失去焦点的时候 将输入框的值给span
input.onblur = function() {
this.parentNode.innerHTML = this.value
}
input.onkeyup = function(e) {
if(e.keyCode === 13) this.blur()
}
}
}
// 实例化对象
let tab = new Tab('tab')
</script>
</body>
</html>
上一篇： 用vc++编写window窗口
下一篇： 打开新窗口的几个方法