目錄
- ASP.NET MVC搭建項目后台UI框架—1、后台主框架
- ASP.NET MVC搭建項目后台UI框架—2、菜單特效
- ASP.NET MVC搭建項目后台UI框架—3、面板折疊和展開
- ASP.NET MVC搭建項目后台UI框架—4、tab多頁簽支持
- ASP.NET MVC搭建項目后台UI框架—5、Demo演示Controller和View的交互
- ASP.NET MVC搭建項目后台UI框架—6、客戶管理（添加、修改、查詢、分頁）
- ASP.NET MVC搭建項目后台UI框架—7、統計報表
- ASP.NET MVC搭建項目后台UI框架—8、將View中選擇的數據行中的部分數據傳入到Controller中
- ASP.NET MVC搭建項目后台UI框架—9、服務器端排序
上一篇，已經把整個項目的框框給搭建好了，但是還沒有任何js效果實現。這一節，我就來說下關於菜單的特效實現。我需要的效果如下：
需求總結：
- 點擊頂部菜單模塊，左側顯示不同模塊下面的菜單列表
- 點擊左側菜單選項，展開下面的子菜單，並折疊其它菜單模塊，菜單圖標折疊顯示為+，展開顯示為-。
1、先看下Top視圖中代碼：
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta charset="utf-8" /> <link href="~/Content/sharestyle.css" rel="stylesheet" /> <style type="text/css"> .hightCss { color: yellow; } body { margin: 0px; padding: 0px; } </style> </head> <body> <div class="index_header"> <div class="index_headertop"> <div class="index_logo"><a href="#"> <img src="/images/index_logo.png"></a></div> <div class="lgstatus"> 歡迎您，@ViewBag.UserName<i><em>20</em></i>可用余額：<span>￥@ViewBag.AvailableBalance</span> <input type="submit" value="在線充值" class="btsty2"> </div> </div> <div class="clear"></div> <div class="index_headerbot"> <div class="nav_list"> <ul> <li><a href="#">業務管理</a> <div class="nav_out" style="display: none;"> <i></i> <p><a href="#">訂單管理</a></p> <p><a href="#">提單管理</a></p> <p><a href="#">身份證管理</a></p> </div> </li> <li class="slctd"><a href="#">財務管理</a> <div class="nav_out" style="display: none;"> <i></i> <p><a href="#">財務流水</a></p> <p><a href="#">提單對賬</a></p> <p><a href="#">運單對賬</a></p> <p><a href="#">異常費用對賬</a></p> <p><a href="#">充值記錄</a></p> </div> </li> <li><a href="#">系統管理</a> <div class="nav_out" style="display: none;"> <i></i> <p><a href="#">基本信息管理</a></p> <p><a href="#">認證管理</a></p> <p><a href="#">修改密碼</a></p> </div> </li> </ul> </div> <div class="fucnbx"><span><a href="#"><i class="ilChannel"></i>運單打印客戶端下載</a></span> <span><a href="#"><i class="i2"></i>API文檔</a></span> <span><a href="#"><i class="i3"></i>退出</a></span> </div> </div> </div> </body> </html>
2、在Top視圖的head中添加如下js：
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//控制Left視圖中菜單模塊的顯示
function showLeftList(divId) {
self.parent.frames["leftFrame"].showDivMenu(divId);
}
//菜單點擊高亮顯示
$(function () {
$(".nav_list ul li a").click(function () {
//$(".nav_list ul li a").css("color", "#ceebff");
//$(this).css("color", "yellow");
$(".nav_list ul li a").css("background-color", "");
$(".nav_list ul li a").css("color", "#ceebff");
$(this).css("background-color", "#66d354");
$(this).css("color", "white");
});
});
</script>
3、在Top視圖中，菜單項添加js方法showLeftList，這個方法中傳入了一個參數，這個參數就是Left視圖中菜單層的id。
<li><a href="#" onclick="showLeftList('divOrder')">業務管理</a> <li class="slctd"><a href="#" onclick="showLeftList('divFinancial')">財務管理</a> <li><a href="#" onclick="showLeftList('divSysManage')">系統管理</a>
4、查看Left視圖代碼，注意id的命名，因為這關系到js的調用：
<body> <div class="leftbar" id="divOrder"> <dl> <dt class="head2" id="dt_ulOrder" onclick='ShowMenuList("ulOrder")'>訂單管理</dt> <ul class="box_n" id="ulOrder"> <li><a href="#">批量新建訂單</a></li> <li><a href="#">手工新建訂單</a></li> <li><a class="nav_sub" href="#">訂單草稿<span>（3）</span></a></li> <li><a href="#">已確認訂單<span>（3）</span></a></li> <li><a href="#">待發貨訂單<span>（3）</span></a></li> <li><a href="#">已發貨訂單<span>（0）</span></a></li> <li><a href="#">訂單回收站<span>（0）</span></a></li> <li><a href="#">退件<span>（0）</span></a></li> <li><a href="#">批量修改訂單</a></li> </ul> </dl> <dl> <dt class="head1" id="dt_ulLading" onclick='ShowMenuList("ulLading")'>提單管理</dt> <ul class="box_n" id="ulLading" style="display:none;" > <li><a href="#">創建托盤</a></li> <li><a href="#">未交貨托盤<span>（6）</span></a></li> <li><a href="#">已交貨托盤</a></li> <li><a href="#">創建交貨單</a></li> <li><a href="#">交貨單列表</a></li> <li><a href="#">待預扣提單<span>（3）</span></a></li> <li><a href="#">已預扣提單</a></li> </ul> </dl> <dl> <dt class="head1" id="dt_ulIdentityCard" onclick='ShowMenuList("ulIdentityCard")'>身份證管理</dt> <ul class="box_n" id="ulIdentityCard" style="display:none;" > <li><a href="#">待驗證身份證<span>（3）</span></a></li> <li><a href="#">無需驗證身份證<span>（3）</span></a></li> <li><a href="#">已驗證身份證<span>（3）</span></a></li> </ul> </dl> </div> <div class="leftbar" id="divSysManage"></div> <div class="leftbar" id="divFinancial"> <dl> <dt id="dt_ulChannel" class="head2" onclick='ShowMenuList("ulChannel")'>渠道費用管理</dt> <ul class="box_n" id="ulChannel"> <li><a href="#" onclick="goNewPage('a.html','渠道分類');">渠道分類</a></li> <li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li> <li><a href="#">分區管理</a></li> <li><a href="#">價格管理</a></li> </ul> </dl> <dl> <dt id="dt_ulFinancial" class="head1" onclick='ShowMenuList("ulFinancial")'>財務管理</dt> <ul class="box_n" id="ulFinancial" style="display: none;"> <li><a href="#">財務流水</a></li> <li><a href="#">提單對賬</a></li> <li><a href="#">運單對賬</a></li> <li><a href="#">異常費用對賬</a></li> <li><a href="#">充值記錄</a></li> </ul> </dl> </div> </body>
5、Left視圖中head部分添加如下js：
<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> //顯示菜單下面的選項 function ShowMenuList(id) { var objectobj = document.getElementById(id); var dtObj = document.getElementById("dt_" + id); if (objectobj.style.display == "none") { objectobj.style.display = ""; dtObj.setAttribute("class", "head2"); //其它菜單折疊 $(dtObj).parent().parent().find("dt").not(dtObj).attr("class", "head1"); //折疊 $(objectobj).parent().parent().find("ul").not(objectobj).css("display", "none"); //隱藏菜單子項 } else { objectobj.style.display = "none"; dtObj.setAttribute("class", "head1"); } } //控制菜單模塊的顯示和隱藏 function showDivMenu(divId) { $("#" + divId).css("visibility", "visible"); $("#" + divId).siblings("div").css("visibility", "hidden"); } $(function () { $(".box_n li a").click(function () { $(".box_n li a").removeClass("nav_sub"); $(this).addClass("nav_sub"); }); }); function goNewPage(url,name) { self.parent.frames["mainFrame"].addTab(url,name); } </script>
至此，菜單特效，我們就已經添加上去了，你可以按F5運行看下效果。
框架中用到的js和css：CssJsImg源碼