bootstrap.addtabs 标签页

QiYuAdmin-bootstrap.addtabs美化（SpringBoot实战）

2017年04月10日 19:07:19

阅读数：2154

简介

之前发现了一个插件bootstrap-addtabs，一直收藏着，之前看的时候是v1版本的，现在更新到了v2.0版本，那就开始用吧，已经有人写出来了，而且更新迭代到了2.0版本，不重复造轮子，重复造轮子还不一定比别人的好，毕竟别人的已经经过了考验：

• 美化页面成果
• bootstrap-addtabs介绍
• bootstrap-addtabs集成
• bootstrap-addtabs样式调整

---

页面成果

这个插件本身自带了例子，还有用法的介绍

集成到咱们的项目里面

bootstrap-addtabs介绍

该项目的地址：http://git.oschina.net/hbbcs/bootStrap-addTabs

用法比较简单，可以参考它里面的文档，如果去改造它的话需要你去看下他的api，里面写的还是比较清楚的。

简单用法如下： 
STEP 1、引入文件

 <link rel="stylesheet" href="assets/global/plugins/bootstrap-addtabs/bootstrap.addtabs.css" type="text/css" media="screen" />
<script type="text/javascript" src="assets/global/plugins/bootstrap-addtabs/bootstrap.addtabs.js"></script>

• 1
• 2

STEP 2、设置按钮或链接

<li class="nav-item  ">
                            <a href="#" class="nav-link nav-toggle" data-addtab="userManager" data-ajax="true" data-url="user/main">
                                <i class="icon-diamond"></i>
                                <span class="title">用户管理</span>
                                <span class="arrow open"></span>
                            </a>
                        </li>
                        <li class="nav-item  ">
                            <a href="#" class="nav-link nav-toggle" data-addtab="depManager" data-ajax="true" data-url="dep/main">
                                <i class="icon-puzzle"></i>
                                <span class="title">部门管理</span>
                                <span class="arrow"></span>
                            </a>
                        </li>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

也可以是json格式的，它文档里面的截图如下 

STEP 3、设置显示内容的地方，由于代码比较多，截图了

这样就ok了，为啥没有初始化，其实它的js文件里面最后一段已经初始化了。

bootstrap-addtabs样式调整

修改了bootstrap.addtabs.css文件里面的样式表，设置了li标签的样式、a标签的样式和a标签hover的样式表，具体代码如下。

.nav-tabs {position: relative;border-bottom:0px;}
.nav-tabs li{position: relative;margin-bottom:0px;}
.nav-tabs li>a:hover{background-color: white;color: #32c5d2;}
.nav-tabs>li.active>a{color: #32c5d2!important;}
.nav-tabs li>a{border:0px!important;cursor:pointer!important;color: #888;
    font-size:13px!important;}
 .qiyu-addtabas-custom{border:0px;}
.qiyu-addtabs-vertical-line{margin-left:-18px;margin-right: 12px;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

修改样式的过程中，遇到了一个问题：nav-tabs li>a:hover，调了半天才发现bootstrap.css本身也有nav-tabs li>a:hover样式表，为了覆盖他的样式在这里设置了.nav-tabs li>a:hover{background-color: white;color: #32c5d2;}，不然他的背景颜色是灰色。 
除了样式，我在它的js文件里面扩展了mouseover和mouseleaver事件，让其右上角的叉叉，只有鼠标放上去的时候才出现，多了我感觉有点影响美观呢。 

结语

代码还需梳理。