當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/15 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Bootstrap Ace模板+bootstrap.addtabs.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> 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  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  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');

轉載于:https://www.cnblogs.com/syasuo/p/9948290.html

總結

以上是生活随笔為你收集整理的基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：单引号内的双引号内的双引号怎么写
下一篇： 180326新闻：创客授牌仪式新闻稿