javascript 可折叠框架
上一篇 /
下一篇 2012-05-24 22:14:54
/ 个人分类：javascript
可折叠框架的实现原理是，在框架的子页面中，用图片表示分隔栏，为该分隔栏绑定onclick事件，如果触发了该事件，则修改主页面frameset的cols或者rows属性，从而达到折叠。
下面是代码，主页面
<html>
<head>
<title>主框架</title>
<meta. http-equiv=content-type content="text/html;charset=gb2312">
</head>
<frameset border="0" framespacing="0" rows="51,*,0,0" frameBorder="0">
<frame. id="daoHangTiao" name="daoHangTiao" src="daoHangTiao.htm" frameBorder="0" noResize scrolling="no">
<frameset border="0" name="main" frameSpacing="1" frameBorder="0" cols="503,*" scrolling="auto">
<frame. id="leftFrame" border="0" name="leftFrame" marginWidth="0" frameSpacing="0" marginHeight="0" src="leftFrame.htm" frameBorder="0" scrolling="no">
<frame. id="right" border="0" name="right" frameSpacing="0" src="rightIndex.htm" frameBorder="0">
</frameset>
</frameset>
</html>
子页面
<html>
<head>
<title>leftFrame</title>
<script. language=javascript>
function changeWin(){
if(parent.main.cols!='0,*' && parent.main.cols!='5,*'){
parent.main.cols='5,*';
ImgArrow.src="bl_1.gif";
}else{
parent.main.cols='503,*';
ImgArrow.src="al_1.gif";
}
}
</script>
<meta. http-equiv=content-type content="text/html;charset=gb2312">
</head>
<body bgColor="#8d989a" leftMargin="0" topMargin="0">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tbody>
<tr>
<td width="100%">
<iframe. id="leftiframe" style="VISIBILITY:inherit;WIDTH:100%;HEIGHT:100%" name="leftiframe" src="leftMain.htm" frameBorder="0">
</iframe>
</td>
<td bgColor="#d0d0c8">
<table id="td1" height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#d7d8da border="0">
<tbody>
<tr>
<td height="96">
<img id=ImgArrow nclick=changeWin() alt="展开/关闭帖子列表" src="al_1.gif" width="5" border="0" name="ImgArrow" style="currsor:hand">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
收藏
举报
TAG:
