基于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>

我们所需要做的就是把我们数据库里面的菜单数据,动态构建这种递进式的数据结构即可。

时间: 2024-10-31 18:16:05

基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式的相关文章

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:http

基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和图片插入操作,这个控件的使用非常方便,并且用户群也很大. Summernote 是一个简单灵活,所见即所得(WYSIWYG)的编辑器,Summernote是一个轻量级.灵活基于Bootstrap和jQuery的HTML文本编辑器,拥有强大的API配置功能,多国语言支持支持Bootstra

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预

基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

在前面介绍了一系列的<基于Metronic的Bootstrap开发框架经验总结>的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本篇随笔主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用.关于Uploadify的控件介绍,可以参考我之前的随笔介绍<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>. 1.文件上传插件File In

基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个版本的内容进行一次更新调整,以期达到与时俱进的目的.从最近这几个版本来看,Metronic本身的目录结构以及功能没有太多的变化,但增加了一些较为方便的功能,本篇随笔对比它们进行介绍. 1.Metronic版本更新 首先我们来对空白页面进行不同版本的对比,文件的对比首选Beyond Compare,两

基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2

在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按钮的方式移动收藏记录,功能虽然实现的还算不错,不过文章出来后,有读者同行指出可以利用直接拖动的方式实现排序更方便,因此对其中列表记录的排序进行了研究,从而介绍了如何利用Sortable开源JS组件实现拖动排序的处理,本篇随笔介绍了该组件在连接收藏夹排序中的应用. 1.收藏记录的排序处理回顾 上篇随笔介绍的收藏

基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录进行合理的分页,集成各种增删改查的按钮等功能.随着开发项目的需求辩护,对数据记录分页展示.排序等功能都是常态的要求,因此在代码生成工具中调整了主列表界面的列表展示插件为Bootstrap-table插件,本篇随笔主要介绍在代码生成工具Database2Sharp中集成对Bootstrap-table

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用.在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理 1)数据的列

基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把这些图标方便应用在各个页面部件上,如菜单模块,按钮界面,表单输入等多个场合进行使用.在前面随笔<基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用>中,我对如何抽取Bootstrap图标,并单独开发一个页面进行图表的管理,本随笔介绍如何在这个基础上