ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录
- 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 MVC搭建项目后台UI框架—2、菜单特效的更多相关文章
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
随机推荐
- 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...
- jquery中bind()绑定多个事件
bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),da ...
- AngularJs之一
在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用 ...
- JDK下载、安装、配置环境变量笔记
自己总是在下载.安装.配置JDK的环境变量,但是这些需要的专业知识并不难,但有很多细节很重要,总是记不住,而且这些细节一旦出错影响还是很严重的,在网上查到的信息很多都比较零散,而且讲解得也不是很详细, ...
- oracle数据库表的导入导出cmd命令大全
在实际的项目开发中经常会遇到导入导出oracle数据库中的表,以下是常用的一些cmd命令: 一.数据表的导出 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:daoch ...
- Android开发-之SQLite数据库
之前我们讲了如何将数据存储在文件中,那么除了这种方式呢,就是我们常见的大家都知道的将数据存储在数据库当中了. 将数据存储在数据库中的优势: 1)存储在数据库中的数据更加方便操作,比如增.删.改.查等 ...
- MongoDB 搭建副本集
副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的更新由Primary ...
- 弥补学生时代的遗憾~C#注册表情缘
记得当时刚接触C#的时候,喜欢编写各种小软件,而注册表系列和网络系列被当时的我认为大牛的必备技能.直到我研究注册表前一天我都感觉他是那么的高深. 今天正好有空,于是就研究了下注册表系列的操作,也随手封 ...
- jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器
jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求,分别是: 1.前置过滤器 jQuery. ajaxPrefilter 2.请求分发器 jQuery. ajaxTran ...
- C#中使用Redis不同数据结构的内存占有量的疑问和对比测试
最近在大量使用Redis来进行数据统计前的清洗和整理,每天的数据量超5千万+,在开发过程中,数据量小,着重注意业务规则的处理,在上线基本测试后发现了大量的问题,其中之一就是Redis存储数据过多,内存 ...