AdminTLE 中使用Tab 选项卡

一、下载BootStrap插件（bootstrap.addtabs）

插件地址：https://gitee.com/hbbcs/bootStrap-addTabs

下载后再页面中引入bootstrap.addtabs.css和bootstrap.addtabs.js

二、编写html

使用AdminLTE中index.html为例进行修改

1、修改内容部分：找到内容部分<div class="content-wrapper">，将该标签替换为如下代码

  <div class="content-wrapper" id="content-wrapper">
    <div class="content-tabs" >
      <nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu">
        <ul class="page-tabs-content nav nav-tabs" id="tabs1" style="margin-left: 0px;">
           <!--       后面添加的tab在该部分-->
        </ul>
        <div class="tab-content" >
           <!--        后天添加的内容在这个地方添加-->
        </div>
      </nav>
    </div>
  </div>

注意：

1、class="tab-content" 的div必须和class="page-tabs-content nav nav-tabs"所在的ul在同一个nav下，这样才会子自动的添加对应的内容进行展现

2、nav-tabs对应标签tab-content对应标签成对出现，这样才能保证一个tab对应一个内容

3、可以为nav-tabs标签添加id，在菜单中就可以使用 data-target="#tabs1"属性指定在按个tab进行显示

<li><a class="list-group-item" data-addtab="1" data-title="tabs1" data-content="tabs1"   >  tabs1</a></li>
<li><a class="list-group-item" data-addtab="2"  data-title="tabs2" data-content="tabs2"   >  tabs2</a></li>
<li><a class="list-group-item" data-addtab="3" data-title="tabs3" data-content="tabs3"   >  tabs3</a></li>
<li><a class="list-group-item" data-addtab="4"  data-title="tabs4" data-content="tabs4"   >  tabs4</a></li>
<li><a class="list-group-item" data-addtab="5"  data-title="tabs5" data-content="tabs5"   >  tabs5</a></li>
<li><a class="list-group-item" data-addtab="6"  data-title="tabs6" data-content="tabs6"   >  tabs6</a></li>

 

2、菜单栏修改：原来菜单为 <li><a href="#"><i class="fa fa-circle-o"></i>菜单</a></li>，将菜单修改为<li><a  data-addtab="content1">  菜单</a></li>；主要去掉href="#"，添加data-addtab="content1"。addtab主要配置tab选项卡的key,不能重复；

1.  其他设置项
   // 直接指定tab选项卡内容
   data-content="Customize the content"
   // 设置菜单请求的地址
   data-url="22222"
   // 在设置了data-url的时候是否使用ajax去获取请求指定地址内容
   data-ajax="true"
   // 设置tab的标签
   data-title="Customize the title"
   指定在那个具有nav-tabs类的标签显示
   //data-target="#tabs1"

2. 官网参数

   target       string|object 同一页面如果存在多个nav-tabs，可以使用此参数设定增加TAB的目标
   content      string|html   直接指定内容
   close        bool          是否可以关闭，默认是true
   monitor      string        监视的区域,默认是body
   iframe       bool          使用iframe，false使用ajax,默认true
   iframeHeight num           固定TAB中IFRAME高度
   callback     function(){}  关闭后回调函数
   contextmenu  bool          是否启用右键菜单，默认true
   loadbar      bool          是否显示加载条，默认是true
   store        bool          将打开的tab页记录到客户端存储中，刷新页面时自动打开，默认使用
   ajax         object        全局调用ajax的默认参数
   local:{
       'refreshLabel': '刷新此标签',
       'closeThisLabel': '关闭此标签',
       'closeOtherLabel': '关闭其他标签',
       'closeLeftLabel': '关闭左侧标签',
       'closeRightLabel': '关闭右侧标签'，
       'loadbar': '正在加载内容，请稍候．．．'
   }

三、关闭

iframe子窗口关闭父窗口的TABS： window.parent.window.$.addtabs.close('#tab_message');
关闭一个nav-tabs中所有标签 $.addtabs.closeAll('#tabs1');

 

四、参考：https://blog.csdn.net/dkjhl/article/details/89509073、https://gitee.com/hbbcs/bootStrap-addTabs