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 () {
})

/**
 * 初始全頁面 yt tab
 * */
function initTabsByEle() {
    $("[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 YT.Tab({ tabName: tabName })
            _ytTabInited.push(tabName);
        }
    })
}

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

    init = function () {
        if (_ytTabInited.indexOf(this.tabName) != -1) {
            _ytTabInited.splice($.inArray(this.tabName, _ytTabInited), 1);
            $(`[data-tabname=${this.tabName}][data-target]`).off("click").unbind("click");
        }
        this.event();
        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
        $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
        _ytTabInited.push(this.tabName);
    }

    event = function () {
        let clsObj = this;

        // Tab Item 按鈕 click
        $(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e) {
            let target = $(this).data("target");
            let obj = this;
            $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active");
            $(obj).addClass("active");
            // 觸發 yt:tab:change事件
            $(obj).trigger("yt:tab:change");
            let tabName = $(target).data("tabname");
            if (tabName) {
                // 找出該觸發對象 block
                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;