当前位置:主页 > JavsScript库 > 其它 >

使用实时数据创建动态标签 – LiveTabs
栏目分类:其它   发布日期:2021-09-07   浏览次数:

LiveTabs 是一个动态选项卡管理器,允许您像浏览器选项卡一样使用实时数据动态创建和删除选项卡。

如何使用它:

1. 导入 LiveTabs 库。

import { LiveTabs } from "../LiveTabs.js";
// 或
<script src="./LiveTabs.js" ></script>

2. 在文档中加载您选择的主题。

<link rel="stylesheet" href="./themes/theme1/theme1.css" />
<link rel="stylesheet" href="./themes/theme2/theme2.css" />
<link rel="stylesheet" href="./themes/theme3/theme3.css" />
<link rel="stylesheet" href="./themes/theme4/theme4.css" />
<link rel="stylesheet" href="./themes/theme5/theme5.css" />
<link rel="stylesheet" href="./themes/theme6/theme6.css" />

3. 初始化 LiveTabs 库。

const config = {
      tabContainer :'liveTabs_Tabs',
      tabContentContainer:'LiveTabsContainer',
};
const NewTabs = new LiveTabs( config ,'NewTabs');

4. 使用createTab方法创建动态选项卡。

NewTabs.createTab('Tab 1', 1 , ajaxContent('aboutPage' ,1 ));

5. 启用大标签。

const config = {
      tabContainer :'liveTabs_Tabs',
      tabContentContainer:'LiveTabsContainer',
      largeTabs:true,
};

6. 启用花式悬停动画。

const config = {
      tabContainer :'liveTabs_Tabs',
      tabContentContainer:'LiveTabsContainer',
      animate:true
};

官方网站:https://github.com/Apaland/LiveTabs

相关热词: LiveTabs标签页标签

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库