基于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><!-- /.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');

转载于:https://www.cnblogs.com/syasuo/p/9948290.html

基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单相关推荐

在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
bootstrap ace后台管理界面模板
2019独角兽企业重金招聘Python工程师标准>>> bootstrap ace后台管理界面模板 http://www.daimajiayuan.com/preview/18152 ...
bootstrap 后端模板
目录一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.LigerUI 十一 ...
2018年最好用的20个Bootstrap网站模板
Bootstrap是目前最受欢迎也是最简洁的建站方式之一,尤其是伴随移动端的发展,响应式设计已经毫无疑问成为了网页设计的趋势,网站建设要求兼容手机端已经是一种刚需,也成为提升用户体验的一种必要方式.但 ...
html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
Bootstrap网页模板
Bootstrap使用最新的HTML5构建网页,要求所有文档必须是HTML5的文档类型.创建Bootstrap网页模板只需要两步: 第一步,安装Bootstrap的样式.只要使用 Bootstrap, ...
12个免费的 Twitter Bootstrap 后台模板
12个免费的 Twitter Bootstrap 后台模板在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找 ...
BootStrap基本模板
模板代码如下:  <!DOCTYPE html> <html lang="en"> <head> <!- ...
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...

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

基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单相关推荐

最新文章

热门文章