76 lines
2.5 KiB
JavaScript
76 lines
2.5 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 () {
|
|
})
|
|
|
|
/**
|
|
* 初始全頁面 yt tab
|
|
* */
|
|
function initTabsByEle() {
|
|
/*_ytTabInited = [];*/
|
|
$("[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; |