ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
  6. ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)
  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表
  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
  9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现。这一节,我就来说下关于菜单的特效实现。我需要的效果如下:

ASP.NET MVC搭建项目后台UI框架—2、菜单特效_第1张图片ASP.NET MVC搭建项目后台UI框架—2、菜单特效_第2张图片ASP.NET MVC搭建项目后台UI框架—2、菜单特效_第3张图片ASP.NET MVC搭建项目后台UI框架—2、菜单特效_第4张图片

需求总结:

  • 点击顶部菜单模块,左侧显示不同模块下面的菜单列表
  • 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-。

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>20em>i>可用余额:<span>¥@ViewBag.AvailableBalancespan>   
      <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

2、在Top视图的head中添加如下js:

    
    

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运行看下效果。

框架中用到的js和cssCssJsImg源码

你可能感兴趣的:(ASP.NET MVC搭建项目后台UI框架—2、菜单特效)