当前位置:网站首页>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:36 【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++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World