当前位置:网站首页>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]所创,转载请带上原文链接,感谢
边栏推荐
- ES6 learning notes (4): easy to understand the new grammar of ES6
- 每个大火的“线上狼人杀”平台,都离不开这个新功能
- What are the common problems of DTU connection
- Analysis of ThreadLocal principle
- Ronglian completed US $125 million f round financing
- Axios learning notes (2): easy to understand the use of XHR and how to package simple Axios
- Behind the first lane level navigation in the industry
- How to get started with new HTML5 (2)
- Application of restful API based on MVC
- Interpretation of Cocos creator source code: engine start and main loop
猜你喜欢
StickEngine-架构11-消息队列(MessageQueue)
Pn8162 20W PD fast charging chip, PD fast charging charger scheme
To teach you to easily understand the basic usage of Vue codemirror: mainly to achieve code editing, verification prompt, code formatting
只有1个字节的文件实际占用多少磁盘空间
【:: 是什么语法?】
新建一个空文件占用多少磁盘空间?
How does filecoin's economic model and future value support the price of fil currency breaking through thousands
【转发】查看lua中userdata的方法
Even liver three all night, jvm77 high frequency interview questions detailed analysis, this?
CloudQuery V1.2.0 版本发布
随机推荐
How to play sortable JS vuedraggable to realize nested drag function of forms
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:王涛
华为Mate 40 系列搭载HMS有什么亮点?
python100例項
Digital city responds to relevant national policies and vigorously develops the construction of digital twin platform
C + + and C + + programmers are about to be eliminated from the market
Jmeter——ForEach Controller&Loop Controller
Elasticsearch Part 6: aggregate statistical query
Analysis of ThreadLocal principle
常用SQL语句总结
如何在终端启动Coda 2中隐藏的首选项?
Building a new generation cloud native data lake with iceberg on kubernetes
What are Devops
DC-1靶機
Unity性能优化整理
事务的隔离级别与所带来的问题
The importance of big data application is reflected in all aspects
Take you to learn the new methods in Es5
Introduction to X Window System
Get twice the result with half the effort: automation without cabinet