浏览 2770 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-13
最后修改：2009-02-13
昨天想做一个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放在下面 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：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" ;
}
}
|
| 返回顶楼 | |
