当前位置:网站首页>ES6 learning notes (3): teach you to use js object-oriented thinking to realize the function of adding, deleting, modifying and checking tab column
ES6 learning notes (3): teach you to use js object-oriented thinking to realize the function of adding, deleting, modifying and checking tab column
2020-11-06 20:48:00 【Tell me Zhan to hide】
The first two articles focus on classes and objects 、 Class inheritance , If you want to know more about the theory, please refer to 《ES6 Learning notes ( One ): Easy to understand object-oriented programming 、 Classes and objects 》、《ES6 Learning notes ( Two ): Teach you how to play with class inheritance and class objects 》, Today I'd like to share with you how to use js Object oriented thinking to achieve tab Some related functions of the column .
List of articles
Function analysis to be realized
- Click on tab Columns can switch effects
- Click on + Number , You can add tab Items and content items
- Click on X Number , You can delete the current tab Items and content items
- Click on tab Text or content item text , You can modify the font content inside
The object of the portrait : Tab object ( Add, delete, change and search functions )
The function effect is shown in the figure below :
So let's set up a class class Tab:
let that
class Tab {
constructor(id) {
that=this
// Get elements
this.main = document.getElementById('tab')
// obtain li Parent element of
this.ul = this.main.querySelector('.firstnav ul:first-child')
// obtain section Parent element of
this.fSection = this.main.querySelector('.tabscon')
this.add = this.main.querySelector('.tabadd')
this.remove = this.main.querySelectorAll('i')
this.init()
}
// initialization
init() {
this.updateNode()
// init The initialization operation causes the related elements to bind events
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
}
}
// We add elements dynamically , When deleting elements , You need to get the corresponding element again
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')
}
// Switch function
togggleTab() {
}
// eliminate li and section Of class, It mainly realizes the switching function with
clearClass() {
for(var i = 0; i< this.lis.length; i++) {
this.lis[i].className = ''
this.sections[i].className = ''
}
}
// Add functionality
addTab() {
}
// Delete function
removeTab(e) {
}
// Modify the function
editTab() {
}
}
let tab = new Tab('#tab')
Switch function
- Click on the top tab Title switch function , The following corresponds to section It also shows , Other hidden
- Realize the idea , First remove the existing selection class,
- according to li The index of the value , Find what you want to show section, Add corresponding class, Make it show
The main implementation code is :
that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'
Add functions to achieve
- Click on + You can add new tabs and content
- First step : Create a new tab li And new content section
- The second step : Add the two created elements to the corresponding parent element
- Previous practice : Creating elements dynamically createElement, But there's more in the element , need innerHTML Assignment in appendChild Append to the parent element
- Now the advanced approach , utilize insertAdjacentHTML() You can add string format elements directly to the parent element ,appendChild Appending child elements of a string is not supported ,insertAdjacentHTML Support appending string elements
The main code to implement the function is :
// establish li Elements and section Elements
that.clearClass()
let li = ' <li class="liactive" ><span> New tab </span><i>X</i></li>'
let section = '<section class="conactive"> New content area </setion>'
that.ul.insertAdjacentHTML('beforeend', li)
that.fSection.insertAdjacentHTML('beforeend',section)
that.init()
Delete function
- Click on X You can delete the current tab and the current section
- X There is no index number , But its parent element li Index number , This index number is exactly what we want
- So the core idea is : Click on x Can delete the index number corresponding to li and section
The main code to implement the function is :
e.stopPropagation();// To prevent a bubble ,
let index = this.parentNode.index
// Delete the corresponding li and section
that.lis[index].remove()
that.sections[index].remove()
that.init()
// When we delete elements that are not in the selected state , The original selected state remains unchanged
if(document.querySelector('.liactive')) return
// When we delete Life in the selected state , Let it be the first li Selected
index--
// Manual call click event , You don't need a mouse to trigger
that.li[index] && that.lis[index].click()
Editing function
- Double click the tab li perhaps section The words inside , You can modify it
- The double click event is :ondblclick
- If you double-click the text , Will default to the selected text , In this case, you need to double-click to disable the selected text
- window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
- The core idea : When you double-click the text , Generate a text box inside , When you lose focus or press enter and give the value of the text input to the original element
The main code to implement the function is :
let str = this.innerHTML
// Double click to disable selected text
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
this.innerHTML ='<input type="text" value="'+ str +'"/>'
let input = this.children[0]
// The text in the text box is selected
input.select()
// When the mouse leaves the text box, it gives the value of the text box to span
input.onblur = function() {
this.parentNode.innerHTML=input.value
}
// Press enter to give the value in the text box to span
input.onkeyup = function(e) {
if(e.keyCode === 13) {
this.blur()
}
}
summary
This article is mainly through my learning technology summary, and then shared how to use object-oriented ideas and methods to achieve tab Column switching 、 edit 、 increase 、 Delete function . Used a lot of ES6 Some of the syntax .
Case source address :https://github.com/qiuqiulanfeng/tab
版权声明
本文为[Tell me Zhan to hide]所创,转载请带上原文链接,感谢
边栏推荐
- 新建一个空文件占用多少磁盘空间?
- [C] (original) step by step teach you to customize the control element - 04, ProgressBar (progress bar)
- Analysis of ThreadLocal principle
- JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
- Interpretation of Cocos creator source code: engine start and main loop
- Xmppmini project details: step by step from the principle of practical XMPP technology development 4. String decoding secrets and message package
- CCR coin frying robot: the boss of bitcoin digital currency, what you have to know
- Jmeter——ForEach Controller&Loop Controller
- 美团内部讲座|周烜:华东师范大学的数据库系统研究
- How to turn data into assets? Attracting data scientists
猜你喜欢
It is really necessary to build a distributed ID generation service
What is alicloud's experience of sweeping goods for 100 yuan?
Who says cat can't do link tracking? Stand up for me
【自学unity2d传奇游戏开发】地图编辑器
意派Epub360丨你想要的H5模板都在这里,电子书、大转盘、红包雨、问卷调查……
如何对数据库账号权限进行精细化管理?
2020年数据库技术大会助力技术提升
Take you to learn the new methods in Es5
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
Markdown tricks
随机推荐
Live broadcast preview | micro service architecture Learning Series live broadcast phase 3
Multi robot market share solution
Markdown tricks
使用 Iceberg on Kubernetes 打造新一代雲原生資料湖
Outsourcing is really difficult. As an outsourcer, I can't help sighing.
How to get started with new HTML5 (2)
Use modelarts quickly, zero base white can also play AI!
C#和C/C++混合编程系列5-内存管理之GC协同
事件监听问题
hdu3974 Assign the task線段樹 dfs序
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
Introduction to the structure of PDF417 bar code system
【学习】接口测试用例编写和测试关注点
Description of phpshe SMS plug-in
Asp.Net Core learning notes: Introduction
ado.net和asp.net的关系
常用SQL语句总结
視覺滾動[反差美]
Unity性能优化整理
Use modelarts quickly, zero base white can also play AI!