ASP.NET MVC搭建项目后台UI框架—2、菜单特效
2015-05-17 08:14
821 查看
目录
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效果实现。这一节,我就来说下关于菜单的特效实现。我需要的效果如下:
<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和css:CssJsImg源码
相关文章推荐
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
- ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
- ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
- 搭建你的Spring.Net+Nhibernate+Asp.Net Mvc 框架 (二)创建你的项目
- 搭建你的Spring.Net+Nhibernate+Asp.Net Mvc 框架 (二)创建你的项目
- asp.net -mvc框架复习(7)-基于MVC搭建用户登录项目框架
- asp.net mvc 简单项目框架的搭建过程(一)对Bll层和Dal层进行充分解耦
- ASP.NET MVC4 WEB API入门 第二篇:ASP.NET MVC入门基础(1)——项目框架搭建
- 22、ASP.NET MVC入门到精通——搭建项目框架
- ASP.NET MVC入门到精通——搭建项目框架
- asp.net mvc 简单项目框架的搭建(二)—— Spring.Net在Mvc中的简单应用
- ASP.NET MVC企业级项目框架搭建实战
- asp.net -mvc框架复习(10)-基于三层架构与MVC搭建项目框架
- 【搭建Spring.net+EF+Asp.net MVC框架】---(1) 创建项目
- 搭建了一个多项目、插件化的ASP.net MVC开发框架
- 主攻ASP.NET.4.5.1 MVC5.0之重生:空地搭建一个包含 Ninject框架 项目