ASP.NET MVC搭建專案後臺UI框架—2、選單特效
目錄
上一篇，已經把整個專案的框框給搭建好了，但是還沒有任何js效果實現。這一節，我就來說下關於選單的特效實現。我需要的效果如下：
需求總結：
- 點選頂部選單模組，左側顯示不同模組下面的選單列表
- 點選左側選單選項，展開下面的子選單，並摺疊其它選單模組，選單圖示摺疊顯示為+，展開顯示為-。
1、先看下Top檢視中程式碼：
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title></title>View Code<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>View Code
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執行看下效果。
相關推薦
ASP.NET MVC搭建專案後臺UI框架—2、選單特效
目錄 上一篇，已經把整個專案的框框給搭建好了，但是還沒有任何js效果實現。這一節，我就來說下關於選單的特效實現。我需要的效果如下： 需求總結： 點選頂部選單模組，左側顯示不同模組下面的選單列表 點選左側選單選項，展開下面的子選單，並摺疊其它選單模組，選單圖示摺疊顯示為+，展開顯示為
ASP.NET MVC搭建專案後臺UI框架—1、後臺主框架
目錄 準備做一個新的專案，從網頁設計師手中拿到了html靜態頁面（沒有一行js），但是都一個個零散的介面，我需要做的是： 1、 把這些零散的html介面連線起來 2、 自己編寫js或者jquery實現選單效果 3、 把html頁面整合在我們的MVC Razor檢視中 本想著使用第三方的UI
ASP.NET MVC搭建專案後臺UI框架—6、客戶管理（新增、修改、查詢、分頁）
目錄 接著之前未寫完的繼續，本篇，我將講解在此UI框架中和ASP.NET MVC4進行結合開發。效果如下： 這裡，我將新增和修改用了兩個不同的檢視，當然也可以把新增和修改放到同一個檢視中，但是要寫一些業務邏輯程式碼來區分當前呼叫的是修改還是新增，根據新增和修改的不同，而對介面進行不同的操作。 新
ASP.NET MVC搭建專案後臺UI框架—8、將View中選擇的資料行中的部分資料傳入到Controller中
目錄 現在，有一個需求，我需要將表格中選中行的資料中的一部分傳直接傳到控制器中，然後儲存到另外一張表中。一開始，我就想到在前臺使用ajax構造json資料，然後控制器直接通過list接收。 選中介面中的行，然後點選“批量新增到月結表”，彈出一個對話方塊，這個對話方塊的月份列表為當前選擇資料行中
ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開
目錄 上一節已經新增好了選單特效，這一節，我們來新增面板的摺疊和展開功能，效果圖如下： 思路：我在Right檢視中添加了一個div，在這個div中存放一張圖片，通過對這張圖片的點選，來控制Left檢視的隱藏和顯示。說白了，這裡其實就是修改主框架Index檢視中frameset的 cols屬性。
ASP.NET MVC搭建專案後臺UI框架—7、統計報表
本節，我將通過一個Demo，演示Datatables 和ASP.NET MVC的完美結合，可以這麼說，如果這樣的介面都能做出來，後臺系統90%的介面功能都可以開發出來了。 用jquery Datatables 來開發確實是件比較蛋疼的事情（和Jquery EasyUI、MiniUI、ExtJs相比），用
ASP.NET MVC搭建專案後臺UI框架—11、自動載入下拉框查詢
需求：在查詢記錄的時候，輸入第一個字，就自動把以這個字開頭的相關記錄查找出來，輸入2個字就過濾以這兩個子開頭的記錄，依次類推。 突然要用到這個功能了，印象中曾經寫過這個功能的文章，一下子找不到了，只好重新貼出來備忘。最近部落格快2個月沒更新了，因為這兩個月一直在閉門寫書。 <link
ASP.NET MVC搭建專案後臺UI框架—9、伺服器端排序
關於jquery datables的在伺服器端的排序，在網上貌似沒有看到.NET的例子，說實話，之前我也迷惑過，習慣了直接從網上找現成的東西，經過一翻搜尋，沒找到，於是乎，自己除錯唄，調了前臺，調後臺，還真被我看出了規律。事實上datables是支援多列排序的，但是本例，我只寫了單列排序。 在控制器
ASP.NET MVC搭建專案後臺UI框架—5、Demo演示Controller和View的互動
目錄 這一節，我將用一個Demo來演示在此UI框架中，控制器和檢視的互動。以渠道管理為例。效果圖如下： 按回車執行查詢，不是F5，筆誤。 這裡我使用了基於jquery的模態窗體元件lhgdialog和表格元件dataTables。dataTables更多資料請參考：http://dt.thxop
ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援
目錄 在點選左側選單中的選項時，我希望有Extjs、EasyUI等中類似的tab頁籤功能，因為這樣可以支援多個頁面的瀏覽，有時候我們可能需要同時開啟多個頁面，如果不使用頁籤，那麼每次要檢視某個頁面都要去重新呼叫並重新整理，如果在網速慢或者該介面載入很耗時的情況下，簡直會讓人奔潰。因為我又不想引入整個Ex
Asp.net MVC 搭建屬於自己的框架（一）
C4D pagedlist del tran 6.0 ext 才有 應該 frame 網址：https://www.cnblogs.com/sggx/p/4555255.html 為什麽要自己搭框架？ 大家夥別急，讓我慢慢地告訴你！大家有沒有這種感覺，從一家跳槽到另一家
ASP.Net MVC OA專案筆記<六>
1.1.1 開始寫業務，先寫業務的實現再寫業務的介面 業務類中也是有寫增刪改查公用的方法 引用Model，IDAL，DALFactory &
使用Visual Studio 2015 開發ASP.NET MVC 5 專案部署到Mono/Jexus
最新的Mono 4.4已經支援執行asp.net mvc5專案，有的同學聽了這句話就興高采烈的拿起Visual Studio 2015建立了一個mvc 5的專案，然後部署到Mono上，瀏覽下發現一堆錯誤出現，心中一萬隻草泥馬奔騰而來，這也叫支援嗎，這個問題是Visual Studio造成的，不相信的話可以使用
ASP.net Mvc SportsSpore專案開發(四）
1.使用模型繫結MVC框架使用了一個叫做“模型繫結”的系統，以便通過HTTP請求來建立一些C#物件，目的是將它們作為引數值傳遞給動作方法。這是MVC 處理表單的方式。例如，框架會考查目標動作方法的引數，用一個模型繫結器來獲取由瀏覽器傳送過來的表單值，並在傳遞給動作方法之前將它
ASP.net Mvc SportsSpore專案開發(二）
1.新增導航控制元件為了使客戶能通過產品分類對其進行導航，需要從三面著手：1）增強Product Controller類中的List動作模型，以使它能夠過濾儲存庫中的Product物件。2）重新檢查並增強URL方案，並且修改路由配置。3) 建立一個產品分類列表，將其放入網
ASP.net Mvc SportsSpore專案開發(五）
1.新增分類管理此次需要實現的是對物品資訊的讀取，新增更新和刪除的操作。這些動作統稱為“CRUD”。建立CRUD控制器，在Controllers檔案下新增控制器AdminControllerusing System; using System.Collections.Gene
[ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action
概括的講，View中的內容可以分為靜態和動態兩部分。靜態內容一般是html元素，而動態內容指的是在應用程式執行的時候動態建立的內容。給View新增動態內容的方式可歸納為下面幾種： Inline code，小的程式碼片段，如 if 和 foreach 語句。 Html hel
ASP.Net MVC 5 in Xamarin Studio 5.2
NuGet 增強功能 Xamarin 3 為Xamarin Studio增加了新增和管理Nuget包支援，現在功能增強了: Framework Retargeting – 當修改專案的.net版本的時候，自動的更新包的.net 版本庫 Automatic Package Update Check
初識ASP.NET MVC窗體驗證與許可權過濾---2.基於角色的訪問控制
上一篇完成了窗體身份驗證並在客戶端儲存了鑑權cookies，系統已經知道我已經登入並獲得了授權。但僅僅知道登入了是不夠的，還要對能夠訪問的區域做出控制。男人不能進女廁所，女人不能進男廁所O(∩_∩)O哈哈~ 這裡就要來扯一扯AOP了，
22、ASP.NET MVC入門到精通——搭建專案框架
前面的章節，說了ASP.NET MVC專案中常用的一些技術和知識點，更多的是理論上面的東西，接下來，我將通過一個簡單的OA專案來應用我們之前涉及到的一些技術，為了兼顧初學者，所以我儘量把操作步驟說得足夠詳細。（本來想用VS2015來演示MVC5開發的，無奈家裡的筆記本是11年2月份的老爺機了，一直未曾捨得