溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在常規的后臺管理系統或者前端界面中，一般都有一個導航菜單提供給用戶，方便選擇所需的內容。基于Metronic的Bootstrap開發框架，是整合了Metroinc樣式，以及Boostrap組件模塊的內容，因此菜單的效果自然也是和Bootstrap一脈相承的。基于經常使用的幾種菜單樣式，本文進行了相關的介紹和展示。
菜單的展示可以做成各種各樣的效果，本文只是針對性的介紹其中的三種，兩種左側豎放的菜單，一種是水平橫放的菜單。
樣式1：
菜單收縮后界面如下所示。
樣式2：
樣式3：
水平樣式的菜單如下所示：
由于這幾種布局方式，它們的框架布局頁面（也就是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>
我們所需要做的就是把我們數據庫里面的菜單數據，動態構建這種遞進式的數據結構即可。
主要研究技術： 代碼生成工具、會員管理系統、客戶關系管理軟件、病人資料管理軟件、Visio二次開發、酒店管理系統、倉庫管理系統等共享軟件開發。 專注于Winform開發框架/混合式開發框架、Web開發框架、Bootstrap開發框架、微信門戶開發框架的研究及應用。 撰寫人：伍華聰 http://www.iqidi.com |
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
