js实现tab栏类的封装

最新推荐文章于 2023-10-26 09:05:53 发布

GGGGGG.enough

最新推荐文章于 2023-10-26 09:05:53 发布

阅读量459

点赞数

文章标签： javascript es6 css3 html5

本文链接：https://blog.csdn.net/ggbee_/article/details/107894954

版权

首先简易实现Tab栏样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-tab栏类</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 400px;
            border: 1px solid #00f;
            margin: 50px auto 0px;
        }

        .tablist {
            height: 40px;
            width: 100%;
        }

        .tablist ul {
            float: left;
            height: 100%;
        }

        .tablist li {
            position: relative;
            float: left;
            width: 80px;
            height: 38px;
            list-style: none;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .tablist li span {
            display: inline-block;
            width: 80px;
            height: 100%;
            line-height: 38px;
            color: #333;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
        }

        .tablist li input {
            width: 60px;
            height: 25px;
            outline: none;
        }

        .tablist li i {
            position: absolute;
            top: 0;
            right: 0;
            height: 15px;
            width: 10px;
            line-height: 15px;
            text-align: center;
            cursor: pointer;
            background-color: #000;
            color: #fff;
            font-size: 12px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;

        }

        .tablist li.active {
            border-bottom: none;
        }

        .add {
            float: right;
            height: 40px;
            line-height: 40px;
            padding-right: 10px;

        }

        .add a {
            color: #333;
            text-decoration: none;
            color: skyblue;
        }

        .clearfix::after {
            content: ".";
            display: block;
            font-size: 0;
            line-height: 0;
            clear: both;
        }

        .tabcontent {
            width: 100%;
            height: 360px;
        }

        .tabcontent section {
            display: none;
            width: 100%;
            height: 100%;
            text-align: center;
            margin-top: 100px;
            font-size: 28px;
        }

        .tabcontent section.on {
            display: block;
        }
    </style>
</head>

<body>
    <!-- tab栏切换 -->
    <div class="container" id="tab">
        <!-- tab选项 -->
        <nav class="tablist">
            <ul class="clearfix">
                <li class="active"><span>选项卡一</span><i>×</i></li>
                <li><span>选项卡二</span><i>×</i></li>
                <li><span>选项卡三</span><i>×</i></li>
            </ul>
            <div class="add"><a href="javascript:;">+</a></div>
        </nav>

        <!-- section部分 -->
        <div class="tabcontent">
            <section class="on">选项卡一</section>
            <section>选项卡二</section>
            <section>选项卡三</section>
        </div>
    </div>
    <script src="./Tab.js"></script>

</body>

</html>

然后创建Tab类实现选项卡的切换，添加，删除，修改的功能；当每次创建这样结构的tab栏，只需要实例化类就可以拥有这样功能，提高代码的复用度；也符合面向对象开发编程的思想；

代码如下：

// tab类 js文件 增删改查文件
var that;
class Tab {
    constructor(id) {
        // 获取元素
        that = this;
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.add a');
        this.ul = this.main.querySelector('.tablist ul:first-child');
        this.tabcontent = this.main.querySelector('.tabcontent');

        // 调用初始化函数
        this.init();
    }

    init() {
        this.updateNode();
        // 初始化函数  让相关元素绑定事件
        // 切换
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.dels[i].onclick = this.removeTab;  //移动tab栏切换
            this.spans[i].ondblclick = this.editTab; //编辑tab栏
            this.sections[i].ondblclick = this.editTab;
        }

        // 添加
        this.add.onclick = this.addTab;
    }

    // 获取所有的小li和section
    updateNode() {
        // 获取后来添加的元素  然后 绑定事件
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        // 删除按钮
        this.dels = this.main.querySelectorAll('.tablist i');
        this.spans = this.main.querySelectorAll('.tablist li span:first-child');
    }

    // 1. 切换功能
    toggleTab() {
        // console.log(this.index);
        that.clearClass();
        this.className = 'active';  //当前的选中 
        that.sections[this.index].className = 'on';
    }

    clearClass() {
        // 初始化函数  让相关元素绑定事件
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    // 2. 添加功能
    addTab() {
        // 清楚原来的类
        that.clearClass();
        // 创建一个li和section元素 然后放到对应的父元素中 
        var li = '<li class="active"><span>新选项卡</span><i>×</i></li>';
        var section = '<section class="on">测试' + Math.random() + '</section>';
        // 支持字符串来创建元素;
        that.ul.insertAdjacentHTML('beforeend', li);
        that.tabcontent.insertAdjacentHTML('beforeend', section);

        that.init();
    }

    // 3. 删除功能
    removeTab(e) {
        // 防止误删
        if (confirm('你确定要删除吗？')) {

            e.stopPropagation();    //  阻止事件冒泡到父级 li切换
            var index = this.parentNode.index;
            // console.log(index);
            // remove() 方法可以直接删除指定的元素
            that.lis[index].remove();
            // that.ul.removeChild(this.parentNode);
            that.sections[index].remove();
            that.init();
            if (document.querySelector('active')) return;

            // 当我们删除了选定状态的li 然后让前面的处于选定按钮
            index--;
            that.lis[index] && that.lis[index].click();
        }
    }

    // 4. 修改功能
    editTab() {
        var _this = this;
        var str = this.innerHTML;
        // 静止选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.getSelection.empty();

        // 生成一个input 输入框 可以就了
        this.innerHTML = '<input type="text">';
        var input = this.children[0];
        input.value = str;
        input.select(); //  input 的文字处于选中状态
        // console.log(input.value);

        // 离开焦点  将文字选中就将文字放入
        input.onblur = function () {
            // 获取之前的值 
            if (this.value.trim() !== '') {
                // 如果不为空
                _this.innerHTML = this.value;
            } else {
                _this.innerHTML = str;
            }
        }

        // 按回车键 完成操作
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }
}

// 实例化类
new Tab('#tab');

复制两者代码即可实现功能；如有bug欢迎指出~~~

GGGGGG.enough

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现tab栏类的封装

首先简易实现Tab栏样式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01-tab栏类</title> <style>
复制链接

扫一扫