經(jīng)常看到別人做的框架頁(yè)可以收縮，自己也想做一個(gè)。偷偷研究了一下，發(fā)現(xiàn)并不神秘。嘿嘿。不敢獨(dú)享跟我一樣的菜鳥(niǎo)可以偷學(xué)兩招。嘿嘿?；镜男Ч梢钥聪聢D：
仔細(xì)觀察下面的頁(yè)面，大多數(shù)人會(huì)回答是一個(gè)左右分的框架。呵呵。不然，其實(shí)他是左中右三分的框架頁(yè)。只不過(guò)中間的框架頁(yè)寬度非常之小而已。 查看源碼可以知道主框架源碼如下：
<frameset rows="*" cols="156,8,*" frameborder="0" border="0" id="frame" >
<frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" />
<frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" />
<frameset rows="80,*" frameborder="no" border="0" >
<frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" />
<frame src="login.html" name="mainFrame" frameborder="0" />
</frameset>
</frameset>
<noframes><body>對(duì)不起,您的瀏覽器版本不支持框架技術(shù).</body></noframes>
它將框架分為左中右三分的。中間的框架頁(yè)寬度只有8.左邊設(shè)置了156。右邊為剩余大小。關(guān)鍵的部分還是在中間的頁(yè)面。注意frameset的id叫frame.下面會(huì)用到。所有的動(dòng)態(tài)改變框架的代碼全部隱藏在中間的頁(yè)面中。代碼如下：
<script>
var displayBar=true;
function switchBar(obj) ...{
if (displayBar)...{
parent.frame.cols="0,8,*";
displayBar=false;
obj.src="image/center_open.gif";
obj.title="打開(kāi)左邊管理菜單";
}else...{
parent.frame.cols="156,8,*";
displayBar=true;
obj.src="image/center_close.gif";
obj.title="關(guān)閉左邊管理菜單";
}
}
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="image/center_bg.gif">
<tr>
<td valign="center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<img src="image/center_close.gif" style="cursor:hand" title="關(guān)閉左邊管理菜單" onClick="switchBar(this)"></td>
</tr>
</table> 好了，好的東西要大家一起分享。
