AdminTLE 中使用Tab 选项卡

最新推荐文章于 2025-03-01 08:36:51 发布

wangdaoyin2010

最新推荐文章于 2025-03-01 08:36:51 发布

阅读量2.5k

点赞数

分类专栏： js 跨域文章标签： javascript adminLTE BootStrap Tab

本文链接：https://blog.csdn.net/wangdaoyin2010/article/details/114001375

版权

js 跨域专栏收录该内容

4 篇文章

订阅专栏

一、下载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,不能重复；

其他设置项
// 直接指定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"

官网参数

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