ACE Admin 模板实现sidebar菜单联动tabs页签
另一篇:LTE Admin 模板实现sidebar菜单联动tabs页签(你值得拥有)
说在前面的话:
该组件主要使用ace admin实现Tab页联动sidebar。实现的目标是:
1、不改动ace admin的模板框架(Bootstrap v3.3.6);
2、tab页的加载默认使用ajax,get方式,详见(bootstrap.addtabs.js);不用iframe;
3、sidebar实现蓝色图标点击选中效果;
4、sidebar标题与tab页的联动,tab页与sidebar的联动可实现;
5、tab标签页的动态滚动(左滚、右滚,左右滚动一屏);
6、右键菜单(关闭左侧、右侧、其他,全部关闭,刷新),全屏
一、效果展示
二、代码部分
新增JS文件:bootstrap.addtabs.js,bootstrap.js(压缩后的文件名为bootstrap.min.js)
新增CSS文件:bootstrap.addtabs.css
index.html引入对应JS、CSS文件
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!-- 这里引入bootstrap.addtabs.css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.addtabs.css"/>
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<!-- 这里原先引入的是压缩后的bootstrap.min.js,修改了源码,引入未压缩的 -->
<script src="assets/js/bootstrap.js"></script>
<!-- 引入bootstrap.addtabs.js -->
<script type="text/javascript" src="assets/js/bootstrap.addtabs.js" ></script>
index.html页面结构未变,更改页面元素的样式,其中sidebar部分修改微小,大致如下
<ul class="submenu"> 下的
<a href="tables.html"> 改为
<a class="list-group-item" data-addtab="jqgrid" data-url="mailbox.txt">
<li class=""><a href="#" class="dropdown-toggle"><i class="menu-icon fa fa-list"></i><span class="menu-text"> Tables </span><b class="arrow fa fa-angle-down"></b></a><b class="arrow"></b><ul class="submenu"><li class=""><a class="list-group-item" data-addtab="simdyn" data-url="mailbox.txt"><i class="menu-icon fa fa-caret-right"></i>Simple & Dynamic</a><b class="arrow"></b></li><li class=""><a class="list-group-item" data-addtab="jqgrid" data-url="mailbox.txt"><i class="menu-icon fa fa-caret-right"></i>jqGrid plugin</a><b class="arrow"></b></li></ul>
</li>
其中a标签还可以添加如下属性,分别对应下面几种情况
<a class="list-group-item" data-addtab="simdyn" data-url="mailbox.txt">
// 指定tab页内容
data-content="Customize the content"
// 使用ajax
data-ajax="true"
// 设置tab页签标题
data-title="Customize the title"
// 指定在哪个tab页内容中显示
data-target="#tabs2"
<div class="main-content-inner"> 标签的代码替换成
<div class="main-content"><div class="main-content-inner content-wrapper" id="content-wrapper"><!-- nav tabs --><div class="content-tabs"><button class="roll-nav roll-left tabLeft" role="rollleft"><a href="javascript:void(0);" ><i class="glyphicon glyphicon-fast-backward"></i></a></button><nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu"><ul class="page-tabs-content nav nav-tabs" style="margin-left: 0px;"><li role="presentation" id="tab_tab_home1" aria-url="example/ajax/mailbox.txt" aria-ajax="false" class="menu_tab active"><a href="#tab_home1" aria-controls="tab_home1" role="tab" data-toggle="tab">欢迎页</a><i class="close-tab glyphicon glyphicon-remove" style="display: none;"></i></li></ul></nav><button class="roll-nav roll-right tabRight" role="roleright"><a href="javascript:void(0);"><i class="glyphicon glyphicon-fast-forward"></i></a></button><button class="roll-nav roll-right fullscreen" role = "fullscreen"><i class="glyphicon glyphicon-fullscreen"></i></button></div><!-- Tab panes --><div class="tab-content"><div class="tab-pane content active" id="tab_home1" role="tabpanel">I'm a homepage.</div></div></div>
</div>
配合sidebar点击事件即可产生效果展示中效果
// 给nav-list列表中有data-addtab属性的a标签绑定点击事件
$(settings.monitor).on('click', '[data-addtab]', function() {// sidebar蓝色图标选中效果代码$('.nav-list').find('.active').removeClass('active');$(this).parents("li").addClass('active').siblings('li').removeClass('active');$(this).closest("li").addClass('active').siblings().removeClass('active');_click($(this));_scrollToTab(true, (this));
});
三、滚动代码(向左边滚动)
_scrollTabLeft = function() {var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));var tabOuterWidth = _calSumWidth($(".content-tabs").children().not(".menuTabs"));var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;var scrollVal = 0;if($(".page-tabs-content").width() < visibleWidth) {return false;} else {var tabElement = $(".menu_tab:first");var offsetVal = 0;while((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {offsetVal += $(tabElement).outerWidth(true);tabElement = $(tabElement).next();}offsetVal = 0;if(_calSumWidth($(tabElement).prevAll()) > visibleWidth) {while((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {offsetVal += $(tabElement).outerWidth(true);tabElement = $(tabElement).prev();}scrollVal = _calSumWidth($(tabElement).prevAll());}}$('.page-tabs-content').animate({marginLeft: 0 - scrollVal + 'px'}, "fast");
};
四、右键代码(部分)
//关闭右侧
$('ul.rightMenu a[data-right=remove-right]').on('click', function() {var tab_id = $(this).parent('ul').attr("aria-controls");$('#tab_' + tab_id).nextUntil().each(function() {var id = $(this).attr('id');if(id && id != 'tab_' + tab_id) {$.addtabs.close({"id": $(this).children('a').attr('aria-controls')});}});_scrollToTab(false, $('#tab_' + tab_id))// $.addtabs.drop();
});//关闭全部
$('ul.rightMenu a[data-right=remove-all]').on('click', function() {var tab_id = $(this).parent('ul').attr("aria-controls");$.addtabs.closeAll(null);
});$.addtabs.closeAll = function(target) {if(typeof target == 'string') {target = $('body').find(target);} else {target = $('body').find(settings.target)}$.each(target.find('li[id]'), function() {var id = $(this).children('a').attr('aria-controls');$("#tab_" + id).remove();$("#" + id).remove();});
};
五、Ace Admin 简介
Ace Admin官网 Dashboard - Ace Admin
Ace Admin Git GitHub - bopoda/ace: Twitter bootstrap 3 admin template
(1)目录结构:简洁明了
(2)index.html入口页面
(3)主要布局
1)Navbar导航栏
2)Sidebar侧边栏
3)Breadcrumbs面包屑(在“主要内容”中)
4)Page conten页面内容(在“主要内容”中)
5)Settings box设置框(在“页面内容”内)
6) Footer
#### 相关源码:希望各位看官达人多多支持
(9.99元——微信打赏,一年365天)
(打赏后评论留言或者备注留言——已支持,你的邮箱地址,模板名称,
例如:已支持,xxxx@qq.com,ace,将及时发送源码)
ACE Admin 模板实现sidebar菜单联动tabs页签相关推荐
- Vue头部菜单,点击菜单新增tab页签
Vue头部菜单,点击菜单新增tab页签 <template> <div class="wrapper"> <!-- 页面头部部分 -->< ...
- Jquery实现的Tabs页签
管理导航 系统设置 用户管理 内容管理 其他管理 1111111 222222222 33333333333 4444444444 555555555555555 <!DOCTYPE html ...
- easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架 基于Ace Admin框架菜单导航 ...
- easy admin java_GitHub - zzccbb8/easyadmin: 简易的java后台管理框架,基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 简介 一个简单好看的后台开发模板框架,目前具备用户管理,菜单管理和角色管理3个功能,也只打算做这3个,毕竟这是所有后台管理框架的核心,而本项目也只是打算做一个模板框架而已 优点 一 ...
- spring admin mysql_easyadmin: 简易的java后台管理框架,基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 数据库一定要用utf8mb4编码,记得先执行manager.sql,再执行initdata.sql,其中tenant表不用管,这是我打算做的另外一个项目设计的表,因为直接复制的本项 ...
- YII与Ace Admin 的集成
目录 一. 前言... 1 二.为什么要使用YII+ace. 1 三.新建YII模块... 1 四.如何修改模板... 3 五.注意的地方... 4 六.整合的不足之处... 4 一. 前言 yii- ...
- html响应式布局 ace,.NET Core基于Ace Admin的响应式框架
原标题:.NET Core基于Ace Admin的响应式框架 转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架 基于Ace A ...
- PHP随机配菜_PHP+JS三级菜单联动菜单实现方法
本文实例讲述了PHP+JS三级菜单联动菜单实现方法.分享给大家供大家参考,具体如下: 智能递归菜单-读取数据库 TD { FONT-FAMILY: "Verdana", " ...
- js_jQuery【下拉菜单联动dom操作】
下拉菜单联动dom操作案例 源码: <!DOCTYPE html> <html lang="en"><head><meta charset ...
- vue 左右滑动菜单_Vue实现左右菜单联动实现代码
本文介绍了Vue实现左右菜单联动实现代码吗,分享给大家,也给自己留个笔记,具体如下: 之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用 Vue 来实现,将这个联动抽离成为一个单独的 ...
最新文章
- ASP.NET中TimeSpan的用法
- Effective java笔记3--类和接口2
- 12-C语言排序算法
- 【Groovy】MOP 元对象协议与元编程 ( 方法委托 | 批量方法委托 )
- hdu 3018 Ant Trip
- 【数据结构与算法】之深入解析“寻找峰值”的求解思路与算法示例
- CCF201409-5 拼图(30分)
- java 商品评价计算算法
- servlet下载文件(注意文件名字必须是英文)
- 信息技术课与计算机课有关系吗,信息技术教学与计算机教学的区别与联系
- bootstrap中container类和container-fluid类的区别
- spring使用@Value注解读取.properties文件时出现中文乱码问题的解决
- 搭建sendmail邮件服务器
- 洛谷 P1573 栈的操作
- python webpy 开发文档_Python webpy微信公众号开发之 回复图文消息
- win8计算机里没有用户名和密码错误,win8电脑其他用户的用户名和密码肿么弄?
- 计算机系统时microsoft账号是,电脑microsoft账户登不进去
- Python修改图片分辨率来改变图片大小
- matplotlib.pyplot 绘制图中图
- 如何免费pdf全部转化为word版
热门文章
- 戴尔G7 7588 Windows 10 未安装任何音频输出设备
- windows_98.css—— 实现Win98效果的网页样式
- DataFormatString格式字符串
- dell optiplex 7090 ssf 注入intel i219 网卡驱动安装exsi 7.0.2
- 电脑网银服务器无效响应,台州银行网银管家
- php adodb类库下载,PHP ADODB连接、操作数据库类
- 汽车LED驱动器MPQ3326替代替换
- Java文件传输(有进度条)
- psp记忆棒测试软件,psp记忆棒修复工具
- 花费巨资参加SAP培训真的有用吗?