这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果

参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/7601880.html

但是由于我没能找到bootstrap.tab.js（我不太确定bootstrap.addtabs.js和bootstrap.tabs.js是不是一个JS）也没太看明白他写的文章，所以我自己在这里研究了下写了一个

（没有他写的好，但是可以做个参照）

这里先发一个简单版本，后期在发布优化版

先看一下效果

可以看到存在一些问题，标签页附带了三角形 ，当前页没能更新active...问题先记录

先看看要引入的CSS以及JS文件

   <link rel="stylesheet" href="assets/css/bootstrap.min.css">

   <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css">

   <link rel="stylesheet" href="assets/css/ace-skins.min.css">

   <link rel="stylesheet" href="assets/css/ace-rtl.min.css">

   <link rel="stylesheet" href="bootstrap/css/bootstrap.addtabs.css">

   <link rel="stylesheet" href="assets/css/ace.min.css">

   <script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>

   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

   <script type="text/javascript" src="assets/js/ace-extra.min.js"></script>

   <script type="text/javascript" src="assets/js/ace.min.js"></script>

   <script type="text/javascript" src="bootstrap/js/bootstrap.addtabs.js"></script>

再看看页面布局

 <body class="no-skin">

     <div id="navbar" class="navbar navbar-default ace-save-state">

         <div class="navbar-container ace-save-state" id="navbar-container">

             <button type="button" class="navbar-toggle menu-toggle pull-left" id="menu-toggle"

             data-target="#sidebar">

                 <span class="sr-only">Toggle sidebar</span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

             </button>

             <div class="navbar-header pull-left">

                 <a href="index.html" class="navbar-brand">

                     <small><i class="fa fa-leaf"></i>Ace Admin</small>

                 </a>

             </div>

             <div class="navbar-buttons navbar-header pull-right">

                 <ul class="navbar ace-nav">

                     <li class="light-blue dropdown-modal">

                         <a href="#" data-toggle="dropdown" class="dropdown-toggle">

                             <img src="" alt="Jason's Photo" class="nav-user-photo" />

                             <span class="user-info">

                                 <small>Welcom,</small>Jason

                             </span>

                             <i class="ace-con fa fa-caret-down"></i>

                         </a>

                         <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

                             <li>

                                 <a href="#"><i class="ace-icon fa fa-cog"></i>Settings</a>

                             </li>

                             <li><a href="#"><i class="ace-icon fa fa-user"></i>Profile</a></li>

                             <li class="divider"></li>

                             <li><a href="#"><i class="ace-icon fa fa-power-off"></i>Logut</a></li>

                         </ul>

                     </li>

                 </ul>

             </div>

         </div>

     </div>

     <div class="main-container ace-save-state" id="main-container">

         <div id="sidebar" class="sidebar">

             <ul id="menu" class="nav nav-list">

             </ul><!-- /.nav-list -->

             <!-- 菜单伸缩 -->

             <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">

                     <i id="sidebar-toggle-icon"

                     class="ace-icon fa fa-angle-double-left ace-save-state"

                     data-icon1="ace-icon fa fa-angle-double-left"

                     data-icon2="ace-icon fa fa-angle-double-right"></i>

             </div>

         </div>

         <!-- content start-->

         <div class="main-content">

             <div class="page-content">

                 <div class="row">

                     <div class="col-xs-12">

                         <ul class="nav nav-tabs" role="tablist">

                             <li class="active">

                                 <a href="#index" data-toggle="tab">首页</a>

                             </li>

                         </ul>

                         <div class="tab-content" style="height: 100%;width: 100%">

                             <div class="tab-pane actvie" id="index">

                             </div>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

         <!-- content end-->

     </div>

 </body>

由于菜单是从数据库中动态获取并填充的 所以这里我使用了ajax去请求

  $(function(){

      $.ajax({

          url:"<%=request.getContextPath()%>/menu/menus.do",

          type:'post',

          data:{},

          success:function(data,status){

              console.log(data=data.substring(1,data.length-1));

              $("#menu").append(data);

          },

          error:function(e){

              console.log("请求失败"+e);

          }

      })

  })

后台是这么写的

    //返回这颗树的字符串形式

    public String getMenuTree(){

        List<SyasuoMenu> menus = menuDAO.getMenus();

        //定义一个一级菜单集合

        List<StringBuffer> result = new ArrayList<StringBuffer>();

        StringBuffer sb = new StringBuffer();

        for (SyasuoMenu menu : menus) {

            if(menu.getSparentid().equals("0")){

                sb.append("<li><a href='#' class='dropdown-toggle'><i class='"+menu.getSicon()+"'></i>"+menu.getSname()+"<b class='arrow fa fa-angle-down'></b></a>");

                if(isChilds(menus,menu.getSid())){

                    StringBuffer sbs = new StringBuffer();

                    sbs = getChilds(menus,menu.getSid(),sbs);

                    sb.append(sbs);

                }

            }

        }

        result.add(sb);

        System.out.println(result.toString());

        return result.toString();

    }

