edwinhuish/bootstrap-multitabs

smart nav-tabs, useful for iframe and ajax content

bootstrap-multitabs

For chinese README.md, please read 简体中文

Screenshot

default (with left/right/option button)

Demo: nav-tabs and nav-pills

classic (fold hidden tabs)

Demo: nav-tabs and nav-pills

simple

Demo: nav-tabs and nav-pills

Role and Benefits

1. Zero configuration and auto ajax / iframe
2. Can use the templates of bootstrap
3. Can refresh window, and all the tabs will keep same as before.
4. Navigation tab draggable.
5. While maxTabs : 1 or small screen, hide the tab header.

Requirements

1. Bootstrap
2. JQuery
3. Font Awesone

Use

1. Add multitabs's CSS in the head

<!-- Multi Tabs -->
<link rel="stylesheet" href="plugins/bootstrap-multitabs/css/style.css">

2. Add multitabs's JS in the bottom ot body

<!-- Multi Tabs -->
<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>

3. Bind the content wrapper

<script>
    $('#content_wrapper').multitabs();
</script>

4. 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! **

Advanced setting

Parameter of link

1. [data-type="info"] content type, can be (main | info), info is the default and the normal one. Main just can be 1 tab.
2. [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)
3. [data-title="new tab"] tab's tittle, if empty or undefined, tab's tittle will be link's text.
4. [data-url="index.html"] this parameter for the object not link.
5. [data-refresh="true"] for force refresh

Initial Configuration

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>

Attention for iframe

1. For iframe's auto-height, please add CSS as blew to your page. .content-wrapper is the selector using multitabs. .wrapper is parent of .content-wrapper , all parent of wrapper multitabs must add height: 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>

2. 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>

bootstrap-multitabs's Issues

iframe 怎么自适应高度

这一块代码怎么用

<script> parent.$(parent.document).data('multitabs').create({ iframe : true, //指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。 title : 'open by iframe', //标题（可选），没有则显示网址 url : 'pages/index-2.html' //链接（必须），如为外链，强制为info页 }, true); //true 则激活新增的tab页 </script>

跳转页面白屏

<button class="Add btn btn-success margin-r-5" onclick="window.location.href='infoAdd.html'">添加</button>
在一个iframe页面中有一个跳转页面的事件
有时跳转页面的时候，页面会白屏，但是看XHR,ajax请求已经发起且请求成功，甚至在Elements里面DOM已经加载出来了，就是显示不出来。
刷新一下，打开F12，页面又会显示出来。请问iframe内跳转页面到底应该用什么？谢谢！

Any question, please ask here.

Any question, please ask here.

左侧菜单在缩略的情况下，鼠标移上去，弹出的看不见了

左侧菜单在缩略的情况下，鼠标移上去，弹出的看不见了

下拉菜单的显示激活页面有什么用？

您好，下拉菜单的显示激活页面有什么用？能说一下吗？没看懂。点击好像没效果。

jquery3.x不兼容

size()方法在1.8以后已经废弃，新版jquer不兼容，改成length就可以了

License Information

Hi,

Great work with the multi tabs. It's really good.

Can you please provide the license information of the repository. I'm planning on using this code as base and customize it accordingly.

Thanks!

当模式设置为simple时，设置的paddingTop高度不正确，始终为20px

当模式设置为simple时，设置的paddingTop高度不正确，始终为20px

Can it be used with closable tabs?

@edwinhuish

本身有数据,求解决方法

本身我这里是有内容和数据的,要想做到一行显示并切换,不是iframe的这种方式
只想做到然后这些tabs并排并且可拖动

移动端tab隐藏问题

1.移动端隐藏了tab的展示，但是dom里和pc端一样，点击一个菜单，增加一个iframe或者一个div；在菜单很多的情况下，用户点击了很多菜单，对于移动端内存和流量的消耗还是挺大的，毕竟不像pc端那样可以手动清除tab,我想能不能做成new点击的菜单的内容去“替换”之前展示的内容，而不是“新增”

2.您这里给了两种展示方案，一种是iframe,一种是div。我不知道该如何选择，当然理由也是一大堆，希望您能给出点建议:sob:，我自己一直都是用iframe（遇到的问题就是，bootstrap modal 或者layer 弹窗的遮罩层没法覆盖父页面）

首先声明一下，我是一个刚入行两年的菜鸟，如有不对，请多包含:blush::blush:

希望默认带上关闭按钮，关闭按钮稍微增大美化下

控件很赞！
1.希望默认带上关闭按钮，关闭按钮稍微增大美化下（可配置也行）
2.移动端隐藏-交互优化

怎么实现与菜单的联动？

点击不同的tab时候，右侧菜单栏激活相应的菜单？

刷新页面 打开新的页签会顶掉老的页签

刷新页面以后 打开新的页签会顶掉老的页签 老的iframe被替换掉了