學技術這件事兒本來就是學習現有的東西，然后變成自己的，本文當然也是借鑒的別人的東西，寫出來作為一個對知識的鞏固。
1.網站用的是MVC模式，新建一個MVC項目，建立一個APP1Controller,作為頁面的控制器，首頁采用的是傳統的frameset布局，沒有用到前段的UI框架，項目架構示意圖：
后台控制器中目前是這樣的一個結構：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace App1.Controllers { public class App1Controller : Controller { // // GET: /App1/ public ActionResult Index() { ViewBag.Message = "Welcome!"; return View(); } public ActionResult Top() { ViewBag.UserName = "超級管理員"; ViewBag.AvailableBalance = "1000"; return View(); } public ActionResult Left() { return View(); } public ActionResult Right() { return View(); } } }
下面是前台的View頁面：
首先附一張效果圖：
1）Index.cshtml：
@{ ViewBag.Title = ""; Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8" /> <title>Index</title> </head> <frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*頂部寬104px，底部30px，中間部分自適應*@ <frame src="App1/Top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frameset cols="193,*" frameborder="no" border="0" framespacing="0" id="middenFram">@*左側193px，右側自適應*@ <frame src="App1/Left" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/> <frame src="App1/Right" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset> <frame src="/Content/Bootom.html" name="topFrame" scrolling="No" noresize="noresize" id="bootomFrame" title="topFrame" /> </frameset> <noframes> <body></body> </noframes> </html>
說明：這里frameset的布局方式算是比較老的一種方式了，因為沒有用到UI框架所以此處不做過多的追究，大體就是一個Top/Left/Right/Bottom的經典布局模式。
2）Top.cshtml:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Top</title> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8" /> <link href="~/Content/sharestyle.css" rel="stylesheet" /> <style type="text/css"> .hightCss { color: yellow; } body { margin: 0px; padding: 0px; } </style> <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("background-color", ""); $(".nav_list ul li a").css("color", "#ceebff"); $(this).css("background-color", "#66d354"); $(this).css("color", "white"); }); }); </script> </head> <body> <div class="index_header"> <div class="index_headertop"> <div class="index_logo"> <a href="#"> <img src="/Images/icon_11.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="#" onclick="showLeftList('divOrder')">業務管理</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" onclick="showLeftList('divFinancial')"><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="#" onclick="showLeftList('divSysManage')">系統管理</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>
這里對應着效果圖看一下，基本上就是點擊Top頁上面的標題，然后再Left頁顯示對應的下面的div里的內容（當前設置為不不顯示了），點擊事件是通過js代碼實現的showLeftList方法，該方法里面有一個參數divId,然后通過 self.parent.frames["leftFrame"].showDivMenu(divId)來實現很顯然是在Left頁面中實現showDivMenu方法。
3）Left.cshtml:
@{ Layout = null; } <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <link href="~/Content/sharestyle.css" rel="stylesheet" /> <link href="~/Content/main.css" rel="stylesheet" /> <style type="text/css"> body { margin: 0px; padding: 0px; } </style> <script src="~/Scripts/jquery-1.8.3.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> </head> <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> </html>
本頁面實現了Top頁面中點擊標題顯示制定內容的功能，此外還有子標題的顯示是通過ShowMenuList方法實現，參數為要顯示的字標題列表的ul的ID屬性。
4）Right.cshtml:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8" /> <style type="text/css"> html, body { margin: 0px; font-family: Arial, sans-serif; font-size: 12px; height: 100%; padding: 2px 4px 4px 0px; overflow: hidden; } </style> <title>Right</title> </head> <body> <div class="rightcont"> Hello,World! </div> </body> </html>
這里面可以顯示網站的主要內容了。
最后附錄一下本網站需要用到的Js文件和Css樣式文件下載鏈接：下載
下一節將實現一些面板的展開隱藏和Tab頁效果。