Js 面向对象 动态添加标签页

Js 面向对象 动态添加标签页

 

var that;

class Tab {

    constructor(id) {

            // 获取元素

            that = this;

            this.main = document.querySelector(id);

            this.add = this.main.querySelector('.tabadd');

            // li 的父元素

            this.ul = this.main.querySelector('.fisrstnav ul:first-child');

            // section 的父元素

            this.fsection = this.main.querySelector('.tabscon');

            this.init();

        }

        // 初始化操作 让相关元素绑定事件

    init() {

            this.updateNode();

            this.add.onclick = this.addTab;

            for (var i = 0; i < this.lis.length; i++) {

                this.lis[i].index = i;

                this.lis[i].onclick = this.toggleTab;

                this.remove[i].onclick = this.removeTab;

                this.spans[i].ondblclick = this.editTab;

                this.sections[i].ondblclick = this.editTab;

            }

        }

        //  动态添加元素 需要从新获取里面的元素

    updateNode() {

            this.lis = this.main.querySelectorAll('li');

            this.sections = this.main.querySelectorAll('section');

            this.remove = this.main.querySelectorAll('.icon-guanbi');

            this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');

        }

        // 1 切换功能

    toggleTab() {

            // console.log(this.index);

            that.clearClass();

            this.className = 'liactive';

            that.sections[this.index].className = 'conactive';

        }

        // 清除所有 li 和 section 的类

    clearClass() {

            for (var i = 0; i < this.lis.length; i++) {

                this.lis[i].className = '';

                that.sections[i].className = '';

            }

        }

        // 2 添加功能

    addTab() {

            that.clearClass();

            // alert(1);

            // 1 创建 li 元素和 section 元素

            var random = Math.random();

            var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';

            var section = '<section  class="conactive">测试' + random + '</section>';

            // 2 把这两个元素追加到对应的父元素里面 

            that.ul.insertAdjacentHTML('beforeend', li);

            that.fsection.insertAdjacentHTML('beforeend', section);

            that.init();

        }

        // 3 删除功能

    removeTab(e) {

            // 阻止冒泡， 防止触发 li 的点击切换事件

            e.stopPropagation();

            var index = this.parentNode.index;

            // 删除对应的 li 和 section remove()方法可以直接删除指定的元素

            that.lis[index].remove();

            that.sections[index].remove();

            that.init();

            // 当删除不是选中状态li 的时候,原来的选中状态 li 保持不变

            if (document.querySelector('.liactive')) return;

            // 当删除了选中状态的li, 让前一个li 处于选定状态

            index--;

            // 手动调用点击事件

            that.lis[index] && that.lis[index].click();

        }

        // 4 修改功能

    editTab() {

        // 双击禁止选定文字

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        var str = this.innerHTML;

        this.innerHTML = '<input type="text" />';

        var input = this.children[0];

        input.value = str;

        //  让文本框的内容处于选中状态

        input.select();

        // 当鼠标离开文本框 就把文本框里面的值给span

        input.onblur = function() {

                if (this.value != '') {

                    this.parentNode.innerHTML = this.value;

                } else {

                    this.parentNode.innerHTML = str;

                }

            }

            // 按下回车也可以把文本框的值给span 

        input.onkeyup = function(e) {

            if (e.keyCode == 13) {

                // 手动调用表单失去焦点事件

                this.blur();

            }

        }

    }

}

new Tab('#tab');