值得分享的Bootstrap Ace模板实现菜单和Tab页效果


Posted in Javascript onDecember 30, 2015

本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果。

一、效果展示

折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了。

1、初始加载出来的效果

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

2、展开菜单(支持多级展开,后面代码介绍)

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

3、点击子菜单,以Tab页的形式打开对应的页面

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

4、支持菜单折叠

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

5、打开的菜单过多时自动换行显示,折叠后自适应

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

二、代码示例

有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备。本文主要使用的它的菜单的效果,下面就来看看Ace模板菜单效果的实现代码。

1、菜单效果
由于Ace是基于Bootstrap的,所以首先需要引用jquery和bootstrap组件,先来总的看看它需要引用哪些文件吧。

<script src="/Scripts/jquery-1.9.1.min.js"></script>

 <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <link href="/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
 <link href="/Content/ace/css/ace-rtl.min.css" rel="stylesheet" />
 <link href="/Content/ace/css/ace-skins.min.css" rel="stylesheet" />
 <link href="/Content/sidebar-menu/sidebar-menu.css" rel="stylesheet"/>

 <script src="/Content/ace/js/ace-extra.min.js"></script>
 <script src="/Content/ace/js/ace.min.js"></script>

  <script src="/Content/sidebar-menu/sidebar-menu.js"></script>

呵呵,看着还是挺多的吧。除了最后一个js文件(<script src="/Content/sidebar-menu/sidebar-menu.js"></script>)是博主自己封装的,其他基本都是些组件需要的特性组件。看看页面上面要放哪些html标签:

 

 <div class="sidebar" id="sidebar">
  <ul class="nav nav-list" id="menu"></ul>
  <div class="sidebar-collapse" id="sidebar-collapse">
   <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
  </div>
  </div>

再来看看sidebar-menu.js这个文件里面封装的方法:

(function ($) {
 $.fn.sidebarMenu = function (options) {
 options = $.extend({}, $.fn.sidebarMenu.defaults, options || {});
 var target = $(this);
 target.addClass('nav');
 target.addClass('nav-list');
 if (options.data) {
  init(target, options.data);
 }
 else {
  if (!options.url) return;
  $.getJSON(options.url, options.param, function (data) {
  init(target, data);
  });
 }
 var url = window.location.pathname;
 //menu = target.find("[href='" + url + "']");
 //menu.parent().addClass('active');
 //menu.parent().parentsUntil('.nav-list', 'li').addClass('active').addClass('open');
 function init(target, data) {
  $.each(data, function (i, item) {
  var li = $('<li></li>');
  var a = $('<a></a>');
  var icon = $('<i></i>');
  //icon.addClass('glyphicon');
  icon.addClass(item.icon);
  var text = $('<span></span>');
  text.addClass('menu-text').text(item.text);
  a.append(icon);
  a.append(text);
  if (item.menus&&item.menus.length>0) {
   a.attr('href', '#');
   a.addClass('dropdown-toggle');
   var arrow = $('<b></b>');
   arrow.addClass('arrow').addClass('icon-angle-down');
   a.append(arrow);
   li.append(a);
   var menus = $('<ul></ul>');
   menus.addClass('submenu');
   init(menus, item.menus);
   li.append(menus);
  }
  else {
   var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\'});';
   a.attr('href', href);
   //if (item.istab)
   // a.attr('href', href);
   //else {
   // a.attr('href', item.url);
   // a.attr('title', item.text);
   // a.attr('target', '_blank')
   //}
   li.append(a);
  }
  target.append(li);
  });
 }
 }

 $.fn.sidebarMenu.defaults = {
 url: null,
 param: null,
 data: null
 };
})(jQuery);

在页面上面直接调用sidebar-menu的方法

$(function () {
  $('#menu').sidebarMenu({
  data: [{
   id: '1',
   text: '系统设置',
   icon: 'icon-cog',
   url: '',
   menus: [{
   id: '11',
   text: '编码管理',
   icon: 'icon-glass',
   url: '/CodeType/Index'
   }]
  }, {
   id: '2',
   text: '基础数据',
   icon: 'icon-leaf',
   url: '',
   menus: [{
   id: '21',
   text: '基础特征',
   icon: 'icon-glass',
   url: '/BasicData/BasicFeature/Index'
   }, {
   id: '22',
   text: '特征管理',
   icon: 'icon-glass',
   url: '/BasicData/Features/Index'
   }, {
   id: '23',
   text: '物料维护',
   icon: 'icon-glass',
   url: '/Model/Index'
   }, {
   id: '24',
   text: '站点管理',
   icon: 'icon-glass',
   url: '/Station/Index'
   }]
  }, {
   id: '3',
   text: '权限管理',
   icon: 'icon-user',
   url: '',
   menus: [{
   id: '31',
   text: '用户管理',
   icon: 'icon-user',
   url: '/SystemSetting/User'
   }, {
   id: '32',
   text: '角色管理',
   icon: 'icon-apple',
   url: '/SystemSetting/Role'
   }, {
   id: '33',
   text: '菜单管理',
   icon: 'icon-list',
   url: '/SystemSetting/Menu'
   }, {
   id: '34',
   text: '部门管理',
   icon: 'icon-glass',
   url: '/SystemSetting/Department'
   }]
  }, {
   id: '4',
   text: '订单管理',
   icon: 'icon-envelope',
   url: '',
   menus: [{
   id: '41',
   text: '订单查询',
   icon: 'icon-glass',
   url: '/Order/Query'
   }, {
   id: '42',
   text: '订单排产',
   icon: 'icon-glass',
   url: '/Order/PLANTPRODUCT'
   }, {
   id: '43',
   text: '订单撤排',
   icon: 'icon-glass',
   url: '/Order/cancelPRODUCT'
   }, {
   id: '44',
   text: '订单HOLD',
   icon: 'icon-glass',
   url: '/Order/hold'
   }, {
   id: '45',
   text: '订单删除',
   icon: 'icon-glass',
   url: '/Order/delete'
   }, {
   id: '47',
   text: '订单插单',
   icon: 'icon-glass',
   url: '/Order/insertorder'
   }, {
   id: '48',
   text: '订单导入',
   icon: 'icon-glass',
   url: '/Order/Import'
   }]
  }]
  });
 });

