ibms-dome/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js

/**
 * YourTeam 上方 Tab 頁籤
 * 
 * 使用方式：
 * <button type="button" data-tabname="testTab" data-target="testDiv1">頁籤按鈕1</button>
 * <button type="button" data-tabname="testTab" data-target="testDiv2">頁籤按鈕2</button>
 * 
 * <div id="testDiv1" data-tabname="testTab" data-tabrole="child"></div>
 * <div id="testDiv2" data-tabname="testTab" data-tabrole="child"></div>
 * */
var YT = YT || {};

var _ytTabInited = []
$(function () {
    $("[data-tabname][data-target]:not([data-tabrole='child'])").each(function (index, value) {
        let tabName = $(value).data("tabname");
        if (_ytTabInited.indexOf(tabName) == -1) { 
            var ytTab = new YTTab({ tabName: tabName })     
            _ytTabInited.push(tabName);
        }
    })
})

class YourTeamTab {
    constructor(option = {}) {
        this.tabName = option.tabName ?? null;
        this.init()
    }

    init = function() {
        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).first().show();
        console.log("inited")
        this.event();
    }

    event = function () {
        let clsObj = this;
        // custom tab
        // example : 
        // <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
        // <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
        $("body").on("click", `[data-tabname=${this.tabName}][data-target]`, function () {
            let target = $(this).data("target");
            let obj = this;
            $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active")
            $(obj).addClass("active")
            let tabName = $(target).data("tabname");
            if (tabName) {
                if ($(target).data("tabrole") == "child") {
                    $(obj).trigger("yt:tab:show");
                    $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();
                    $(target).show().animate({ opacity: 1 }, 200, function () {
                        $(obj).trigger("yt:tab:shown");
                    });
                }
            }
        })
    }
}

YT.Tab = YT.Tab || YourTeamTab;