js面向对象思维来实现 tab栏增删改查功能
2020-03-18 本文已影响0人
小棋子js
如何用面向对象的思路方法来实现tab栏的切换、编辑、增加、删除功能。用到了很多ES6的一些语法 不兼容ie低版本
image.png
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>对象实现的tab</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.main h2 {
margin: 20px auto;
text-align: center;
}
.tabsbox {
width: 600px;
margin: 0 auto;
border: 1px solid #ebebeb;
height: 400px;
}
.firstnav {
height: 56px;
border-bottom: 1px solid #ebebeb;
}
.tabadd {
float: right;
border: 1px solid #ebebeb;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 10px;
cursor: pointer;
}
.firstnav ul{
float: left;
}
.firstnav li{
float: left;
border-right: 1px solid #ebebeb;
height: 56px;
padding: 0 24px;
line-height: 56px;
position: relative;
min-width: 60px;
}
.firstnav li i {
position: absolute;
right:8px;
top: -12px;
color: red;
}
.firstnav .liactive {
height: 57px;
margin-bottom: -1px;
background: #fff;
}
.tabscon .conactive {
display: block;
}
.tabscon section {
display: none;
width: 100%;
height: 100%;
padding: 20px;
}
</style>
</head>
<body>
<div class="main">
<h2>js面向对象 动态添加标签页</h2>
<div class="tabsbox" id="tab">
<nav class="firstnav">
<ul>
<li class="liactive">
<span>测试1</span>
<i>x</i>
</li>
<li>
<span>测试2</span>
<i>x</i>
</li>
<li>
<span>测试3</span>
<i>x</i>
</li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<div class="tabscon">
<section class="conactive">测试一</section>
<section>测试二</section>
<section>测试三</section>
</div>
</div>
</div>
<script>
let that
class Tab {
constructor(id) {
that=this
// 获取元素
this.main = document.getElementById('tab')
//获取li的父元素
this.ul = this.main.querySelector('.firstnav ul:first-child')
// 获取section的父元素
this.fSection = this.main.querySelector('.tabscon')
this.add = this.main.querySelector('.tabadd')
this.remove = this.main.querySelectorAll('i')
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.togggleTab
this.remove[i].onclick = this.removeTab
this.spans[i].ondblclick = this.editTab
this.sections[i].ondblclick = this.editTab
}
}
//我们动态添加元素，需要从新获取对应的元素
updateNode() {
this.lis = this.main.querySelectorAll('li')
this.sections = this.main.querySelectorAll('section')
this.remove = this.main.querySelectorAll('i')
this.spans = this.main.querySelectorAll('span')
}
//切换功能
togggleTab() {
that.clearClass()
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() {
//创建li元素和section元素
that.clearClass()
let li = ' <li class="liactive" ><span>新选项卡</span><i>X</i></li>'
let section = '<section class="conactive">新内容区</setion>'
that.ul.insertAdjacentHTML('beforeend', li)
that.fSection.insertAdjacentHTML('beforeend',section)
that.init()
}
//删除功能
removeTab(e) {
e.stopPropagation();//阻止冒泡，
let index = this.parentNode.index
//根据索引号删除对应的li 和section
that.lis[index].remove()
that.sections[index].remove()
that.init()
//当我们删除的不是选中状态的元素时，原来的选中状态保持不变
if(document.querySelector('.liactive')) return
//当我们删除 了选中状态的生活，让它前一个li处于选中状态
index--
//手动调用click事件，不需要鼠标触发
that.li[index] && that.lis[index].click()
}
// 修改功能
editTab() {
let str = this.innerHTML
//双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
this.innerHTML ='<input type="text" value="'+ str +'"/>'
let input = this.children[0]
//文本框里面的文字处于选中状态
input.select()
//当鼠标离开文本框就把文本框的值给span
input.onblur = function() {
this.parentNode.innerHTML=input.value
}
// 按回车键也饿可以把文本框里的值给span
input.onkeyup = function(e) {
if(e.keyCode === 13) {
this.blur()
}
}
}
}
let tab = new Tab('#tab')
</script>
</body>
</html>
