ASP.NET MVC搭建項目後臺UI框架—二、菜單特效

時間  2019-11-25
標籤 asp.net asp mvc 搭建 項目 後臺 框架 菜單 特效 欄目 ASP 简体版
原文   原文鏈接

目錄

  1. ASP.NET MVC搭建項目後臺UI框架—一、後臺主框架
  2. ASP.NET MVC搭建項目後臺UI框架—二、菜單特效
  3. ASP.NET MVC搭建項目後臺UI框架—三、面板摺疊和展開
  4. ASP.NET MVC搭建項目後臺UI框架—四、tab多頁籤支持
  5. ASP.NET MVC搭建項目後臺UI框架—五、Demo演示Controller和View的交互
  6. ASP.NET MVC搭建項目後臺UI框架—六、客戶管理（添加、修改、查詢、分頁）
  7. ASP.NET MVC搭建項目後臺UI框架—七、統計報表
  8. ASP.NET MVC搭建項目後臺UI框架—八、將View中選擇的數據行中的部分數據傳入到Controller中
  9. ASP.NET MVC搭建項目後臺UI框架—九、服務器端排序

上一篇，已經把整個項目的框框給搭建好了，可是尚未任何js效果實現。這一節，我就來講下關於菜單的特效實現。我須要的效果以下：javascript

需求總結：css

  • 點擊頂部菜單模塊，左側顯示不一樣模塊下面的菜單列表
  • 點擊左側菜單選項，展開下面的子菜單，並摺疊其它菜單模塊，菜單圖標摺疊顯示爲+，展開顯示爲-。

一、先看下Top視圖中代碼：html

@{
    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>&nbsp;&nbsp;&nbsp;
      <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>
View Code

二、在Top視圖的head中添加以下js：java

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

三、在Top視圖中，菜單項添加js方法showLeftList，這個方法中傳入了一個參數，這個參數就是Left視圖中菜單層的id。jquery

 <li><a href="#" onclick="showLeftList('divOrder')">業務管理</a>
 <li class="slctd"><a href="#" onclick="showLeftList('divFinancial')">財務管理</a>
 <li><a href="#" onclick="showLeftList('divSysManage')">系統管理</a>

四、查看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

五、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運行看下效果。ide

框架中用到的js和css：CssJsImg源碼post

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程