目录

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

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

思路：我在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.NET MVC搭建项目后台UI框架—1、后台主框架

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

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

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

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

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

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

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

  5. 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 ...

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

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

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

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

  8. ASP.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.NET MVC搭建项目后台UI框架—9、服务器端排序

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

随机推荐

  1. Pointer's NULL And 0

    问题起源 在使用Qt框架的时候, 经常发现一些构造函数 *parent = 0 这样的代码. 时间长了, 就觉的疑惑了. 一个指针不是等于NULL吗? 这样写, 行得通吗? 自己测试一下就可以了. 测 ...

  2. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  3. Python标准库的threading.Thread类(转自别人的翻译)

    这个类表示在单独的控制线程中运行的活动.有两种方法可以指定这种活动,给构造函数传递回调对象,或者在子类中重写run() 方法.其他方法(除了构造函数)都不应在子类中被重写.换句话说,在子类中只有__i ...

  4. MyBatis参数绑定规则及原理分析

    MyBatis参数的传递有几种不同的方法,本文通过测试用例出发,对其中的方式进行总结和说明,并对其部分源码进行分析. 一.测试用例(环境参考之前博客SSM接口编程一文 http://www.cnblo ...

  5. SQL Server中In-Flight日志究竟是多少

        在SQL Server中,利用日志的WAL来保证关系数据库的持久性,但由于硬盘的特性,不可能使得每生成一条日志,就直接向磁盘写一次,因此日志会被缓存起来,到一定数据量才会写入磁盘.这部分已经生 ...

  6. python学习之day1-基础知识

    1.变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问.在python中,如果要使用一个变量,不需要提前声明,只需要在用的时候,给这个变量赋值即可.pytho ...

  7. [转]PHP的执行流程,PHP扩展加载过程

    原文:http://www.imsiren.com/archives/535 为了以后能开发PHP扩展..就一定要了解PHP的执行顺序..这篇文章就是为C开发PHP扩展做铺垫. web环境 我们假设为 ...

  8. 学用MVC4做网站六后台管理:6.1管理员(续)

    接6.1 首先在~/Areas/Admin/Models文件夹添加管理员模型Administrator.cs using System.ComponentModel.DataAnnotations; ...

  9. HttpUrlConnection发送url请求（后台springmvc）

    1.HttpURLConnection发送url请求 public class JavaRequest { private static final String BASE_URL = "h ...

  10. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...