基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式
在常规的后台管理系统或者前端界面中,一般都有一个导航菜单提供给用户,方便选择所需的内容。基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内容,因此菜单的效果自然也是和Bootstrap一脉相承的。基于经常使用的几种菜单样式,本文进行了相关的介绍和展示。
1、菜单展示的三种方式
菜单的展示可以做成各种各样的效果,本文只是针对性的介绍其中的三种,两种左侧竖放的菜单,一种是水平横放的菜单。
样式1:
菜单收缩后界面如下所示。
样式2:
样式3:
水平样式的菜单如下所示:
2、几种布局的组织方式
由于这几种布局方式,它们的框架布局页面(也就是Layout页面)内容有所不同,一般情况下我们可以把它分别定义为一种Layout页面,这样在实际使用的时候包含它即可。
我根据上面几种样式,分别定义了几个不同的Layout页面,如下所示
一般情况下,我们生成一个视图页面,会提示我们选择不同的视图布局页面的,确认之后会在页面顶部应用对应的Layout页面。
如果我们需要动态指定页面的布局内容,可以在上面使用一个变量来处理,如下代码所示。
@{Layout = ConfigData.ViewLayoutFile;// "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "角色信息";
}
实际上,我们一般的页面布局确定好后,就相对比较少变更的,所以为了不打破这个生成页面的布局内容,我们可以把前面处理好的Layout1/2/3等这些复制到Layout页面里面进行处理即可。
不过页面里面还是需要根据不同布局页面,指定不同的资源的。
我们添加样式的资源如下所示。
//开始全局必需样式引用 css_metronic.Include("~/Content/metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css","~/Content/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css","~/Content/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css","~/Content/metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",..........................//主题全局样式"~/Content/metronic/assets/global/css/components-rounded.css","~/Content/metronic/assets/global/css/plugins.min.css",//主题布局样式"~/Content/metronic/assets/layouts/" + Layout + "/css/layout.css","~/Content/metronic/assets/layouts/" + Layout + "/css/themes/default.min.css","~/Content/metronic/assets/layouts/" + Layout + "/css/custom.min.css");
上面红色的Layout是我们根据不同布局页面获得的一个变量,从而能够使得不同布局页面的样式和脚本顺利引入的。
/// <summary>/// 系统定义的一些常用变量/// </summary>public class ConfigData{/// <summary>/// Web开发框架所属的系统类型定义/// </summary>public const string SystemType = "WareMis";/// <summary>/// 配置视图的样式布局/// </summary>public static LayoutType Layout = LayoutType.Layout2;}/// <summary>/// 布局样式枚举/// </summary>public enum LayoutType{Layout,Layout2,Layout3}
3、菜单的动态生成
为了实现菜单动态的生成,我们需要了解这几种方式的菜单结构,然后我们根据它们的特点进行数据结构的生成即可。
第一第二种布局方式的菜单结构数据是一样的,它们的内容如下所示。
<ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"><li class="nav-item start" id="1"><a href="/Home/index?tid=1" class="nav-link nav-toggle"><i class="icon-home"></i><span class="title">首页</span><span class="selected"></span><span class="arrow open"></span></a></li>@Html.Raw(@ViewBag.MenuString)</ul>
我们可以通过后台生成:@Html.Raw(@ViewBag.MenuString)
然后输出的界面里即可。
我们来看看前两种菜单的结构,简单的结构如下所示
<li class="nav-item start" id="1"><a href="/Home/index?tid=1" class="nav-link nav-toggle"><i class="icon-home"></i><span class="title">首页</span><span class="selected"></span><span class="arrow open"></span></a>
</li>
如果有子菜单的,那么两级菜单的结构如下所示。
<li class="nav-item " id="3"><a href="javascript:;" class="nav-link nav-toggle"><i class="icon-rocket"></i><span class="title">客户管理</span><span class="arrow"></span></a><ul class="sub-menu"><li class="nav-item " id="31"><a href="second?tid=3&sid=31"><i class="glyphicon glyphicon-th-list"></i><span class="title">客户管理</span></a></li><li class="nav-item " id="32"><a href="second?tid=3&sid=32"><i class="icon-basket"></i><span class="badge badge-roundless badge-danger">new</span><span class="title">客户联系人</span></a></li></ul>
</li>
如果是三级菜单的结构,如下所示:
<li class="nav-item active open" id="2"><a href="javascript:;" class="nav-link nav-toggle"><i class="icon-basket"></i><span class="title">行业动态</span><span class="selected"></span><span class="arrow open"></span></a><ul class="sub-menu"><li class="nav-item active open" id="21"><a href="javascript:;" class="nav-link nav-toggle"><i class="icon-home"></i><span class="title">行业动态</span><span class="arrow"></span><span class="selected"></span></a><ul class="sub-menu"><li class="nav-item active open" id="211"><a href="second?tid=2&sid=21&ssid=211"><i class="icon-home"></i><span class="badge badge-danger">4</span><span class="title">政策法规</span></a></li><li class="nav-item " id="212"><a href="second?tid=2&sid=21&ssid=212"><i class="icon-basket"></i><span class="badge badge-warning">4</span><span class="title">通知公告</span></a></li></ul></li></ul>
</li>
根据这些内容,我们在后台动态输出菜单结构即可。
例如我们在基类控制器里面,通过判断视图的处理,实现菜单内容的输出。
/// <summary> /// 重载视图展示界面,方便放置一些常规的ViewBag变量。 /// 如果放在OnActionExecuting,则会导致任何请求都会执行一次,从而导致多次执行,降低响应效率 /// </summary> protected override ViewResult View(string viewName, string masterName, object model) {//登录信息统一设置if (CurrentUser != null){ViewBag.FullName = CurrentUser.FullName;ViewBag.Name = CurrentUser.Name;//ViewBag.MenuString = GetMenuString();ViewBag.MenuString = GetMenuStringCache(); //使用缓存,隔一段时间更新}return base.View(viewName, masterName, model); }
为了提高菜单的响应处理,避免多次递归耗时,我们可以把生成好的菜单内容,放到缓存里面,通过键值实现处理。
/// <summary> /// 使用分布式缓存实现菜单数据的缓存处理 /// </summary> /// <returns></returns> public string GetMenuStringCache() {string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache_" + CurrentUser.ID , delegate(){return GetMenuString();},null, DateTime.Now.AddMinutes(5) //5分钟以后过期,重新获取);return itemValue; }
而对于水平方向的菜单处理,和前面两者有所不同。
如二级菜单数据展示如下所示。
<li class="menu-dropdown classic-menu-dropdown "><a href="index.html" class="nav-link "><i class="icon-bar-chart"></i> Default<span class="arrow"></span></a>
</li>
<li class="menu-dropdown classic-menu-dropdown active"><a href="javascript:;" class="nav-link nav-toggle "><i class="icon-basket"></i> Dashboard<span class="arrow"></span></a><ul class="dropdown-menu pull-left"><li class=" active"><a href="index.html" class="nav-link active"><i class="icon-bar-chart"></i>Dashboard<span class="arrow"></span></a></li></ul>
</li>
三级菜单展示的数据如下所示。
<li class="menu-dropdown classic-menu-dropdown "><a href="javascript:;" class="nav-link nav-toggle "><i class="icon-briefcase"></i> Pages<span class="arrow"></span></a><ul class="dropdown-menu pull-left"><li class="dropdown-submenu "><a href="javascript:;" class="nav-link nav-toggle "><i class="icon-basket"></i> eCommerce<span class="arrow"></span></a><ul class="dropdown-menu"><li class=" "><a href="ecommerce_index.html" class="nav-link "><i class="icon-home"></i> Dashboard</a></li><li class=" "><a href="ecommerce_orders.html" class="nav-link "><i class="icon-basket"></i> Orders</a></li></ul></li><li class="dropdown-submenu"><a href="javascript:;" class="nav-link nav-toggle"><i class="icon-notebook"></i> Login<span class="arrow"></span></a><ul class="dropdown-menu pull-left"><li class=""><a href="page_user_login_1.html" class="nav-link " target="_blank"> Login Page 1 </a></li><li class=""><a href="page_user_login_2.html" class="nav-link " target="_blank"> Login Page 2 </a></li></ul></li></ul>
</li>
我们所需要做的就是把我们数据库里面的菜单数据,动态构建这种递进式的数据结构即可。
主要研究技术: 代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发。 专注于Winform开发框架/混合式开发框架、Web开发框架、Bootstrap开发框架、微信门户开发框架的研究及应用。 撰写人:伍华聪 http://www.iqidi.com |
转载于:https://blog.51cto.com/wuhuacong/1828743
基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式相关推荐
- (转)基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用...
http://www.cnblogs.com/wuhuacong/p/4761637.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JST ...
- 基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本
在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个 ...
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理...
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
- 基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和大家分享下,同时也记录自己对Bootstrap开发的学习研究的点点滴 ...
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理...
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用...
为什么80%的码农都做不了架构师?>>> 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- (转)基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用...
http://www.cnblogs.com/wuhuacong/p/4762924.html 在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用...
http://www.cnblogs.com/wuhuacong/p/4759564.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理& ...
- 基于Metronic的Bootstrap开发框架经验总结
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询.分页.排序等处理 在业务系统开发中,对表格记录的查询.分页.排序等处理是 ...
最新文章
- Love Java , Love IBM , Love Sun ( SunJiHai )
- Mac OS X Terminal 101:终端使用初级教程
- OllyDbg完全教程
- 怎样设计一个良好大数据处理的解决方案?
- UILabel自适应高度和自动换行
- Java instanceof关键字详解
- jQuery Mobile中列表listview(ol、ul)的data-*选项
- 分享两个软件,listary和Snipaste,以及Listary的配置文件
- 基于软件工程的Qt播放器探索(一) 概述
- ios 集成阿里云推送通知的注意点
- 复数中欧拉公式与计算机,欧拉公式
- 计算机专业新生研讨课感悟,新生研讨课学习心得与收获
- “采菊东篱下,悠然见南山”----南山路上品太古 总结
- 深度精简版xp 安装并使用iis【转】
- thinkphp3.2 阅读数加1实现
- node服务器接口不稳定,node服务部署到服务器后,数据接口404
- 计算机学术会议英语作文,2016考研英语作文范文推荐:学术会议
- Scripting Introduction
- Markdown输出LaTex数学公式
- LRU缓存淘汰算法优化
热门文章
- VSTA InfoPath如何实现下拉列表联动
- Java实现数组逆置
- Hi3559av100安装linux,海思hi3559AV100开发板参数规格介绍
- python dataframe索引转成列_Pandas之DataFrame对象的列和索引之间的转化
- 【前端规划】来看看我整理的这一份专属技术知识图谱吧~
- 前端都该懂的浏览器工作原理,你懂了吗?
- 零基础开始学 Web 前端开发,有什么建议?(视频教程)
- 为什么招聘高级前端开发这么难?
- oracle 定时器时间分区_Oracle数据库之oracle按时间分区以及自动分区
- 上传身份证照片js_国际快递为什么需要上传身份证,怎么上传?