基于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>publicclassConfigData{///<summary>///Web开发框架所属的系统类型定义///</summary>publicconststringSystemType="WareMis";///<summary>///配置视图的样式布局///</summary>publicstaticLayoutTypeLayout=LayoutType.Layout2;}///<summary>///布局样式枚举///</summary>publicenumLayoutType{Layout,Layout2,Layout3}
3、菜单的动态生成为了实现菜单动态的生成,我们需要了解这几种方式的菜单结构,然后我们根据它们的特点进行数据结构的生成即可。
第一第二种布局方式的菜单结构数据是一样的,它们的内容如下所示。
<ulclass="page-sidebar-menupage-header-fixed"data-keep-expanded="false"data-auto-scroll="true"data-slide-speed="200"><liclass="nav-itemstart"id="1"><ahref="/Home/index?tid=1"class="nav-linknav-toggle"><iclass="icon-home"></i><spanclass="title">首页</span><spanclass="selected"></span><spanclass="arrowopen"></span></a></li>@Html.Raw(@ViewBag.MenuString)</ul>
我们可以通过后台生成:@Html.Raw(@ViewBag.MenuString)
然后输出的界面里即可。
我们来看看前两种菜单的结构,简单的结构如下所示
<liclass="nav-itemstart"id="1"><ahref="/Home/index?tid=1"class="nav-linknav-toggle"><iclass="icon-home"></i><spanclass="title">首页</span><spanclass="selected"></span><spanclass="arrowopen"></span></a></li>
如果有子菜单的,那么两级菜单的结构如下所示。
<liclass="nav-item"id="3"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-rocket"></i><spanclass="title">客户管理</span><spanclass="arrow"></span></a><ulclass="sub-menu"><liclass="nav-item"id="31"><ahref="second?tid=3&sid=31"><iclass="glyphiconglyphicon-th-list"></i><spanclass="title">客户管理</span></a></li><liclass="nav-item"id="32"><ahref="second?tid=3&sid=32"><iclass="icon-basket"></i><spanclass="badgebadge-roundlessbadge-danger">new</span><spanclass="title">客户联系人</span></a></li></ul></li>
如果是三级菜单的结构,如下所示:
<liclass="nav-itemactiveopen"id="2"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-basket"></i><spanclass="title">行业动态</span><spanclass="selected"></span><spanclass="arrowopen"></span></a><ulclass="sub-menu"><liclass="nav-itemactiveopen"id="21"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-home"></i><spanclass="title">行业动态</span><spanclass="arrow"></span><spanclass="selected"></span></a><ulclass="sub-menu"><liclass="nav-itemactiveopen"id="211"><ahref="second?tid=2&sid=21&ssid=211"><iclass="icon-home"></i><spanclass="badgebadge-danger">4</span><spanclass="title">政策法规</span></a></li><liclass="nav-item"id="212"><ahref="second?tid=2&sid=21&ssid=212"><iclass="icon-basket"></i><spanclass="badgebadge-warning">4</span><spanclass="title">通知公告</span></a></li></ul></li></ul></li>
根据这些内容,我们在后台动态输出菜单结构即可。
例如我们在基类控制器里面,通过判断视图的处理,实现菜单内容的输出。
///<summary>///重载视图展示界面,方便放置一些常规的ViewBag变量。///如果放在OnActionExecuting,则会导致任何请求都会执行一次,从而导致多次执行,降低响应效率///</summary>protectedoverrideViewResultView(stringviewName,stringmasterName,objectmodel){//登录信息统一设置if(CurrentUser!=null){ViewBag.FullName=CurrentUser.FullName;ViewBag.Name=CurrentUser.Name;//ViewBag.MenuString=GetMenuString();ViewBag.MenuString=GetMenuStringCache();//使用缓存,隔一段时间更新}returnbase.View(viewName,masterName,model);}
为了提高菜单的响应处理,避免多次递归耗时,我们可以把生成好的菜单内容,放到缓存里面,通过键值实现处理。
///<summary>///使用分布式缓存实现菜单数据的缓存处理///</summary>///<returns></returns>publicstringGetMenuStringCache(){stringitemValue=MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache_"+CurrentUser.ID,delegate(){returnGetMenuString();},null,DateTime.Now.AddMinutes(5)//5分钟以后过期,重新获取);returnitemValue;}
而对于水平方向的菜单处理,和前面两者有所不同。
如二级菜单数据展示如下所示。
<liclass="menu-dropdownclassic-menu-dropdown"><ahref="index.html"class="nav-link"><iclass="icon-bar-chart"></i>Default<spanclass="arrow"></span></a></li><liclass="menu-dropdownclassic-menu-dropdownactive"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-basket"></i>Dashboard<spanclass="arrow"></span></a><ulclass="dropdown-menupull-left"><liclass="active"><ahref="index.html"class="nav-linkactive"><iclass="icon-bar-chart"></i>Dashboard<spanclass="arrow"></span></a></li></ul></li>
三级菜单展示的数据如下所示。
<liclass="menu-dropdownclassic-menu-dropdown"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-briefcase"></i>Pages<spanclass="arrow"></span></a><ulclass="dropdown-menupull-left"><liclass="dropdown-submenu"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-basket"></i>eCommerce<spanclass="arrow"></span></a><ulclass="dropdown-menu"><liclass=""><ahref="ecommerce_index.html"class="nav-link"><iclass="icon-home"></i>Dashboard</a></li><liclass=""><ahref="ecommerce_orders.html"class="nav-link"><iclass="icon-basket"></i>Orders</a></li></ul></li><liclass="dropdown-submenu"><ahref="javascript:;"class="nav-linknav-toggle"><iclass="icon-notebook"></i>Login<spanclass="arrow"></span></a><ulclass="dropdown-menupull-left"><liclass=""><ahref="page_user_login_1.html"class="nav-link"target="_blank">LoginPage1</a></li><liclass=""><ahref="page_user_login_2.html"class="nav-link"target="_blank">LoginPage2</a></li></ul></li></ul></li>
我们所需要做的就是把我们数据库里面的菜单数据,动态构建这种递进式的数据结构即可。
主要研究技术:
代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发。
专注于Winform开发框架/混合式开发框架、Web开发框架、Bootstrap开发框架、微信门户开发框架的研究及应用。
撰写人:伍华聪 http://www.iqidi.com
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。