目录

  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. Spark算子选择策略

    摘要  1.使用reduceByKey/aggregateByKey替代groupByKey 2.使用mapPartitions替代普通map 3.使用foreachPartitions替代forea ...

  2. Sql Server系列：Insert语句

    1 INSERT语法 [ WITH <common_table_expression> [ ,...n ] ] INSERT { [ TOP ( expression ) [ PERCEN ...

  3. 白话贝叶斯理论及在足球比赛结果预测中的应用和C#实现

    离去年“马尔可夫链进行彩票预测”已经一年了,同时我也计划了一个彩票数据框架的搭建,分析和预测的框架,会在今年逐步发表,拟定了一个目录,大家有什么样的意见和和问题,可以看看,留言我会在后面的文章中逐步改 ...

  4. 详解 ML2 Core Plugin（II） - 每天5分钟玩转 OpenStack（72）

    上一节我们讨论了 ML2 Plugin 解决的问题,本节将继续研究 ML2 的架构. ML2 对二层网络进行抽象和建模,引入了 type driver 和 mechansim driver. 这两类 ...

  5. JavaScript变量声明提前

    上周四吃完午饭,leader发了一道JavaScript的题目给我们做,我们Team里面有做前端的,有做后台的,也有做mobile web的,所以大家对题目的理解各自都不一样,然后在QQ讨论组里面进行 ...

  6. CSS之水平垂直居中

    在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...

  7. MySQL学习笔记二：权限管理

    1. 创建和删除用户,mysql中的用户是由用户名和主机名来确定的 create user "user_name@host_name" identified by passwd; ...

  8. scikit-learn 逻辑回归类库使用小结

    之前在逻辑回归原理小结这篇文章中,对逻辑回归的原理做了小结.这里接着对scikit-learn中逻辑回归类库的我的使用经验做一个总结.重点讲述调参中要注意的事项. 1. 概述 在scikit-lear ...

  9. MySQL中RESET SLAVE和RESET MASTER的区别

    RESET SLAVE的语法如下: RESET SLAVE [ALL] [channel_option] channel_option: FOR CHANNEL channel 其中,channel_ ...

  10. 【转】 个人认为，这是最详细的 android------HttpURLConnection 类用法详解。一些教材没讲到的，它讲到了

    站在巨人的肩膀上,渐渐进步. 原文链接:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnection连接Se ...