这几天研究了基于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,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('1','阿里巴巴','0','1','menu-icon fa fa-list'); insert into syasuo_menu values('2','电商平台','1','2'); insert into syasuo_menu values('3','淘宝商城','2','3'); insert into syasuo_menu values('4','天猫超市','3','4'); insert into syasuo_menu values('5','个人店铺','3','4'); insert into syasuo_menu values('6','支付平台','1','2'); insert into syasuo_menu values('7','支付宝','6','3'); insert into syasuo_menu values('8','音乐平台','1','2'); insert into syasuo_menu values('9','虾米音乐','8','3'); insert into syasuo_menu values('10','腾讯科技','0','1'); insert into syasuo_menu values('11','游戏平台','10','2'); insert into syasuo_menu values('12','英雄联盟','11','3'); insert into syasuo_menu values('13','地下城与勇士','11','3'); insert into syasuo_menu values('14','穿越火线','11','3'); insert into syasuo_menu values('15','聊天平台','10','2'); insert into syasuo_menu values('16','腾讯QQ','15','3'); insert into syasuo_menu values('17','微信','15','3'); insert into syasuo_menu values('18','个人微信','17','4'); insert into syasuo_menu values('19','企业微信','17','4'); insert into syasuo_menu values('20','音乐平台','10','2'); insert into syasuo_menu values('21','QQ音乐','20','3');
