72 lines
2.6 KiB
JavaScript
72 lines
2.6 KiB
JavaScript
/**
|
|
* 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 () {
|
|
|
|
})
|
|
|
|
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","fromInit");
|
|
_ytTabInited.push(this.tabName);
|
|
}
|
|
|
|
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>
|
|
$(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e, arg) {
|
|
console.log(e)
|
|
let target = $(this).data("target");
|
|
let obj = this;
|
|
$(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active")
|
|
$(obj).addClass("active")
|
|
$(obj).trigger("yt:tab:change")
|
|
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; |