基於Metronic的Bootstrap開發框架經驗總結（11）--頁面菜單的幾種呈現方式

時間 2019-11-17

標籤基於 metronic bootstrap 開發框架經驗總結頁面菜單幾種呈現方式欄目 Bootstarp 简体版

原文原文鏈接

在常規的後臺管理系統或者前端界面中，通常都有一個導航菜單提供給用戶，方便選擇所需的內容。基於Metronic的Bootstrap開發框架，是整合了Metroinc樣式，以及Boostrap組件模塊的內容，所以菜單的效果天然也是和Bootstrap一脈相承的。基於常用的幾種菜單樣式，本文進行了相關的介紹和展現。javascript

一、菜單展現的三種方式

菜單的展現能夠作成各類各樣的效果，本文只是針對性的介紹其中的三種，兩種左側豎放的菜單，一種是水平橫放的菜單。css

樣式1：html

菜單收縮後界面以下所示。前端

樣式2：java

樣式3：數據庫

水平樣式的菜單以下所示：bootstrap

二、幾種佈局的組織方式

因爲這幾種佈局方式，它們的框架佈局頁面（也就是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
    }

三、菜單的動態生成

爲了實現菜單動態的生成，咱們須要瞭解這幾種方式的菜單結構，而後咱們根據它們的特色進行數據結構的生成便可。

第一第二種佈局方式的菜單結構數據是同樣的，它們的內容以下所示。

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