ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象、类的继承,如果想了解更多理论请查阅《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象》、《ES6学习笔记(二):教你玩转类的继承和类的对象》,今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能。
文章目录
- 要实现的功能分析
- 切换功能
- 添加功能实现
- 删除功能
- 编辑功能
- 总结
要实现的功能分析
- 点击tab栏可以切换效果
- 点击+号,可以添加tab项和内容项
- 点击X号,可以删除当前的tab项和内容项
- 点击tab文字或者内容项文字,可以修改里面的字体内容
抽像对象: Tab对象 (增删改查功能)
实现功能效果如下图:
首先建立一个class 类Tab:
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.addTabfor(var i = 0; i<this.lis.length; i++) {this.lis[i].index = ithis.lis[i].onclick = this.togggleTabthis.remove[i].onclick = this.removeTabthis.spans[i].ondblclick = this.editTabthis.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() {}//清除li和section的class,主要实现切换功能用clearClass() {for(var i = 0; i< this.lis.length; i++) {this.lis[i].className = ''this.sections[i].className = ''}}//添加功能addTab() {}//删除功能removeTab(e) {}// 修改功能editTab() {}
}
let tab = new Tab('#tab')
切换功能
- 点击上面的tab标题实现切换功能,下面对应的section也显示,其他的隐藏
- 实现思路,先去掉已有的选中class,
- 根据li的索引值,找到要显示的section,添加对应的class,使其显示
实现的主要代码是:
that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'
添加功能实现
- 点击+ 可以实现添加新的选项卡和内容
- 第一步:创建新的选项卡li和新的内容section
- 第二步: 把创建的两个元素追加到对应的父元素中
- 以前的做法:动态创建元素createElement,但是元素里面内容较多,需要innerHTML赋值在appendChild追加到父元素里面
- 现在高级做法,利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中,appendChild不支持追加字符串的子元素,insertAdjacentHTML支持追加字符串的元素
实现功能的主要代码是:
//创建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()
删除功能
- 点击X可以删除当前的选项卡和当前的section
- X是没有索引号的,但是它的父元素li有索引号,这个索引号正是我们想要的索引号
- 所以核心思路就是:点击x号可以删除这个索引号对应的li和section
实现功能的主要代码是:
e.stopPropagation();//阻止冒泡,let index = this.parentNode.index//根据索引号删除对应的li 和sectionthat.lis[index].remove()that.sections[index].remove()that.init()//当我们删除的不是选中状态的元素时,原来的选中状态保持不变if(document.querySelector('.liactive')) return//当我们删除 了选中状态的生活,让它前一个li处于选中状态index--//手动调用click事件,不需要鼠标触发that.li[index] && that.lis[index].click()
编辑功能
- 双击选项卡li或者section里面的文字,可以实现修改功能
- 双击事件是:ondblclick
- 如果双击文字,会默认选定文字,此时需要双击禁止选中文字
- window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
- 核心思路:双击文字的时候,在里面生成一个文本框,当失去焦点或者按下回车然后把文本输入的值给原先元素即可
实现功能的主要代码是:
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() //当鼠标离开文本框就把文本框的值给spaninput.onblur = function() {this.parentNode.innerHTML=input.value}// 按回车键也饿可以把文本框里的值给spaninput.onkeyup = function(e) {if(e.keyCode === 13) {this.blur()}}
总结
这篇文章主要是通过我学习的技术总结后来分享了如何用面向对象的思路方法来实现tab栏的切换、编辑、增加、删除功能。用到了很多ES6的一些语法。
案例源码地址:https://github.com/qiuqiulanfeng/tab
ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能相关推荐
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- asp.net初学习实现简单的增删改查功能
在学习中发现网页模板可以大大节约重复的页面代码,同时对于WebSite开发的程序在不同的页面直接调用已写好的代码既不方面,只是作为代码量不大的程序进行开发还是比较方便. get和post的区别get是 ...
- mock模拟的数据能增删改查吗_Mock.js模拟数据,脱离后端独立开发,实现增删改查功能...
在目前容近对端手近对端手近对端手近对端手近我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于 ...
- MVC新手教程三:Entity Framework 4.0 来实现MVC的增删改查功能,10分钟搞定
在这一节,我们使用VS2010自带的EF4.0来实现MVC的增删查改功能,为什么用EF呢?因为如果你自己手写sqlhelper之类,或者是用动软,和我们用EF的速度比,太慢太慢··· 当然,新手还是用 ...
- Java学习(86)Java集合——案例:宠物猫信息管理(HashSet增删改查)
案例:宠物猫信息管理(HashSet增删改查) 需求分析 1. 功能需求 2. 属性 3. 方法 创建宠物猫Cat类,定义构造方法,定义get/set方法 主方法内定义宠物猫对象,将宠物猫对象放入Ha ...
- Android学习笔记---SQLite介绍,以及使用Sqlite,进行数据库的创建,完成数据添删改查的理解
17_创建数据库与完成数据添删改查 -------------------------------------- 1.SQLite介绍:最大特点是,无数据类型; 除了可以使用文件或SharedPref ...
- 原生vue.js实现待办事项清单,支持增删改查
源码部分: <!DOCTYPE html> <html lang="en"> <head><!--设置页面的utf-8编码格式--> ...
- js在浏览器中对cookie进行增删改查
Cookie格式 <name>=<value>; <attribute>; <attribute>eg: id=a3fWa; Expires=Wed, ...
- 【DM】教你用JDBC连接达梦数据库并进行增删改查
JDBC连接达梦 平台及应用软件:Win10+JDK1.8+DM7 连接测试 class Connec{public Connection getConn(){Connection conn=null ...
最新文章
- win客户端与linux服务器C语言套接字socket
- python3.6.4安装教程-python3.6.4如何安装到树莓派3代
- 学起来 —— CSS 入门基础
- SpringBoot 整合Redis 单机、哨兵、集群
- 蓝牙扫描过程解析_智慧定位系统之蓝牙网关在室内定位技术的原理浅析-新导智能...
- vue可以直接进行运算么_Vue实现计算器功能
- 【项目管理】知识域在过程组中的体现
- Codeforces Round #197 (Div. 2): C. Xenia and Weights(记忆化搜索)
- python去除列表指定位置元素_Python实现判断并移除列表指定位置元素的方法
- python算法入门
- Tomcat 服务详解
- apkg格式怎么打开_PDF文件怎么压缩?这里有几个小技巧~
- DHCP动态获取IP地址流程
- Velodyne 16线激光雷达-多雷达版本
- 台式计算机驱动程序未被安装,计算机图形驱动程序安装失败的原因及其解决方法...
- 二极管选型-二极管参数介绍
- MATLAB-plot绘图函数
- 梦想起航商务工作PPT模板
- 华南师范大学校园网自动登录教程
- Features and Characteristics
热门文章
- django mysql filter_Django filter中用contains 在mysql中的问题
- microsoft query sql引用单元格_Microsoft.Office.Interop.Excel操作Excel拾遗
- java程序a-z b-y,请完成下列Java程序:对大写的26个英文字母加密,从键盘输入一个大写字母串,输出这个串加密后的结 - 赏学吧...
- pulse 去马赛克软件_最新黑科技...马赛克也能去了!!
- 模板---使用el选项指定模板/使用template选项指定内联模板/使用template选项指定独立模板/使用render选项指定要挂载的模板
- Bootstrap Table列宽拖动的方法
- file_get_contents('php://input') 和POST的区别
- [k8s]kubeadm k8s免费实验平台labs.play-with-k8s.com,k8s在线测试
- logback 常用配置详解appender
- 几何画板怎样添加操作按钮