ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录
上一节已经添加好了菜单特效,这一节,我们来添加面板的折叠和展开功能,效果图如下:
思路:我在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: 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>
3、F5运行,看效果。
框架中用到的js和css:CssJsImg源码
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。