- Scrollbar: jQuery Scrollbar
- Icons: Font Awesome
While developing a project, I needed a multi-tab plug-in. After searching the Internet, I found a really confusing version that was too ugly, too old, has too few functions, has many bugs, and is integrated into an existing framework. Nothing I found met my needs, so I made it myself. I wrote this plug-in according to my own needs. If you have any ideas, you can add and modify it yourself and make a pull request. If there is a bad code or a bug in my code, please raise an issue in the github repo. If you think this is a good fit for your project, please use it.
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" rel="stylesheet">
<link href="css/nth-tabs.css" rel="stylesheet">
<link href="css/nth-icons.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<script src="js/nth-tabs.js"></script>
<div class="nth-tabs" id="custom-id"></div>
nthTabs = $("#custom-id").nthTabs();
nthTabs.addTab({
id: 'menu-manage',
title: 'Menu Management',
content: 'This is the menu management page~',
//url: "http://www.nethuige.com",
active: true, // Whether to activate the state, the default is
allowClose: true, //Whether it can be closed, the default is
location: false, //Whether to automatically locate, the default is
fadeIn: true //Whether to enable the fade in and fade out effect, the default is
});
nthTabs.addTab({
id: "web-site",
title: 'URL tab',
url: "http://www.nethuige.com"
});
nthTabs.addTab({
id: "web-site",
title: 'URL tab-' + id,
url: "http://www.nethuige.com"
});
nthTabs.addTab({
id: 'home',
title: 'Home',
content: 'Here is the home page',
allowClose: false
});
nthTabs.addTab({
id: 'role-manage',
title: 'Role Management',
active: false,
content: 'This is the role management page~'
});
nthTabs.addTab({
id: 'menu-manage',
title: 'Menu Management',
active: false,
content: 'This is the menu management page~'
}).addTab({
id: 'role-manage',
title: 'Role Management',
active: false,
content: 'This is the role management page~'
});
nthTabs.addTabs([{
id: 'user-manage',
title: 'User Management',
content: 'This is the user management page~'
}, {
id: 'auth-manage',
title: 'Privilege Management',
content: 'This is the permission management page~'
}]);
nthTabs.delTab('id');
nthTabs. delOtherTab();
nthTabs. delAllTab();
nthTabs.setActTab(id);
nthTabs.toggleTab(id);
nthTabs. locationTab();
$('.roll-nav-left').click();
$('.roll-nav-right').click();
nthTabs.getMarginStep();
nthTabs.getActiveId();
nthTabs.getAllTabWidth();
nthTabs. getTabList();
nthTabs.isExistsTab();