值得分享的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 相关文章推荐
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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自定义函数之递归删除文件及目录
2010/08/08 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
nodeJS微信分享
2017/12/20 NodeJs
javascrit中undefined和null的区别详解
2019/04/07 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python request使用方法及问题总结
2020/04/26 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
幼儿园中班教师寄语
2014/04/03 职场文书
幼儿园新年寄语
2014/04/03 职场文书
质量承诺书格式
2014/05/20 职场文书
初中学校对照检查材料
2014/08/19 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
端午节寄语2015
2015/03/23 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
学习党史心得体会2016
2016/01/23 职场文书