@ecoding/components.tabs
v0.0.12
Published
> TODO: description
Downloads
16
Readme
@ecoding/components.tabs
TODO: description
Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<body>
<div id="Node"></div>
<div>
<button id="add">新增tab(超出最大范围会自动删除不活跃tab)</button><br /><br />
<button id="focus">获取聚焦tab</button><br /><br />
<button id="focusIndex">获取聚焦tab下标</button><br /><br />
<img src="" alt="">
</div>
<script src="../lib/main.umd.js"></script>
<script>
const easeTab = new window.EaseTabs({
// fixed: true,
toolTipKeys: "title",
max: 4
});
easeTab.init({
container: "#Node",
initTabs: [{
title: "1各位各位各位各位让各人各人各个人",
icon:"https://yfb-fdd-item-icons.oss-ap-southeast-1.aliyuncs.com/opshields/scisaas/2023-04/d666ea8d-c9ed-46f0-89c1-f1db7a25f7e1.160_160.png"
},{
title: "2f we fe w f we k l g n k le r n g"
},{
title: "3绯闻绯闻绯闻分",
icon: "https://yfb-fdd-item-icons.oss-ap-southeast-1.aliyuncs.com/opshields/scisaas/2023-04/2b0db321-5a5e-4e08-9b70-4a791c1d2f2d.160_160.png"
},{
title: "4的方式打发"
}]
});
// 更新tab
// setTimeout(() => {
// easeTab.updateTab(0, {
// title: "3绯闻绯闻绯闻分",
// icon: "https://yfb-fdd-item-icons.oss-ap-southeast-1.aliyuncs.com/opshields/scisaas/2023-04/2b0db321-5a5e-4e08-9b70-4a791c1d2f2d.160_160.png"
// })
// }, 3000)
document.querySelector("#add").addEventListener("click", () => {
easeTab.addTab({
title: "5各位各位各位各位让各人各人各个人"
});
});
// document.querySelector("#remove").addEventListener("click", () => {
// easeTab.removeFocus();
// });
// document.querySelector("#remove2").addEventListener("click", () => {
// easeTab.removeUnActive();
// });
document.querySelector("#focus").addEventListener("click", () => {
console.log(easeTab.getFocusTab());
});
document.querySelector("#focusIndex").addEventListener("click", () => {
console.log(easeTab.getFocusIndex());
});
easeTab.on("add", (tab, process) => {
console.log(`add-上次聚焦下标-${tab.preTab.index},add-当前聚焦下标-${tab.focusTab.index},删除了不活跃tab下标-${tab.removeIndex}`);
console.log(`add-上次进程Id-${process.preProcessId},add-聚焦进程id-${process.focusProcessId},删除了不活跃进程id-${process.removeProcessId}`);
});
easeTab.on("remove", (tab, process) => {
console.log(`remove-删除的下标-${tab.removeTab.index},remove-当前聚焦下标-${tab.focusTab.index}`);
console.log(`remove-删除进程Id-${process.removeProcessId},remove-当前聚焦进程Id-${process.focusProcessId}`);
});
easeTab.on("move", (tab) => {
console.log(`move-上次聚焦下标-${tab.preTab.index}`);
console.log(`move-当前聚焦下标-${tab.focusTab.index}`);
console.log(easeTab.getTabs());
});
easeTab.on("change", (tab, process) => {
console.log(`change-上次聚焦下标-${tab.preTab.index},change-当前聚焦下标-${tab.focusTab.index}`);
console.log(`change-上次进程Id-${process.preProcessId},change-当前进程Id-${process.focusProcessId}`);
console.log(easeTab.getTabs());
});
</script>
</body>
</html>