//寻找节点下的子节点

    private StringBuffer getChilds(List<SyasuoMenu> menus, String sid,StringBuffer sbs) {

        StringBuffer sb = new StringBuffer("<ul class='submenu'>");

        for (SyasuoMenu menu : menus) {

            if(menu.getSparentid().equals(sid)){

                if(isChilds(menus, menu.getSid())){

                    sb.append("<li><a class='dropdown-toggle' data-addtab='"+menu.getSid()+"' data-url='"+menu.getSdataurl()+"'><i class='menu-icon fa fa-caret-right'></i>"+menu.getSname()+"<b class='arrow fa fa-angle-down'></b></a>");

                    System.out.println(":"+menu.getSdataurl());

                    getChilds(menus,menu.getSid(),sb);

                }else{

                    System.out.println("="+menu.getSdataurl());

                    sb.append("<li><a data-addtab='"+menu.getSid()+"' data-url='"+menu.getSdataurl()+"'><i class='menu-icon fa fa-caret-right'></i>"+menu.getSname()+"</a></li>");

                }

            }

        }

        sb.append("</ul></li>");

        sbs.append(sb);

        return sbs;

    }
    //是否存在子节点

    private boolean isChilds(List<SyasuoMenu> menus, String sid) {

        boolean flag = false;

        for (SyasuoMenu menu : menus) {

            if(menu.getSparentid().equals(sid)){

                flag = true;

                break;

            }

        }

        return flag;

    }

这里是数据库sql

create table syasuo_menu(

s_id varchar(20) primary key not null,

s_name varchar(60) not null,

s_parentid varchar(20) not null,

s_level varchar(20) not null

)

alter table syasuo_menu add column s_icon varchar(64)

alter table syasuo_menu add column s_dataurl varchar(64);　　//这一句是最后加的 是点击菜单子节点触发的路径

insert into syasuo_menu values('','阿里巴巴','','','menu-icon fa fa-list');

insert into syasuo_menu values('','电商平台','','');

insert into syasuo_menu values('','淘宝商城','','');

insert into syasuo_menu values('','天猫超市','','');

insert into syasuo_menu values('','个人店铺','','');

insert into syasuo_menu values('','支付平台','','');

insert into syasuo_menu values('','支付宝','','');

insert into syasuo_menu values('','音乐平台','','');

insert into syasuo_menu values('','虾米音乐','','');

insert into syasuo_menu values('','腾讯科技','','');

insert into syasuo_menu values('','游戏平台','','');

insert into syasuo_menu values('','英雄联盟','','');

insert into syasuo_menu values('','地下城与勇士','','');

insert into syasuo_menu values('','穿越火线','','');

insert into syasuo_menu values('','聊天平台','','');

insert into syasuo_menu values('','腾讯QQ','','');

insert into syasuo_menu values('','微信','','');

insert into syasuo_menu values('','个人微信','','');

insert into syasuo_menu values('','企业微信','','');

insert into syasuo_menu values('','音乐平台','','');

insert into syasuo_menu values('','QQ音乐','','');

基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  2. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  3. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  4. hangfire+bootstrap ace 模板实现后台任务管理平台

    前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...

  5. 值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  6. 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  7. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  8. Bootstrap优秀模板-ColorAdmin.4.3.0

    老牌的Bootstrap商业模板,提供HTML.AngularJS.AngularJS5.Vue.React多种环境,风格覆盖Flat.Material.Apple.Transparent甚至Face ...

  9. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

  1. jQuery Validate 无法验证 chosen-select元素

    chosen-select元素执行了chosen()方法后,为select元素加上了style="display: none;"进行隐藏,然后重新构造了一个看起来像select的下 ...

  2. sql server——子查询

    简述: 在查询语句中包含着有另外一条查询语句,被包含的查询语句称为子查询,包含着子查询的查询就称为父查询. 总之,子查询就是在查询语句里嵌套一条或者多条查询语句. 常用子查询分类: 一.独立子查询 特 ...

  3. PPTP vs. OpenVPN vs. L2TP/IPsec vs. SSTP

    Which is the Best VPN Protocol? PPTP vs. OpenVPN vs. L2TP/IPsec vs. SSTP Want to use a VPN? If you’r ...

  4. CSAPP buffer lab记录——IA32版本

    CSAPP buffer lab为深入理解计算机系统(原书第二版)的配套的缓冲区溢出实验,该实验要求利用缓冲区溢出的原理解决5个难度递增的问题,分别为smoke(level 0).fizz(level ...

  5. eclipse去掉xml验证的方法

    eclipse Multiple annotations found at this line错误,eclipse开发过程中,一些XML配置文件会报错,但是这些其实不是错,飘红的原因是因为eclips ...

  6. 3.为JDeveloper添加不能的workspace

    1.点击选中JDeveloper,在属性中,选中快捷方式, 可以看到目标中的值为C:\Oracle\Middleware\jdeveloper\jdeveloper.exe, 只需要在修改为C:\Or ...

  7. 牛客网多校训练第一场 D - Two Graphs

    链接: https://www.nowcoder.com/acm/contest/139/D 题意: 两个无向简单图都有n(1≤n≤8)个顶点,图G1有m1条边,图G2有m2条边,问G2有多少个子图与 ...

  8. 20165214 2018-2019-2 《网络对抗技术》Exp6 信息搜集与漏洞扫描 Week9

    <网络对抗技术>Exp6 信息搜集与漏洞扫描 Week9 一.实验目标与内容 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 使用搜索 ...

  9. 图片验证码——base64编码的使用

    一.介绍: 1.base64编码简介: Base64就是一种编码格式.Base64要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*6 = 24),然后把6Bit再添两位高位0,组成 ...

  10. 使用QT开发GoogleMap瓦片显示和下载工具（2）——Google地图瓦片投影和获取网址解析

    这篇主要说的是Google地图采用的投影方式,瓦片划分方式以及如何从给定的经纬度获取瓦片的数据的网址.所有资料均来自于网络,并亲自试验可行. Google地图投影 首先是地图投影问题,因为地球本身是一 ...