148 lines
3.7 KiB
JavaScript
148 lines
3.7 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 || {};
|
|
|
|
|
|
$(function () {
|
|
initNavBarByEle();
|
|
})
|
|
|
|
/**
|
|
* 初始全頁面 yt tab
|
|
* */
|
|
function initNavBarByEle() {
|
|
/*_ytTabInited = [];*/
|
|
$(".yt-navbar").each(function (index, value) {
|
|
let type = null;
|
|
if ($(value).hasClass("yt-left-navbar")) {
|
|
type = "left";
|
|
}
|
|
let option = { element: value, type: type };
|
|
let navbar = new YourTeamNavbar(option);
|
|
})
|
|
}
|
|
|
|
class YourTeamNavbar {
|
|
constructor(option = {}) {
|
|
this.element = option.element;
|
|
this.type = option.type ?? "left";
|
|
this.isOpen = false;
|
|
this.init();
|
|
}
|
|
|
|
init = function () {
|
|
this.initClose();
|
|
this.checkIsOpen();
|
|
$(this.element)[0]._ytNavbar = this;
|
|
this.chkTrigger();
|
|
}
|
|
|
|
checkIsOpen = function () {
|
|
if ($(this.element).is(":visible")) {
|
|
this.isOpen = true;
|
|
} else {
|
|
this.isOpen = false;
|
|
}
|
|
}
|
|
|
|
open = function () {
|
|
if (this.type == "left") {
|
|
let curLeft = parseInt($(this.element).css("left").split("px")[0]);
|
|
if (curLeft >= 0) {
|
|
$(this.element).css("opacity", 0);
|
|
$(this.element).show();
|
|
let width = $(this.element)[0].offsetWidth;
|
|
$(this.element).css("left",0 - width);
|
|
$(this.element).hide();
|
|
$(this.element).css("opacity", 1);
|
|
}
|
|
$(this.element).show();
|
|
$(this.element).animate({ left: 0}, 200, () => {
|
|
this.checkIsOpen();
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
close = function () {
|
|
let width = $(this.element)[0].offsetWidth;
|
|
if (this.type == "left") {
|
|
$(this.element).animate({ left: 0 - width }, 200, () => {
|
|
$(this.element).hide();
|
|
this.checkIsOpen();
|
|
})
|
|
}
|
|
}
|
|
|
|
initClose = function () {
|
|
|
|
let width = $(this.element)[0].offsetWidth;
|
|
if (this.type == "left") {
|
|
$(this.element).css("left", 0 - width);
|
|
$(this.element).hide();
|
|
}
|
|
}
|
|
|
|
toggle = function () {
|
|
if (this.isOpen) {
|
|
this.close();
|
|
} else {
|
|
this.open();
|
|
}
|
|
}
|
|
|
|
chkTrigger = function () {
|
|
$("[data-toggle=navbar]").each((idx, ele) => {
|
|
let target = $(ele).data("target");
|
|
if ($(this.element)[0] == $(target)[0]) {
|
|
$(ele).off("click").on("click", () => {
|
|
this.toggle();
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
$.fn.YTNavbar = function (method) {
|
|
let nbObj = $(this)[0]._ytNavbar;
|
|
let target = $(this).data("target");
|
|
if (!nbObj && $(target).length != 0) {
|
|
nbObj = $(target)[0]._ytNavbar;
|
|
}
|
|
|
|
if (!nbObj) return this;
|
|
|
|
if (method == "show") {
|
|
nbObj.open();
|
|
} else if (method == "hide") {
|
|
nbObj.close();
|
|
} else if (method == "init") {
|
|
nbObj.init();
|
|
}
|
|
|
|
return nbObj;
|
|
|
|
}
|
|
|
|
function getTogNavbar() {
|
|
$("[data-toggle=navbar]").each((idx, ele) => {
|
|
let target = $(ele).data("target");
|
|
|
|
$(ele).off("click").on("click", function () {
|
|
let ngObj = $(target)[0]._ytNavbar;
|
|
ngObj.toggle();
|
|
})
|
|
})
|
|
|
|
}
|
|
|
|
YT.NavBar = YT.NavBar || YourTeamNavbar; |