昨天想做一个web框架,在中间的添加一个分割栏,可以点击隐藏\展开左边页面,也可以自由拉动改变页面大小,效果如猫扑的大杂烩
开始做好了点击按钮可以隐藏展开左边页面,也可以拉动,但自由拉动的时候无法让点击按钮跟着动
今天再研究了哈猫扑的代码,明白了
他是在主frame中再嵌套iframe
我的主框架如下:
left_bar代码如下:
就可以搞定了,右边跟左边是一样的道理,只不过是把iframe放在下面
开始做好了点击按钮可以隐藏展开左边页面,也可以拉动,但自由拉动的时候无法让点击按钮跟着动
今天再研究了哈猫扑的代码,明白了
他是在主frame中再嵌套iframe
我的主框架如下:
<frameset id="allFrame" rows="*" cols="215,*,200" framespacing="2" frameborder="no" border="0" >
<frame src="<%=request.getContextPath()%>/pages/frame/left_bar.jsf" name="leftBarFrame" scrolling="no" id="leftBarFrame"/>
<frame src="<%=request.getContextPath()%>/pages/frame/ctx.jsf" name="mainFrame" id="mainFrame" />
<frame src="<%=request.getContextPath()%>/pages/frame/right_bar.jsf" name="rightBarFrame" scrolling="no" id="rightBarFrame"/>
</frameset>
left_bar代码如下:
<body>
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="100%">
<IFRAME style="VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
name='leftiframe' id='leftiframe' src="left.jsf" frameBorder=0 scrolling="auto"></IFRAME>
</td>
<td>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%"
border=0 id="td1">
<TBODY>
<TR>
<td height='50%' title="拖动以调整宽度" class="bg-lr-line" ></td>
</TR>
<TR>
<TD height="100%" class="bg-lr-line" onclick="changeFrame();"
onMouseOver="this.style.cursor='pointer'" id="ImgArrow" width=8 >
<img id="imgId" alt="展开\隐藏左边栏" src="images/arrow_left.gif">
</TD>
</TR>
<TR>
<td height='50%' title="拖动以调整宽度" class="bg-lr-line" ></td>
</TR>
</TBODY>
</TABLE>
</td>
</tr>
</table>
就可以搞定了,右边跟左边是一样的道理,只不过是把iframe放在下面