目录

  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. Hystrix框架1--入门

    介绍 在开发应用中或多或少会依赖各种外界的服务,利用各个服务来完成自己的业务需求,现在流行的微服务架构更是离不开各个服务之间的调用,这就导致整体应用的可用性依赖于各个依赖服务的可用性. 比如一个依赖3 ...

  2. SQL Server 堆表行存储大小（Record Size）

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 堆表行记录存储格式(Heap) 案例分析(Case) 参考文献(References) 二.背 ...

  3. SmtpClient发邮件时为什么用MailMessage.From而不用MailMessage.Sender

    今天在看C#高级编程(第9版)的时候,在768页看到这样的一段代码 SmtpClient sc = new SmtpClient(); sc.Host = "邮箱服务器地址"; M ...

  4. PHP新的垃圾回收机制:Zend GC详解

    概述 在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果re ...

  5. Codeforces Round #323 (Div. 2) C.GCD Table

    C. GCD Table The GCD table G of size n × n for an array of positive integers a of length n is define ...

  6. 编写atoi库函数

    看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...

  7. 如何用Perl对Excel的数据进行提取并分析

    巡检类工作经常会出具日报,最近在原有日报的基础上又新增了一个表的数据量统计日报,主要是针对数据库中使用较频繁,数据量又较大的31张表.该日报有两个sheet组成,第一个sheet是数据填写,第二个sh ...

  8. golang中的类和接口的使用

    类使用:实现一个people中有一个sayhi的方法调用功能,代码如下: type People struct { //.. } func (p *People) SayHi() { fmt.Prin ...

  9. 浅谈2D游戏设计模式--游戏剧情设计（1）

    博主不才,人生有2大爱好,写程序和玩游戏,本人玩的又是一款2D的在旁人看来弱智的网络游戏. 这款游戏在中国的名称叫做冒险岛,不知道园子里有没有人玩过. 我打算有空的话,就把我玩游戏中的心得和程序结合起 ...

  10. TreeView控件使用

    treeView1.SelectedNode = treeView1.Nodes[0];  //选中当前treeview控件的根节点为当前节点添加子节点:  TreeNode tmp; tmp = n ...