138 lines
4.2 KiB
JavaScript
138 lines
4.2 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]: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.activeEle = null;
|
|
this.eventArg = { cancel: false };
|
|
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");
|
|
if ($(`[data-tabname=${this.tabName}][data-target].active`).length == 0) {
|
|
let parTabEle = $(`[data-tabname=${this.tabName}][data-target]`).first();
|
|
if (parTabEle.data("toggle") == "tab" || !parTabEle.data("toggle")) {
|
|
$(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
|
|
}
|
|
} else {
|
|
$(`[data-tabname=${this.tabName}][data-target].active`).first().trigger("click");
|
|
}
|
|
|
|
_ytTabInited.push(this.tabName);
|
|
this.setThisObj();
|
|
}
|
|
|
|
setThisObj = function () {
|
|
$(`[data-tabname=${this.tabName}]`).each((idx, ele) => {
|
|
$(ele)[0]._ytTab = this;
|
|
})
|
|
}
|
|
|
|
setActItem = function (element) {
|
|
|
|
this.activeEle = element;
|
|
}
|
|
|
|
updActClass = function () {
|
|
$(`[data-tabname=${this.tabName}]:not([data-tabrole=child])`).removeClass("active");
|
|
$(this.activeEle).addClass("active");
|
|
}
|
|
|
|
event = function () {
|
|
let clsObj = this;
|
|
|
|
// Tab Item 按鈕 click
|
|
$(`[data-tabname=${this.tabName}]`).on("click", function (e) {
|
|
let target = $(this).data("target");
|
|
let obj = this;
|
|
clsObj.eventArg.cancel = false;
|
|
$(obj).trigger("yt:tab:prechange", clsObj.eventArg)
|
|
|
|
if (clsObj.eventArg.cancel) {
|
|
return;
|
|
}
|
|
clsObj.activeEle = obj;
|
|
clsObj.updActClass();
|
|
// 觸發 yt:tab:change事件
|
|
$(obj).trigger("yt:tab:change");
|
|
if (target) {
|
|
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");
|
|
});
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
$.fn.YTTab = function (method,...arg) {
|
|
let tabObj = $(this)[0]._ytTab;
|
|
|
|
if (!tabObj) {
|
|
let tabName = $(this).data("tabname");
|
|
if (tabName && _ytTabInited.indexOf(tabName) == -1) {
|
|
let ytTab = new YT.Tab({ tabName: tabName })
|
|
_ytTabInited.push(tabName);
|
|
tabObj = ytTab;
|
|
} else {
|
|
return this;
|
|
}
|
|
}
|
|
|
|
if (method == "set") {
|
|
tabObj.setActItem(this);
|
|
tabObj.updActClass();
|
|
} else if (method == "setAndClick") {
|
|
tabObj.setActItem(this);
|
|
$(this).click();
|
|
}
|
|
|
|
return tabObj;
|
|
|
|
}
|
|
|
|
YT.Tab = YT.Tab || YourTeamTab; |