For chinese README.md, please read 简体中文
classic (fold hidden tabs)
- Zero configuration and auto ajax / iframe
- Can use the templates of bootstrap
- Can refresh window, and all the tabs will keep same as before.
- Navigation tab draggable.
- While
maxTabs : 1or small screen, hide the tab header.
- Add multitabs's CSS in the head
<!-- Multi Tabs -->
<link rel="stylesheet" href="plugins/bootstrap-multitabs/css/style.css">- Add multitabs's JS in the bottom ot body
<!-- Multi Tabs -->
<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>- Bind the content wrapper
<script>
$('#content_wrapper').multitabs();
</script>- At last, add "multitabs" class in the link which you want.
<a class="multitabs" href="pages/index-ajax-2.html">ajax INFO Tab 2</a>** Now, the simple bootstrap-multitabs works! **
[data-type="info"]content type, can be (main | info), info is the default and the normal one. Main just can be 1 tab.[data-iframe="true"]iframe mode, default is false. While false, is the auto mode (for the self page, use ajax, and the external, use iframe)[data-title="new tab"]tab's tittle, if empty or undefined, tab's tittle will be link's text.[data-url="index.html"]this parameter for the object not link.[data-refresh="true"]for force refresh
The following is the default configuration, you can modify as you want.
<script>
$('#content_wrapper').multitabs({
selector : '.multitabs', //selector text to trigger multitabs.
iframe : false, //Global iframe mode, default is false, is the auto mode (for the self page, use ajax, and the external, use iframe)
class : '', //class for whole multitabs
refresh: false, //set to true for global force refresh tab
init : [ //tabs in initial
{
type :'', //content type, may be main | info, if empty, default is 'info'
title : '', //title of tab, if empty, show the URL
content: '', //content html, the url value is useless if set the content.
url : '' //URL
},
{ /** more tabs**/ }, //add more page.
{ /** more tabs**/ }, //add more page.
],
nav : {
backgroundColor : '#f5f5f5', //default nav-bar background color
class : '', //class of nav
draggable : true, //nav tab draggable option
fixed : false, //fixed the nav-bar
layout : 'default', //it can be 'default', 'classic' (all hidden tab in dropdown list), and simple
maxTabs : 15, //Max tabs number (without counting main tab), when is 1, hide the whole nav
maxTitleLength : 25, //Max title length of tab
showCloseOnHover : true, //while is true, show close button in hover, if false, show close button always
style : 'nav-tabs', //can be nav-tabs or nav-pills
},
content : {
ajax : {
class : '', //Class for ajax tab-pane
error : function (htmlCallBack) {
//modify html and return
return htmlCallBack;
},
success : function (htmlCallBack) {
//modify html and return
return htmlCallBack;
}
},
iframe : {
class : '' //Class for iframe tab-pane
}
},
language : { //language setting
nav : {
title : 'Tab', //default tab's tittle
dropdown : '<i class="fa fa-bars"></i>', //right tools dropdown name
showActivedTab : 'Show Activated Tab', //show active tab
closeAllTabs : 'Close All Tabs', //close all tabs
closeOtherTabs : 'Close Other Tabs', //close other tabs
}
}
});
</script>- For iframe's auto-height, please add CSS as blew to your page.
.content-wrapperis the selector using multitabs..wrapperis parent of.content-wrapper, all parent of wrapper multitabs must addheight: 100%
<style type="text/css">
body,
body.full-height-layout .wrapper,
html{
height: 100%;
}
body.full-height-layout .content-wrapper{ /*the wrrapper using multitabs*/
height: calc(100% - 140px) /*Excluding header and footer's height, for AdminLTE, total is 140px*/
}
</style>- create tab with iframe's object:
<scritp>
parent.$(parent.document).data('multitabs').create({
iframe : true, //iframe mode, default is false. While false, is the auto mode (for the self page, use ajax, and the external, use iframe)
title : 'open by iframe', //title of tab, if empty, show the URL
url : 'pages/index-2.html' //URL, if it's external link, content type change to 'info'
}, true); //true for active tab
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent