n定义一个tab的类,为该类添加切换/添加/删除/修改方法
n实例化对象,获取到需要操作的元素(整个个容器,tab标题栏,tab内容)
n添加初始化方法,为tab标题绑定点击事件获取到对应的下标
// 1.点击tab栏，可以切换效果
// 2.点击+号，可以添加tab项和内容项
// 3.点击X号，可以删除当前tab项和内容项
// 4.双击tab项文字或内容项文字，可以修改里面文字内容
u为tab标题绑定的事件触发切换功能的方法
u在切换的方法中将点击的tab标题添加激活的类样式,为当前点击的tab标题对应的content元素添加激活的类样式
u注意this指向的修改
u为添加按钮绑定点击事件
u创建新的tab标题 和 新的 tab 内容,并将把创建的两个元素利用 insertAdjacentHTML()追加到对应的父元素中
u注意清除之前所有兄弟元素的激活类样式
n因为添加过后的tab标题和内容未及时更新,会出现多个激活的bug
n单独定义一个更新的方法在初始化的时候调用
n在点击添加的时候再次调用初始化的方法
n获取所有tab标题的x按钮并为每一个tab标题的x号绑定点击事件(一定记得是在更新的方法中获取,否则新添加的tab栏获取不到,代码会报错)
n在tab类的删除方法中处理: 点击x获取对应的索引,注意获取的索引号是当前x号的父元素的索引,要读取parentNode.index
n因为tab标题本身有点击事件,x号的点击事件会向上传递,需要阻止事件冒泡
n将记录下来的索引找到对应的tab标题和tab内容删除
n重新初始化tab标题与tab内容的数量
点击删除选中状态的tab的标题后让前一个tab标题选中
n将索引自减
n手动调用click事件
u删除的标签是未激活状态的状态,原来选中状态的标签的激活样式不变
n点击删除选中状态的tab的标题后让前一个tab标题选中
n如果删除的tab标题未激活,那么原来选中激活的tab标题不变
n在更新的方法中获取到所有的盛放文本的span标签
n通过遍历绑定双击事件dblclick触发编辑的方法
n在编辑的方法中首先禁止选中文本使用 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
n在当前span中创建一个文本框
n在编辑方法中先将之前span标签的文字存储,然后将存储的文字赋值给文本框的value值并且文本默认选中,调用select()方法
n当文本框失去焦点的时候,将修改的内容设置给span
n通过按下回车完成内容的修改,为文本框绑定keyup事件,判断用户的键盘码,调用文本框的失去焦点方法
n获取所有的tab内容,遍历绑定双击事件触发编辑方法
n编辑方法中先将之前span标签的文字存储,然后将存储的文字赋值给文本框的value值并且文本默认选中,调用select()方法
n按下回车方式实现修改,为文本框绑定keyup事件,判断键盘码实现
n获取所有的tab内容元素,遍历绑定双击事件触发编辑方法