基于bootstrap多功能选项卡

所属分类： JQ特效导航其他导航

查看演示立即下载

插件描述：基于bootstrap多功能选项卡，支持动态选项卡切换、定义、添加、删除等等。

nth-tabs是什么？

基于bootstrap的多功能选项卡插件

其他依赖：

滚动条 jquery.scrollbar

图标 font-awesome

使用说明：

CSS

<link href="/" rel="stylesheet">
<link href="/" rel="stylesheet">
<link href="/" rel="stylesheet">
<link href="css/nth.tabs.min.css" rel="stylesheet">

<script src="/"></script>
<script src="/"></script>
<script src="/"></script>
<script src="js/nth.tabs.min.js"></script>

HTML

1	`<div` `class="nth-tabs"` `id="custom-id"></div>`

初始化

1	`nthTabs = $("#custom-id").nthTabs();`

添加一个选项卡

nthTabs.addTab({
 id:'a',
 title:'孙悟空',
 content:'看我七十二变',
});

添加一个不可关闭的选项卡

nthTabs.addTab({
  id:'a',
  title:'孙悟空',
  content:'看我七十二变',
  allowClose:false,
});

添加一个活动状态的选项卡

 nthTabs.addTab({
        id:'a',
        title:'孙悟空',
        content:'看我七十二变',
        active:true,
});

添加多个选项卡

nthTabs.addTab({
        id:'a',
        title:'孙悟空',
        content:'看我七十二变',
}).addTab({
        id:'b',
        title:'孙悟空二号',
        content:'看我七十三变',
});

删除一个选项卡

1	`nthTabs.delTab('id');`

删除其他选项卡

1	`nthTabs.delOtherTab();`

删除所有选项卡

1	`nthTabs.delAllTab();`

切换到指定选项卡

1	`nthTabs.setActTab(id);`

定位到当前选项卡

1	`nthTabs.locationTab();`

左滑动

1	`$('.roll-nav-left').click();`

右滑动

1	`$('.roll-nav-right').click();`

获取左右滑动步值

1	`nthTabs.getMarginStep();`

获取当前选项卡ID

1	`nthTabs.getActiveId();`

获取所有选项卡宽度

1	`nthTabs.getAllTabWidth();`

获取所有选项卡

1	`nthTabs.nthTabs.getTabList();`

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：黏性动画菜单插件Gooey Menu
下一个特效：可拖动窗口（原创）