ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

时间:2023-02-22 17:55:46

目录

  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、服务器端排序

上一节已经添加好了菜单特效,这一节,我们来添加面板的折叠和展开功能,效果图如下:

ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

思路:我在Right视图中添加了一个div,在这个div中存放一张图片,通过对这张图片的点击,来控制Left视图的隐藏和显示。说白了,这里其实就是修改主框架Index视图中frameset的 cols属性。

开始操作

1、修改Right视图,在右侧添加一个div,设置float:left;,里面存放一个图片按钮,作为面板折叠和展开的开关。添加一个juqery方法,调用父框架Index视图中的方法hideShowFrame,修改Index视图中frameset的 cols属性,从而控制界面的展示。

@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<style type="text/css">
html, body
{
margin: 0px;
font-family: Arial, Sans-Serif; /*font-size: 62.5%;*/
font-size: 12px;
height: %;
padding: 2px 4px 4px 0px;
overflow: hidden;
}
</style>
<style type="text/css">
.sidebar
{
width: 5px;
height: 500px;
}
.sidebar .btn
{
width: 5px;
height: 39px;
background: url(/images/sidebar-on.gif);
margin-top: 200px;
} .sidebar .btn:hover
{
background-position: -39px;
} .fleft
{
float: left;
}
</style>
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("#divFolding").click(
function () { self.parent.hideShowFrame(); }
);
});
</script> </head>
<body>
<div class="sidebar fleft">
<div class="btn" id="divFolding"></div>
</div>
<div class="rightcont">
hello,world
</div>
</body>
</html>

2、修改Index视图,添加如下js:

    //折叠展开面板
function hideShowFrame() {
if (document.getElementById("middenFram").cols == "193,*") {
document.getElementById("middenFram").cols = "0,*";
}
else {
document.getElementById("middenFram").cols = "193,*"
}
}

我们看下Index视图的主体部分:

<frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*顶部发104px,底部30px,中间部分自适应*@
<frame src="Home/Top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="193,*" frameborder="no" border="0" framespacing="0" id="middenFram">@*左侧193px,右侧自适应*@
<frame src="Home/Left" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/>
<frame src="Home/Right" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<frame src="/Content/Bootom.html" name="topFrame" scrolling="No" noresize="noresize" id="bootomFrame" title="topFrame" />
</frameset>

3、F5运行,看效果。

框架中用到的js和css:CssJsImg源码

ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开的更多相关文章

  1. ASP&period;NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  2. ASP&period;NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

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

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. ASP&period;NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. ASP&period;NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. ASP&period;NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. ASP&period;NET MVC搭建项目后台UI框架—7、统计报表

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  8. ASP&period;NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP&period;NET MVC搭建项目后台UI框架—9、服务器端排序

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

随机推荐

  1. npm上传自己的项目

    npm安装就不介绍了,自行度娘.本文介绍npm上传 先初始化:npm init 根据提示填完系统介绍信息(package.json): 再登录npmjs: npm login 效果如图: 输入注册的用 ...

  2. mysql服务器监控参数总结

    1)主机健康监控:网络通信.软硬件错误.磁盘空间.内存使用 2)mysql健康监控: 服务端口(telnet尝试连接).mysqld和mysqld_safe进程.errorlog和复制状态 3)主机性 ...

  3. coffeeScript中类的多态[学习篇]

    类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.[引自coffeescript深入浅出] class Shape constructor ...

  4. XF 文档 - Element Framework Doc

    配置篇 Chapter Configuration Schema篇 Chapter Schema 查询篇 Chapter Querying Data 数据更改及验证篇 Chapter Data Mod ...

  5. AIX 文件 打包 与 压缩 tar gzip compress 的使用

    今天在Aix用tar -cvf 备份,打成tar包,占有硬盘空间过大,没有压缩比, 尝试使用tar -zcvf  linux系统下可以用-z 命令 (z 用gzip来压缩/解压缩文件,加上该选项后可以 ...

  6. SQL Server代理&lpar;12&sol;12&rpar;:多服务器管理

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这一系列的上一篇,我们查看了维护计划,一 ...

  7. 查看mysql版本的四种方法

    1:在终端下:mysql -V. 以下是代码片段: [shengting@login ~]$ mysql -V mysql Ver 14.7 Distrib 4.1.10a, for redhat-l ...

  8. 类型与通用语言运行时:System&period;Object

    CLR 要求每个类型最终都要继承自 System.Object 类型 //隐式继承 Object class Employee { ... } //显示继承继承 Object class Employ ...

  9. 浅谈Maven

    最近的有用到Maven 所以就大概跟大家谈一下Maven 1什么是Maven? Maven我个人的理解就是项目架包管理 通俗易懂的来说就是管理配置你项目中的所有jar包的 废话不多说 Maven去ht ...

  10. jenkins-参数化构建&lpar;二&rpar;插件:Extended Choice Parameter

    一.Extended Choice Parameter插件 这个插件相对丰富,安装过程就不过多介绍了,在点击项目设置后会出现下载的插件名字. 写在文件中构建时效果如下: