LTE Admin bootstrap后台模版(中文版)+bootstrap.addtabs.js页签

本文主要说明bootstrap后台模版Admin LTE（中文版）集成【bootstrap.addtabs.js】实现Tab页联动。

实现的目标是：
            1、不改动Admin LTE的模板框架（Bootstrap v3.4.1）；
            2、tab页的加载默认使用ajax的get方式，详见(bootstrap.addtabs.js)；不用iframe；
            3、侧边菜单栏与tab页的联动；
            4、右键菜单（关闭左侧、右侧、其他，全部关闭，刷新）；

本末也会给出直接用springboot搭建的项目工程；

实现的效果如图

集成方式如下

1、将LTE Admin项目导入工程（或直接文本编辑器修改）

2、在想修改的页面（一般是index.html）引入bootstrap.addtabs.js和bootstrap.addtabs.css

<script  src="dist/js/addTabs/bootstrap.addtabs.js"></script>
<link rel="stylesheet" href="dist/js/addTabs/bootstrap.addtabs.css" />

3、修改index.html中的展示tab项的位置

index.html中删除<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;line-height:35px;">
          <!--       后面添加的tab在该部分-->
        </ul>
        <div class="tab-content" >
          <!--        后天添加的内容在这个地方添加-->
        </div>
      </nav>
    </div>
  </div>

4、修改index.html中菜单栏的项

 将sidebar部分代码<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">下

<a>标签中的*.html修改为

<a data-addtab="userMenu1" data-target="#tabs1" data-url="./jsgrid" class="nav-link"> 类似所示值，还有其他参数如下

// 指定tab页内容
data-content="Customize the content"
// 使用ajax
data-ajax="true"
// 设置tab页签标题
data-title="Customize the title"
// 指定在哪个tab页内容中显示
data-target="#tabs2"

这边我写了几个跳转和可静态的tab，如下：

<li class="nav-item has-treeview menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>仪表盘集合<i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a class="nav-link" data-addtab="1" data-content="tabs1">
                  <i class="far fa-circle nav-icon"></i>静态页面
                </a>
              </li>
              <li class="nav-item">
                <a data-addtab="userMenu2" data-target="#tabs1" data-url="./widgets" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>小插件
                </a>
              </li>
            </ul>
          </li>

tab中展示其他页面的效果如下：

5.其中还需要简单修改下tab.css的样式，如下

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav>li {
    position: relative;
    display: block
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 8px 13px
}

.nav>li>a:focus,.nav>li>a:hover {
    text-decoration: none;
    background-color: #eee
}

.nav>li.disabled>a {
    color: #777
}

.nav>li.disabled>a:focus,.nav>li.disabled>a:hover {
    color: #777;
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent
}

.nav .open>a,.nav .open>a:focus,.nav .open>a:hover {
    background-color: #eee;
    border-color: #337ab7
}

6.最后整理了下

LTE Admin源码、html简单集成addtabs.js、和一个简单的springboot项目（整合LTE Admin和addtabs.js）

 相关源码：整合不易，希望各位看官达人多多支持
（微信打赏后评论留言或者私信—你的邮箱地址）