基於Bootstrap Ace模板+bootstrap.addtabs.js的選單
阿新 • • 發佈：2018-12-21
這幾天研究了基於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');