bootstrap.addtabs 标签页

QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战)

简介

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

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

页面成果

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

bootstrap.addtabs 标签页_第1张图片

集成到咱们的项目里面

bootstrap.addtabs 标签页_第2张图片

bootstrap-addtabs介绍

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

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

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

 "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、设置按钮或链接

  • 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格式的,它文档里面的截图如下 
    bootstrap.addtabs 标签页_第3张图片

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

    bootstrap.addtabs 标签页_第4张图片

    这样就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事件,让其右上角的叉叉,只有鼠标放上去的时候才出现,多了我感觉有点影响美观呢。 
    bootstrap.addtabs 标签页_第5张图片

    bootstrap.addtabs 标签页_第6张图片

    结语

    代码还需梳理。

    你可能感兴趣的:(14,页面JS)