基于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文件
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/ace-skins.min.css">
<link rel="stylesheet" href="assets/css/ace-rtl.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.addtabs.css">
<link rel="stylesheet" href="assets/css/ace.min.css"> <script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/ace-extra.min.js"></script>
<script type="text/javascript" src="assets/js/ace.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.addtabs.js"></script>
再看看页面布局
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state">
<div class="navbar-container ace-save-state" id="navbar-container"> <button type="button" class="navbar-toggle menu-toggle pull-left" id="menu-toggle"
data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <div class="navbar-header pull-left">
<a href="index.html" class="navbar-brand">
<small><i class="fa fa-leaf"></i>Ace Admin</small>
</a>
</div> <div class="navbar-buttons navbar-header pull-right">
<ul class="navbar ace-nav">
<li class="light-blue dropdown-modal">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<img src="" alt="Jason's Photo" class="nav-user-photo" />
<span class="user-info">
<small>Welcom,</small>Jason
</span>
<i class="ace-con fa fa-caret-down"></i>
</a> <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="#"><i class="ace-icon fa fa-cog"></i>Settings</a>
</li>
<li><a href="#"><i class="ace-icon fa fa-user"></i>Profile</a></li>
<li class="divider"></li>
<li><a href="#"><i class="ace-icon fa fa-power-off"></i>Logut</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-container ace-save-state" id="main-container">
<div id="sidebar" class="sidebar">
<ul id="menu" class="nav nav-list">
</ul><!-- /.nav-list -->
<!-- 菜单伸缩 -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon"
class="ace-icon fa fa-angle-double-left ace-save-state"
data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<!-- content start-->
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#index" data-toggle="tab">首页</a>
</li>
</ul>
<div class="tab-content" style="height: 100%;width: 100%">
<div class="tab-pane actvie" id="index">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content end-->
</div>
</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('','阿里巴巴','','','menu-icon fa fa-list');
insert into syasuo_menu values('','电商平台','','');
insert into syasuo_menu values('','淘宝商城','','');
insert into syasuo_menu values('','天猫超市','','');
insert into syasuo_menu values('','个人店铺','','');
insert into syasuo_menu values('','支付平台','','');
insert into syasuo_menu values('','支付宝','','');
insert into syasuo_menu values('','音乐平台','','');
insert into syasuo_menu values('','虾米音乐','','');
insert into syasuo_menu values('','腾讯科技','','');
insert into syasuo_menu values('','游戏平台','','');
insert into syasuo_menu values('','英雄联盟','','');
insert into syasuo_menu values('','地下城与勇士','','');
insert into syasuo_menu values('','穿越火线','','');
insert into syasuo_menu values('','聊天平台','','');
insert into syasuo_menu values('','腾讯QQ','','');
insert into syasuo_menu values('','微信','','');
insert into syasuo_menu values('','个人微信','','');
insert into syasuo_menu values('','企业微信','','');
insert into syasuo_menu values('','音乐平台','','');
insert into syasuo_menu values('','QQ音乐','','');
基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单的更多相关文章
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- hangfire+bootstrap ace 模板实现后台任务管理平台
前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
- Bootstrap优秀模板-ColorAdmin.4.3.0
老牌的Bootstrap商业模板,提供HTML.AngularJS.AngularJS5.Vue.React多种环境,风格覆盖Flat.Material.Apple.Transparent甚至Face ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- linux下通过NFS将远程磁盘mount到本地
最近由于项目原因需要和其他两家公司对接,需要取对方服务器中的图像数据,原本约定是三方都通过http协议来进行通讯,奈何对接方不配合,说文件就在他们服务器放着,怎么取他们不管.所以采取将对方服务器磁盘挂 ...
- 浅析 if __name__ == __main__ :
有句话经典的概括了这段代码的意义: “Make a script both importable and executable” 意思就是说让你写的脚本模块既可以导入到别的模块中用,另外该模块自己也可 ...
- arcgis api for silverlight 3.1 更新说明
前言: 查看arcgis sl api 老版本帮助的方式:http://resources.arcgis.com/en/help/silverlight-api/3.0/xxxxxxx 新版本的帮助默 ...
- SQL点点滴滴_UPDATE小计
1.更新tb_card中c_customer字段的值等于tb_customer表中c_no的值 update tb_card set c_customer=ct.c_no from tb_custom ...
- SVNKit学习——基于Repository的操作之print repository tree、file content、repository history(四)
此篇文章同样是参考SVNKit在wiki的官方文档做的demo,每个类都可以单独运行.具体的细节都写到注释里了~ 开发背景: SVNKit版本:1.7.14 附上官网下载链接:https://www. ...
- dll的制作
https://blog.csdn.net/guanchanghui/article/details/1621031
- RuntimeBroker ClipboardBroker EoP
datetime: 2017.04.28 漏洞简介 随着沙箱技术的普及,现在主流的操作系统及软件都开始支持沙箱,以此来缓解层出不穷的远程代码执行漏洞对系统造成的危害.AppContainer是自Win ...
- impala安装笔记(Ubuntu)
1.Override 1.With Impala, you can query data, whether stored in HDFS or Apache HBase – including SEL ...
- mysql实现‘主从复制’
mysql主从复制(超简单) 怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 首先准备多台服务器,其中一台作为主服务器,从服务器数量自定. 1.主从服务器分别作以下操作: 主服务器 ...
- AngularJs学习笔记--Dependency Injection(DI,依赖注入)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...