bootstrap-multitabs多标签

iframe版本的多标签页插件来自于码云的开源项目，[Bootstrap-Multitabs](https://gitee.com/edwinhuish/multi-tabs "Bootstrap-Multitabs") 作者：EdwinHui。该说明是开源作者的文档。

### 简介
为了配合自己项目，在该插件上做了不少修改，调整了字体图标，新增了缓存配置，右键菜单和tab点击左侧菜单栏的响应。v5在之前的版本基础上，主要是增加了loading的效果。

以下是来至于开源项目上的介绍说明(根据本项目做了些修改)：

1. 通过简单的配置，生成可智能适配ajax和iframe的多标签页。
2. 可以直接套用bootstrap的各种模板样式。
3. 在不关闭窗口的情况下，直接刷新页面能保留所有标签页。（如果使用了表单，请完成表单后再进行此操作）
4. 导航标签tab可移动
5. 当标签数量设置为 1 的时候，隐藏便签列表

### 使用
在html的head内引用multitabs的CSS
```html

<link rel="stylesheet" href="bootstrap-multitabs/style.css">
```
在body底部引用multitabs的JS
```html
<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>
```
并绑定multitabs的区域
```javascript
$('#iframe-content').multitabs({
    iframe : true,
    nav: {
        backgroundColor: '#ffffff',
        maxTabs : 35, // 选项卡最大值
    },
    init : [{
        type : 'main',
        title : '首页',
        url : 'lyear_main.html'
    }]
});
```
最后在需要关联链接中加入"multitabs"的class
```html
<a class="multitabs" href="lyear_ui_buttons.html">按钮</a>
```
至此，bootstrap-multitabs配置成功！

<font color="red">注意：顶部导航上如果要用dropdown-menu，菜单里有链接需要加上multitabs，将url地址放到data-url里面。</font>

### 进阶配置
链接可添加参数

1. `[data-type="info"]` 指定为content类型为info，共有3种( main | info ), info 为缺省配置，可以不用指定。
2. `[data-iframe="true"]` 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
3. `[data-title="new tab"]` 设置后指定标签页的标题，默认读取链接字体。
4. `[data-url="index.html"]` 如果对象不是`<a>`链接，此值可以指定链接URL
5. `[data-refresh="true"]` 强制更新

#### 初始化配置

下面这些为默认配置，可以自行修改
```javascript
$('#content_wrapper').multitabs({
    selector : '.multitabs',                    // 触发multitabs的selector text，注意需要有".","#"等
    iframe : false,                             //iframe模式的总局设置。当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
	cache: false,                               // 新增的配置，插件默认有用sessionStorage，默认关闭
    class : '',                                 // 主框架的class
    refresh: false,                             // 全局强制更新
    init : [                                    // 需要在初始加载的tab
        {                                       
            type :'',                           // 标签页的类型，有 main | info，缺省为 info
            title : '',                         // 标题（可选），没有则显示网址
            content: '',                        // html内容，如果设定此值，下面的URL设定则无效
            url : ''                            // 链接
        }, 
        {  /** 更多tab。。**/  },                // 依次添加需要的页面
        {  /** 更多tab。。**/  },                // 依次添加需要的页面
    ],       
    nav : {
        backgroundColor : '#f5f5f5',            // 默认nav-bar 背景颜色
        class : '',                             // 为nav添加class
        draggable : true,                       // nav tab 可拖动选项
        fixed : false,                          // 固定标签头列表
        layout : 'default',                     // 有两种模式，'default', 'classic'(所有隐藏tab都在下拉菜单里) 和 'simple'
        maxTabs : 15,                           // 最多tab数量。（main和editor不计算在内) 当为1时，整个标签栏隐藏。main和editor分别只能有1个标签。
        maxTabTitleLength : 25,                 // tab标题的最大长度
        showCloseOnHover : true,                // 当值为true，仅在鼠标悬浮时显示关闭按钮。false时一直显示
        style : 'nav-tabs',                     // 可以为nav-tabs 或 nav-pills
    },
    content : {
        ajax : {
            class : '',                         // 为ajax tab-pane 添加class
            error : function (htmlCallBack) {
                //modify html and return
                return htmlCallBack;
            },
            success : function (htmlCallBack) {
                //modify html and return
                return htmlCallBack;
            }
        },
        iframe : {
            class : ''                          // 为iframe tab-pane 添加class
        }
    },
    language : {                                // 语言配置
        nav : {
            title : 'Tab',                                  // 默认的标签页名称
            dropdown : '',        // 标签栏的下拉菜单名称
            showActivedTab : 'Show Activated Tab',          // 下拉菜单的显示激活页面
            closeAllTabs : 'Close All Tabs',                // 下拉菜单的关闭所有页面
            closeOtherTabs : 'Close Other Tabs',            // 下拉菜单的关闭其他页面
        }
    }
});
```
#### 关于 content 的类型
标签页 content 的类型，有 main | info 。

1. main页放产品列表，用户列表，邮件列表，这些需要id，且js操作容易混乱，故限制只能有1个。当然，你也可以仅仅main页放网站概况，其他一律用info页。只是容易冲突。
2. info放产品详情，用户详情，邮件详情这些少id，以及js操作重复的页面。

### iframe注意事项
为了自适应iframe高度，请依照下面这个样式添加CSS。 其中 .content-wrapper 是当前使用multitabs的wrapper。 .wrapper 为 .content-wrapper 的父层，需要将所有父层都添加 height: 100%
```css
body,
body.full-height-layout .wrapper,
html{
    height: 100%;
}
body.full-height-layout .content-wrapper{           /*使用multitabs的wrapper*/
    height: calc(100% - 140px)                      /*减去网页header和footer的高度，AdminLTE的为140px*/
}
```
在iframe内触发父document的Multitabs方法新建tab: (ifame 页无须加载jquery)
```javascript
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页
```

### 关于模板中改动后的配置
```javascript
    $.fn.multitabs.defaults = {
        selector: '.multitabs', // 触发multitabs的selector text，注意需要有".","#"等
        iframe: false, // iframe模式的总局设置。当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
        cache: false, // 是否缓存当前打开的tab，默认关闭
        class: '', // 主框架的class
        type: 'info', // 更改信息内容名称，无需更改。
        init: [], // 需要在初始加载的tab
        isNewTab: false, // 是否以新tab标签打开，为true时，每次点击都会打开新的tab
        refresh: 'no', // iframe中页面是否刷新，'no'：'从不刷新'，'nav'：'点击菜单刷新'，'all'：'菜单和tab点击都刷新'
        dbclickRefresh: false, // 双击刷新开启最好不要和refresh:'all'同时使用
        nav: {
            backgroundColor: '#f5f5f5', // 默认nav-bar 背景颜色
            class: '', // 为nav添加class
            draggable: true, // nav tab 可拖动选项
            fixed: false, // 固定标签头列表
            layout: 'default', // 有两种模式，'default', 'classic'(所有隐藏tab都在下拉菜单里) 和 'simple'
            showTabs: true, // 是否显示Tab标签栏
            maxTitleLength: 25, // tab标题的最大长度
            showCloseOnHover: false, // 当值为true，仅在鼠标悬浮时显示关闭按钮。false时一直显示
            style: 'nav-tabs' // 可以为nav-tabs 或 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: ''
            }
        },
        language: { //language setting
            nav: {
                title: 'Tab', // 默认的标签页名称
                dropdown: '<i class="mdi mdi-menu"></i>', // 标签栏的下拉菜单名称
                showActivedTab: '显示当前选项卡', // 下拉菜单的显示激活页面
                closeAllTabs: '关闭所有标签页', // 下拉菜单的关闭所有页面
                closeOtherTabs: '关闭其他标签页', // 下拉菜单的关闭其他页面
            }
        }
    };
```