转载

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

开始操作

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: 100%;    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: 0 -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>