自各儿研究可以点击展开和自由改变页面大小的web框架 _Web前端

自己研究可以点击展开和自由改变页面大小的web框架
昨天想做一个web框架，在中间的添加一个分割栏，可以点击隐藏\展开左边页面，也可以自由拉动改变页面大小，效果如猫扑的大杂烩
开始做好了点击按钮可以隐藏展开左边页面，也可以拉动，但自由拉动的时候无法让点击按钮跟着动
今天再研究了哈猫扑的代码，明白了
他是在主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放在下面

1 楼 ranyut 2009-02-13

附隐藏\展开的js实现

 function changeFrame() {
	var img = document.getElementById("imgId");
  	var o_mf = window.parent.document.getElementById("allFrame");
	if(o_mf.cols=='215,*,200'){
		o_mf.cols = '10,*,200';
		img.src="images/arrow_right.gif" ;
	}
	else if(o_mf.cols=='215,*,10'){
		o_mf.cols = '10,*,10';
		img.src="images/arrow_right.gif" ;
	}	
	else if(o_mf.cols=='10,*,10'){
		o_mf.cols = '215,*,10';
		img.src="images/arrow_left.gif" ;
	}
	else{
		o_mf.cols = '215,*,200';
		img.src="images/arrow_left.gif" ;
	}
 }
 function changeTopFrame(){
 	var img = document.getElementById("imgId");
 	var o_mf = window.parent.document.getElementById("headFrame");
 	var m_mf = window.parent.parent.document.getElementById("maxFrame");
 	
 	if(o_mf.rows=='82,8'){
 		o_mf.rows='0,8';
 		if(m_mf.rows='23,90,*,0'){
 			m_mf.rows='23,8,*,0' ;
 			img.src="images/arrow_down.gif" ;
 		} 
 	}
 	else if(o_mf.rows=='0,8'){
 		o_mf.rows='82,8' ;
 		if(m_mf.rows='23,8,*,0'){
 			m_mf.rows='23,90,*,0' ;
 			img.src= "images/arrow_up.gif" ;
 		}
 	}
 }
 function changeRightFrame() {
	var img = document.getElementById("imgsId");
  	var o_mf = window.parent.document.getElementById("allFrame");
	if(o_mf.cols=='215,*,200'){
		o_mf.cols = '215,*,10';
		img.src="images/arrow_left.gif" ;
	}
	else if(o_mf.cols=='215,*,10'){
		o_mf.cols = '215,*,200';
		img.src="images/arrow_right.gif" ;
	}	
	else if(o_mf.cols=='10,*,10'){
		o_mf.cols = '10,*,200';
		img.src="images/arrow_right.gif" ;
	}
	else{
		o_mf.cols = '10,*,10';
		img.src="images/arrow_left.gif" ;
	}
 }

2 楼 svygh123 2012-06-29

请问有源码吗?