zoukankan html css js c++ java
ES6学习-封装tab选项卡

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            .box {
                border: 1px solid #333;
                box-sizing: border-box;
                overflow: hidden;
            }
            
            .box>ul>li {
                border: 1px solid #333;
                font-size: 20px;
                color: black;
            }
            
            .box>ol {
                border: 1px solid #333;
            }
            
            .box>ol>li {
                line-height: 260px;
                text-align: center;
                font-size: 50px;
                color: black;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>
    </body>
    <script type="text/javascript">
        class Tabs {
            constructor(ele, options = {}, callback = () => {}) {
                if(options === null) {
                    options = {}
                }
                //this.ele = document.querySelectorAll(ele);
                this.ele = document.querySelector(ele);
                this.btnsBox = this.ele.querySelector("ul");
                this.tabsBox = this.ele.querySelector("ol");
                this.btns = this.ele.querySelectorAll("ul>li");
                this.tabs = this.ele.querySelectorAll("ol>li");
                this.default = {
                    tabBoxWidth: options.tabBoxWidth || '600px',
                    tabBoxHeight: options.tabBoxHeight || '300px',
                    tabHeight: options.tabHeight || '40px',
                    currentTabIndex: options.currentTabIndex || 0,
                    tabBtnActiveStyle: options.tabBtnActiveStyle || {
                        backgroundColor: 'skyblue'

                    },
                    tabBtnUnActiveStyle: options.tabBtnUnActiveStyle || {
                        backgroundColor: "orange"
                    }
                }
                this.currentIndex = this.default.currentTabIndex;
                this.callback = callback;
                this.initStyle();
                this.initEvents();
            }

            initStyle() {
                // 整个选项卡的宽高
                this.ele.style.width = this.default.tabBoxWidth;
                this.ele.style.height = this.default.tabBoxHeight;

                // 选项卡按钮宽高和基础样式
                this.btnsBox.style.width = this.default.tabBoxWidth;
                this.btnsBox.style.height = this.default.tabHeight;
                this.btnsBox.style.display = 'flex';
                this.btnsBox.style.justifyContent = 'flex-start';
                this.btnsBox.style.alignItems = 'center';
                if(this.btns.length) {
                    const btnWidth = parseInt(parseInt(this.btnsBox.style.width) / this.btns.length);
                    this.btns.forEach((item, index) => {
                        item.style.width = btnWidth + 'px';
                        item.style.height = this.btnsBox.style.height;
                        item.style.lineHeight = this.btnsBox.style.height;
                        item.style.textAlign = 'center';
                        item.style.cursor = 'pointer';
                        if(index == this.default.currentTabIndex) {
                            for(let keys in this.default.tabBtnActiveStyle) {
                                item.style[keys] = this.default.tabBtnActiveStyle[keys];
                            }
                        } else {
                            for(let keys in this.default.tabBtnUnActiveStyle) {
                                item.style[keys] = this.default.tabBtnUnActiveStyle[keys];
                            }
                        }
                    });
                }

                // 卡片宽高和 基础样式
                this.tabsBox.style.width = this.default.tabBoxWidth;
                this.tabsBox.style.height = (
                    parseInt(this.default.tabBoxHeight) - parseInt(this.default.tabHeight)
                ) + 'px';
                this.tabsBox.style.position = 'relative';
                this.tabs.forEach((item, index) => {
                    item.style.position = 'absolute';
                    item.style.width = this.tabsBox.style.width;
                    item.style.height = this.tabsBox.style.height;
                    item.style.top = 0;
                    item.style.left = 0;
                    if(index == this.default.currentTabIndex) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });

            }

            initEvents() {
                this.btns.forEach((item, index) => {
                    item.addEventListener('click', () => {
                        this.btns.forEach((k, i) => {
                            for(let keys in this.default.tabBtnUnActiveStyle) {
                                this.btns[i].style[keys] = this.default.tabBtnUnActiveStyle[keys];
                            }
                        });
                        this.tabs.forEach((k, i) => {
                            this.tabs[i].style.display = 'none';
                        });
                        for(let keys in this.default.tabBtnActiveStyle) {
                            this.btns[index].style[keys] = this.default.tabBtnActiveStyle[keys];
                        }
                        this.tabs[index].style.display = 'block';
                        this.currentIndex = index;
                        this.callback(this.currentIndex);
                    });
                });
            }

        }
        let tab = new Tabs(".box", null, function(index) {
            console.log(index);
        });
        console.log(tab);
    </script>

</html>
查看全文
相关阅读:
爬过的第一个坑
 Ecshop后台邮件群发
 ECShop 首页调用积分商城里面的的商品
 隐藏select右边的箭头按钮
 让IE6支持PNG透明图片
 PHP替换函数，一些正则！
php判断终端是手机还是电脑访问网站代码
 ECshop在文章列表页调用文章简介
 Ecshop删除no_license点击查看云登陆失败，您未有license
Ecshop商品相册鼠标经过小图切换显示大图
原文地址：https://www.cnblogs.com/xiejn/p/14137926.html