当前位置:网站首页>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]所创,转载请带上原文链接,感谢
边栏推荐
- Description of phpshe SMS plug-in
- What are PLC Analog input and digital input
- Diamond standard
- CCR coin frying robot: the boss of bitcoin digital currency, what you have to know
- IPFs rudder filecoin landing at the same time, fil currency price broke a thousand
- 嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:王涛
- For a while, a dynamic thread pool was created, and the source code was put into GitHub
- JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
- What knowledge do Python automated testing learn?
- 每个大火的“线上狼人杀”平台,都离不开这个新功能
猜你喜欢
2020年第四届中国 BIM (数字建造)经理高峰论坛即将在杭举办
如何在终端启动Coda 2中隐藏的首选项?
游戏开发中的新手引导与事件管理系统
意外的元素..所需元素..
理解格式化原理
What is the meaning of sector sealing of filecoin mining machine since the main network of filecoin was put online
How about small and medium-sized enterprises choose shared office?
JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
The method of realizing high SLO on large scale kubernetes cluster
What are Devops
随机推荐
Basic usage of GDB debugging
Introduction to X Window System
华为云微认证考试简介
Kubernetes and OAM to build a unified, standardized application management platform knowledge! (Internet disk link attached)
Pn8162 20W PD fast charging chip, PD fast charging charger scheme
Analysis of query intention recognition
小游戏云开发入门
What are the criteria for selecting a cluster server?
DRF JWT authentication module and self customization
消息队列(MessageQueue)-分析
CloudQuery V1.2.0 版本发布
Look! Internet, e-commerce offline big data analysis best practice! (Internet disk link attached)
Live broadcast preview | micro service architecture Learning Series live broadcast phase 3
游戏主题音乐对游戏的作用
Building a new generation cloud native data lake with iceberg on kubernetes
大道至简 html + js 实现最朴实的小游戏俄罗斯方块
Markdown tricks
Staying up late summarizes the key points of report automation, data visualization and mining, which is different from what you think
An article takes you to understand CSS pagination examples
To teach you to easily understand the basic usage of Vue codemirror: mainly to achieve code editing, verification prompt, code formatting