这里需要说明的很重要的一点就是关于菜单前面的小图标:

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

con的值为icon-user的时候,菜单上面就会显示一个如图的小图标。当然一般情况下,菜单肯定是动态加载的的,如果需要从后台取数据,可以直接调用此方法:

$('#menu').sidebarMenu({ url: "/api/UserApi/GetMenuByUser/", param: { strUser: 'admin' } });
即可,呵呵,很简单吧。

2、Tab页效果
Tab页的效果其实是和左边菜单息息相关的,首先还是看看Tab页效果的js引用。
 <script src="/Scripts/bootstrap-tab.js"></script>
页面的html标签:

<div class="main-content"><div class="page-content">
   <div class="row">
   <div class="col-xs-12" style="padding-left:5px;">
    <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#Index" role="tab" data-toggle="tab">首页</a></li>
    </ul>
    <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="Index">
    </div>
    </div>
   </div>
   </div>
  </div>
  </div>

bootstrap-tab.js这个文件里面封装了addTabs方法

var addTabs = function (options) {
 //var rand = Math.random().toString();
 //var id = rand.substring(rand.indexOf('.') + 1);
 var url = window.location.protocol + '//' + window.location.host;
 options.url = url + options.url;
 id = "tab_" + options.id;
 $(".active").removeClass("active");
 //如果TAB不存在,创建一个新的TAB
 if (!$("#" + id)[0]) {
 //固定TAB中IFRAME高度
 mainHeight = $(document.body).height() - 90;
 //创建新TAB的title
 title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + options.title;
 //是否允许关闭
 if (options.close) {
  title += ' <i class="glyphicon glyphicon-remove" tabclose="' + id + '"></i>';
 }
 title += '</a></li>';
 //是否指定TAB内容
 if (options.content) {
  content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>';
 } else {//没有内容,使用IFRAME打开链接
  content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe src="' + options.url + '" width="100%" height="' + mainHeight +
   '" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>';
 }
 //加入TABS
 $(".nav-tabs").append(title);
 $(".tab-content").append(content);
 }
 //激活TAB
 $("#tab_" + id).addClass('active');
 $("#" + id).addClass("active");
};
var closeTab = function (id) {
 //如果关闭的是当前激活的TAB,激活他的前一个TAB
 if ($("li.active").attr('id') == "tab_" + id) {
 $("#tab_" + id).prev().addClass('active');
 $("#" + id).prev().addClass('active');
 }
 //关闭TAB
 $("#tab_" + id).remove();
 $("#" + id).remove();
};
$(function () {
 mainHeight = $(document.body).height() - 45;
 $('.main-left,.main-right').height(mainHeight);
 $("[addtabs]").click(function () {
 addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true });
 });

 $(".nav-tabs").on("click", "[tabclose]", function (e) {
 id = $(this).attr("tabclose");
 closeTab(id);
 });
});

那么,在什么时候调用Addtabs方法呢?答案是注册菜单click事件的时候,这部分代码在前面sidebar-menu组件封装的时候就有,可以看看上面。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是bootstrap ace模板的菜单和Tab页效果的展示,总的来说,基本的功能具备了,但菜单的样式还有待调整,比如点击某个菜单之后,点击的菜单需要给一个选中的状态。如果你的项目也是用的bootstrap风格,研究下ace模板,可以使用起来试试。

Javascript 相关文章推荐
javascript数组遍历的方法实例分析
Sep 13 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
JS实现网站吸顶条
Jan 08 Javascript
原生JS实现留言板功能
Feb 08 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JS实现放大镜效果
Sep 21 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 #Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 #Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 #Javascript
JavaScript阻止回车提交表单的方法
Dec 30 #Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 #Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 #Javascript
JavaScript小技巧整理
Dec 30 #Javascript
You might like
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python内置函数delattr的具体用法
2017/11/23 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
浅析Python四种数据类型
2018/09/26 Python
python join方法使用详解
2019/07/30 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
高中化学教学反思
2014/01/13 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
中年人生感言
2014/02/04 职场文书
中学教师教育感言
2014/02/21 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
安全生产奖惩制度
2015/08/06 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python