基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

发布时间：2020-12-17 20:47:22 所属栏目：安全来源：网络整理

导读：这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果参考了这个人的博客?https://www.cnblogs.com/landeanfen/p/7601880.html 但是由于我没能找到bootstrap.tab.js（我不太确定bootstrap.addtabs.js和bootstrap.tabs.js是不是一个JS）也

这几天研究了基于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文件

 1   <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 2   <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css">
 3   <link rel="stylesheet" href="assets/css/ace-skins.min.css">
 4   <link rel="stylesheet" href="assets/css/ace-rtl.min.css">
 5   <link rel="stylesheet" href="bootstrap/css/bootstrap.addtabs.css">
 6   <link rel="stylesheet" href="assets/css/ace.min.css">
 7 
 8   <script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>
 9   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
10   <script type="text/javascript" src="assets/js/ace-extra.min.js"></script>
11   <script type="text/javascript" src="assets/js/ace.min.js"></script>
12   <script type="text/javascript" src="bootstrap/js/bootstrap.addtabs.js"></script>

再看看页面布局

 1 <body class="no-skin">
 2     <div id="navbar" class="navbar navbar-default ace-save-state">
 3         <div class="navbar-container ace-save-state" id="navbar-container">
 4 
 5             <button type="button" class="navbar-toggle menu-toggle pull-left" id="menu-toggle"
 6             data-target="#sidebar">
 7                 <span class="sr-only">Toggle sidebar</span>
 8                 <span class="icon-bar"></span>
 9                 <span class="icon-bar"></span>
10                 <span class="icon-bar"></span>
11             </button>
12 
13             <div class="navbar-header pull-left">
14                 <a href="index.html" class="navbar-brand">
15                     <small><i class="fa fa-leaf"></i>Ace Admin</small>
16                 </a>
17             </div>
18 
19             <div class="navbar-buttons navbar-header pull-right">
20                 <ul class="navbar ace-nav">
21                     <li class="light-blue dropdown-modal">
22                         <a href="#" data-toggle="dropdown" class="dropdown-toggle">
23                             <img src="" alt="Jason‘s Photo" class="nav-user-photo" />
24                             <span class="user-info">
25                                 <small>Welcom,</small>Jason
26                             </span>
27                             <i class="ace-con fa fa-caret-down"></i>
28                         </a>
29 
30                         <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
31                             <li>
32                                 <a href="#"><i class="ace-icon fa fa-cog"></i>Settings</a>
33                             </li>
34                             <li><a href="#"><i class="ace-icon fa fa-user"></i>Profile</a></li>
35                             <li class="divider"></li>
36                             <li><a href="#"><i class="ace-icon fa fa-power-off"></i>Logut</a></li>
37                         </ul>
38                     </li>
39                 </ul>
40             </div>
41         </div>
42     </div>
43     <div class="main-container ace-save-state" id="main-container">
44         <div id="sidebar" class="sidebar">
45             <ul id="menu" class="nav nav-list">
46             </ul><!-- /.nav-list -->
47             <!-- 菜单伸缩 -->
48             <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
49                     <i id="sidebar-toggle-icon" 
50                     class="ace-icon fa fa-angle-double-left ace-save-state" 
51                     data-icon1="ace-icon fa fa-angle-double-left" 
52                     data-icon2="ace-icon fa fa-angle-double-right"></i>
53             </div>
54         </div>
55         <!-- content start-->
56         <div class="main-content">
57             <div class="page-content">
58                 <div class="row">
59                     <div class="col-xs-12">
60                         <ul class="nav nav-tabs" role="tablist">
61                             <li class="active">
62                                 <a href="#index" data-toggle="tab">首页</a>
63                             </li>
64                         </ul>
65                         <div class="tab-content" style="height: 100%;width: 100%">
66                             <div class="tab-pane actvie" id="index">
67                             </div>
68                         </div>
69                     </div>
70                 </div>
71             </div>
72         </div>
73         <!-- content end-->
74     </div>
75 </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,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(‘1‘,‘阿里巴巴‘,‘0‘,‘1‘,‘menu-icon fa fa-list‘);
insert into syasuo_menu values(‘2‘,‘电商平台‘,‘2‘);
insert into syasuo_menu values(‘3‘,‘淘宝商城‘,‘2‘,‘3‘);
insert into syasuo_menu values(‘4‘,‘天猫超市‘,‘3‘,‘4‘);
insert into syasuo_menu values(‘5‘,‘个人店铺‘,‘4‘);
insert into syasuo_menu values(‘6‘,‘支付平台‘,‘2‘);
insert into syasuo_menu values(‘7‘,‘支付宝‘,‘6‘,‘3‘);
insert into syasuo_menu values(‘8‘,‘音乐平台‘,‘2‘);
insert into syasuo_menu values(‘9‘,‘虾米音乐‘,‘8‘,‘3‘);
insert into syasuo_menu values(‘10‘,‘腾讯科技‘,‘1‘);
insert into syasuo_menu values(‘11‘,‘游戏平台‘,‘10‘,‘2‘);
insert into syasuo_menu values(‘12‘,‘英雄联盟‘,‘11‘,‘3‘);
insert into syasuo_menu values(‘13‘,‘地下城与勇士‘,‘3‘);
insert into syasuo_menu values(‘14‘,‘穿越火线‘,‘3‘);
insert into syasuo_menu values(‘15‘,‘聊天平台‘,‘2‘);
insert into syasuo_menu values(‘16‘,‘腾讯QQ‘,‘15‘,‘3‘);
insert into syasuo_menu values(‘17‘,‘微信‘,‘3‘);
insert into syasuo_menu values(‘18‘,‘个人微信‘,‘17‘,‘4‘);
insert into syasuo_menu values(‘19‘,‘企业微信‘,‘4‘);
insert into syasuo_menu values(‘20‘,‘2‘);
insert into syasuo_menu values(‘21‘,‘QQ音乐‘,‘20‘,‘3‘);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!