<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    <body>
        <div id="Node"></div>
        <div>
            <button id="add">新增tab(超出最大范围会自动删除不活跃tab)</button><br /><br />
            <button id="focus">获取聚焦tab</button><br /><br />
            <button id="focusIndex">获取聚焦tab下标</button><br /><br />
            <img src="" alt="">
        </div>

        <script src="../lib/main.umd.js"></script>
        <script>
            const easeTab = new window.EaseTabs({
                // fixed: true,
                toolTipKeys: "title",
                max: 4
            });
            easeTab.init({
                container: "#Node",
                initTabs: [{
                    title: "1各位各位各位各位让各人各人各个人",
                    icon:"https://yfb-fdd-item-icons.oss-ap-southeast-1.aliyuncs.com/opshields/scisaas/2023-04/d666ea8d-c9ed-46f0-89c1-f1db7a25f7e1.160_160.png"
                },{
                    title: "2f  we fe w f we k l g n k le r n g"
                },{
                    title: "3绯闻绯闻绯闻分",
                    icon: "https://yfb-fdd-item-icons.oss-ap-southeast-1.aliyuncs.com/opshields/scisaas/2023-04/2b0db321-5a5e-4e08-9b70-4a791c1d2f2d.160_160.png"
                },{
                    title: "4的方式打发"
                }]
            });

            // 更新tab
            // setTimeout(() => {
            //     easeTab.updateTab(0, {
            //         title: "3绯闻绯闻绯闻分",
            //         icon: "https://yfb-fdd-item-icons.oss-ap-southeast-1.aliyuncs.com/opshields/scisaas/2023-04/2b0db321-5a5e-4e08-9b70-4a791c1d2f2d.160_160.png"
            //     })
            // }, 3000)

            document.querySelector("#add").addEventListener("click", () => {
                easeTab.addTab({
                    title: "5各位各位各位各位让各人各人各个人"
                });
            });
            // document.querySelector("#remove").addEventListener("click", () => {
            //     easeTab.removeFocus();
            // });
            // document.querySelector("#remove2").addEventListener("click", () => {
            //     easeTab.removeUnActive();
            // });
            document.querySelector("#focus").addEventListener("click", () => {
                console.log(easeTab.getFocusTab());
            });

            document.querySelector("#focusIndex").addEventListener("click", () => {
                console.log(easeTab.getFocusIndex());
            });

            easeTab.on("add", (tab, process) => {
                console.log(`add-上次聚焦下标-${tab.preTab.index}，add-当前聚焦下标-${tab.focusTab.index}，删除了不活跃tab下标-${tab.removeIndex}`);
                console.log(`add-上次进程Id-${process.preProcessId}，add-聚焦进程id-${process.focusProcessId}，删除了不活跃进程id-${process.removeProcessId}`);
            });
            
            easeTab.on("remove", (tab, process) => {
                console.log(`remove-删除的下标-${tab.removeTab.index}，remove-当前聚焦下标-${tab.focusTab.index}`);
                console.log(`remove-删除进程Id-${process.removeProcessId}，remove-当前聚焦进程Id-${process.focusProcessId}`);
            });

            easeTab.on("move", (tab) => {
                console.log(`move-上次聚焦下标-${tab.preTab.index}`);
                console.log(`move-当前聚焦下标-${tab.focusTab.index}`);
                console.log(easeTab.getTabs());
            });

            easeTab.on("change", (tab, process) => {
                console.log(`change-上次聚焦下标-${tab.preTab.index}，change-当前聚焦下标-${tab.focusTab.index}`);
                console.log(`change-上次进程Id-${process.preProcessId}，change-当前进程Id-${process.focusProcessId}`);
                console.log(easeTab.getTabs());
            });


        </script>
    </body>
</html>

FAQs

What is @ecoding/components.tabs?

Is @ecoding/components.tabs popular?

Is @ecoding/components.tabs well maintained?

Package last updated on 03 Jul 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install