49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
|
|
|||
|
|
|
|||
|
|
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 YTTab {
|
|||
|
|
constructor(option = {}) {
|
|||
|
|
this.tabName = option.tabName ?? null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init();
|
|||
|
|
|
|||
|
|
init() {
|
|||
|
|
$(`[data-tabname=${this.tabName}][data-target][data-tabrole='child']`).css("display", "none");
|
|||
|
|
$(`[data-tabname=${this.tabName}][data-target][data-tabrole='child']`).first().show();
|
|||
|
|
|
|||
|
|
this.event();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
event() {
|
|||
|
|
// 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;
|
|||
|
|
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");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|