值得分享的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 相关文章推荐
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
webpack入门+react环境配置
Feb 08 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
js格式化时间小结
2014/11/03 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python根据服务获取端口号的方法
2019/09/25 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
合作意向协议书范本
2014/03/31 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
小学教研工作总结2015
2015/05/13 职场文书
英雄儿女观后感
2015/06/09 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers