框架頁代碼如下:
<frameset rows="59,*" frameborder="no" border="0" framespacing="0">
<frame src="top.html" noresize="noresize" frameborder="0" name="topFrame" marginwidth="0" marginheight="0" scrolling="no">
<frameset rows="*" cols="168,15,*" id="frame">
<frame src="menu.aspx" name="leftFrame" noresize="noresize" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto">
<frame src="arrow.html" name="arrow" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
<frame src="tab.html"name="mainFrame" id="mainFrame" title="mainFrame" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes">
</frameset><noframes>
<body></body>
</noframes>
</frameset>
主要實現(xiàn):1樹形菜單側(cè)欄可以自動伸縮,靠button按鈕click事件設(shè)置父框架的各分欄寬度onclick="switchBar(this)":
var displayBar=true;
function switchBar(obj){
if (displayBar)
{
parent.frame.cols="0,15,*";
displayBar=false;
obj.title="打開左邊管理菜單";
}
else{
parent.frame.cols="168,15,*";
displayBar=true;
obj.title="關(guān)閉左邊管理菜單";
}
}
2通過選擇top.html的droplist的主題選項,更改整體的風(fēng)格,這就涉及到框架間傳遞與刷新的問題。(前提是針對頁面寫好了多套css,頁面的class和id引用名稱固定,只要更換不同的css就可以更換頁面所有標(biāo)簽的風(fēng)格)
實現(xiàn):每個頁面的css鏈接加入id屬性,方便動態(tài)修改時查找
<link id="linkcss" href="../css/menu1.css" rel="stylesheet" type="text/css" />
top.html頁面:
本身的鏈接css可以通過判斷所選的主題index,動態(tài)修改linkcss.href屬性;
對于其他頁面,則要涉及框架父子頁面的刷新了,可以看看相關(guān)帖子。
我的代碼(例如在top.html控制menu頁面的css):parent.frames("leftFrame").document.getElementById("linkcss").href="../css/menu.css";
其他頁面類同,這樣就可以通過選擇主題實現(xiàn)了整個網(wǎng)站主題更換的效果了。simple!