遵照Metronic的Bootstrap开发框架经验总括(11)–页面菜单的两种表现模式

在例行的后台管理体系或者前端界面中,一般都有一个导航菜单提供给用户,方便采取所需的内容。基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的始末,因而菜单的效益当然也是和Bootstrap一脉相承的。基于日常应用的二种菜单样式,本文举行了有关的牵线和出示。

1、菜单显示的二种办法

食谱的展现可以做成各个各个的功能,本文只是针对性的牵线其中的两种,三种右侧竖放的菜单,一种是程度横放的菜系。

样式1:

图片 1

菜单减少后界面如下所示。

图片 2

样式2:

图片 3

 

样式3:

水平样式的菜系如下所示:

图片 4

 

2、三种布局的集体章程

是因为这三种布局格局,它们的框架布局页面(也就是Layout页面)内容有所不同,一般景色下我们可以把它分别定义为一种Layout页面,这样在实际应用的时候包含它即可。

本人依据上边两种样式,分别定义了多少个例外的Layout页面,如下所示

图片 5

一般景观下,我们转移一个视图页面,会指示我们挑选不同的视图布局页面的,确认之后会在页面顶部应用对应的Layout页面。

图片 6

只要大家需要动态指定页面的布局内容,可以在下面使用一个变量来拍卖,如下代码所示。

@{
    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>
                            首页


                        </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>
                            首页


                        </a>
                    </li>

假使有子菜单的,那么两级菜单的社团如下所示。

            <li class="nav-item " id="3">
                <a href="javascript:;" class="nav-link nav-toggle">
                    <i class="icon-rocket"></i>
                    客户管理

                </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>
                            客户管理
                        </a>
                    </li>
                    <li class="nav-item  " id="32">
                        <a href="second?tid=3&sid=32">
                            <i class="icon-basket"></i>
                            new
                            客户联系人
                        </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>
                    行业动态


                </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>
                            行业动态


                        </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>
                                    4
                                    政策法规
                                </a>
                            </li>
                            <li class="nav-item " id="212">
                                <a href="second?tid=2&sid=21&ssid=212">
                                    <i class="icon-basket"></i>
                                    4
                                    通知公告
                                </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;
        }

而对于水平方向的菜单处理,和前面两者有所不同。

图片 7

如二级菜单数据呈现如下所示。

                        <li class="menu-dropdown classic-menu-dropdown ">
                            <a href="index.html" class="nav-link  ">
                                <i class="icon-bar-chart"></i> Default

                            </a>
                        </li>
                        <li class="menu-dropdown classic-menu-dropdown active">
                            <a href="javascript:;" class="nav-link nav-toggle ">
                                <i class="icon-basket"></i> Dashboard

                            </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

                                    </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

                            </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

                                    </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

                                    </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>

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

图片 8

 

只要感兴趣Bootstrap开发框架序列,可以参考学习下边的小说,感谢您的开卷。

遵照Metronic的Bootstrap开发框架经验总括(10)–优化Bootstrap图标管理

在MVC控制器里面使用dynamic和ExpandoObject,实现数据转义的出口 

依照Metronic的Bootstrap开发框架经验总计(9)–实现Web页面内容的打印预览和保留操作 

 

遵照Metronic的Bootstrap开发框架经验总计(8)–框架效率一体化界面介绍  

 

据悉Metronic的Bootstrap开发框架经验总计(7)–数据的导入、导出及附件的查看处理

 

据悉Metronic的Bootstrap开发框架经验总结(6)–对话框及指示框的处理和优化 

 

据悉Metronic的Bootstrap开发框架经验统计(5)–Bootstrap文件上传插件File
Input的施用

 

基于Metronic的Bootstrap开发框架经验总括(4)–Bootstrap图标的提取和采用 

 

按照Metronic的Bootstrap开发框架经验总计(3)–下拉列表Select2插件的拔取 

 

依据Metronic的Bootstrap开发框架经验总计(2)–列表分页处理和插件JSTree的行使 

 

按照Metronic的Bootstrap开发框架经验统计(1)-框架总览及菜单模块的拍卖 

相关文章