ASP.NET MVC搭建项目后台UI框架—2、菜单特效
2023-09-27 14:21:59 时间
目录
- 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源码
相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（转）
- 使用 ASP.NET Core MVC 创建 Web API（一）
- Exception: 找不到或无法加载已注册的 .Net Framework Data Provider。
- asp.net后台获取路径的各种方法归纳
- MVC的验证(模型注解和非侵入式脚本的结合使用) .Net中初探Redis .net通过代码发送邮件 Log4net (Log for .net) 使用GDI技术创建ASP.NET验证码 Razor模板引擎 （RazorEngine） .Net程序员应该掌握的正则表达式
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02：Web管控平台后台架构 NetCore入门篇：（十一）NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- Asp.Net Core 2.0 项目实战（10） 基于cookie登录授权认证并实现前台会员、后台管理员同时登录
- asp.net小数点四舍五入的方法!
- Asp.net中DateReader读取数据库操作类！
- Asp.net后台类中使用alter弹出窗显示信息（对于后台调试代码超有用！）
- asp,asp.net中关于双引号和单引号的用法!
- asp.net后台cs中的JSON格式变量在前台Js中调用方法！（前后台实例！）
- 前端使用AngularJS的$resource,后端ASP.NET Web API，实现分页、过滤
- 第88节：Java中的Ajax和ASP.NET和TCP/IP 教程和JSON
- 一次asp.net core3.1打造webapi开发框架的实践
- 使用Helm将ASP.NET Core应用程序部署到Kubernetes容器集群
- ASP.NET Web API 通过Authentication特性来实现身份认证
- .Net 读取配置文件 xml
- ASP.NET如何通过后台数据库提供的链接播放视频（不使用外置插件）
- FullCalendar – jQuery Event Calendar in ASP.NET
- asp.net 后台获取flv视频地址进行播放【转】
- 一个窗口里包含一个iframe，点击iframe内的submit按钮，返回的视图总是显示在iframe中，我想要的效果是点击按钮后返回的视图是在浏览器窗口中...?asp.net mvc 的action中，不用js怎么实现??????????
- ASP.NET之通过JS向服务端(后台)发出请求(__doPostBack is undefined)
- 在 .net core 与 .net framework 应用之间共享库
- Hprose Tcp asp.net c# 如何使用
- AWS & ASP.NET
- ASP.NET Web Form（八）