目录
上一节已经添加好了菜单特效，这一节，我们来添加面板的折叠和展开功能，效果图如下：
思路：我在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源码
时间： 2024-08-07 21:19:49