目录

  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. iOS-即时通讯-环信

    下载地址:http://www.easemob.com/downloads SDK目录讲解 1.从官网下载下来的包分为如下四部分: 环信iOS SDK 开发使用 环信iOS release note ...

  2. WPF开发查询加班小工具

    先说一下,我们公司是六点下班,超过7点开始算加班,但是加班的时间是从六点开始计算,以0.5个小时为计数,就是你到了六点半,不算加班半小时,但是加班到七点半,就是加班了一个半小时. 一.打卡记录 首先, ...

  3. 前端学PHP之面向对象系列第二篇——魔术方法

    × 目录 [1]构造方法 [2]析构方法 [3]不可访问属性[4]对象复制[5]字符串[6]对象不存在[7]自动加载类[8]串行化[9]函数调用 前面的话 php在面向对象部分有很多相关的魔术方法,这 ...

  4. Android中Bitmap,byte[],Drawable相互转化

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  5. Android性能优化之UncaughtExceptionHandler定制自己的错误日志系统

    前言: 每当我们app测试的时候,测试人员总是对我们说这里崩溃了,那里挂掉了!我们只能默默接受,然后尝试着重现bug,更可悲的是有时候bug很难复现,为了解决这种现状所以我们要尝试这建立一个自己的bu ...

  6. Cinder 组件详解 - 每天5分钟玩转 OpenStack（47）

    本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户,所有 cinder 的请求都首先由 nova-api 处理.cinder ...

  7. IOS开发之新浪围脖

    IOS开发和Web开发一样,网络请求方式包括Get和Post方式.Get和Post两者有和特点和区别,在本篇博客中不做过多的论述,本篇的重点在于如何GET数据和POST数据.下面还会提到如何在我们的项 ...

  8. Linux内存管理之bootmem分配器

    为什么要使用bootmem分配器,内存管理不是有buddy系统和slab分配器吗?由于在系统初始化的时候需要执行一些内存管理,内存分配的任务,这个时候buddy系统,slab分配器等并没有被初始化好, ...

  9. 把《c++ primer》读薄（4-2 c和c++的数组 和 指针初探）

    督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. 问题1.我们知道,将一个数组赋给另一个数组,就是将一个数组的元素逐个赋值给另一数组的对应元素,相应的,将一个vector 赋给另 ...

  10. C语言 编程练习22题

    一.题目 1.编一个程序,输入x的值,按下列公式计算并输出y值: 2.已知数A与B,由键盘输入AB的值,交换它们的值,并输出. 3.给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位 ...