框架页代码如下:
<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>
主要实现:1树形菜单侧栏可以自动伸缩,靠button按钮click事件设置父框架的各分栏宽度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="关闭左边管理菜单";
}
}
2通过选择top.html的droplist的主题选项,更改整体的风格,这就涉及到框架间传递与刷新的问题。(前提是针对页面写好了多套css,页面的class和id引用名称固定,只要更换不同的css就可以更换页面所有标签的风格)
实现:每个页面的css链接加入id属性,方便动态修改时查找
<link id="linkcss" href="../css/menu1.css" rel="stylesheet" type="text/css" />
top.html页面:
本身的链接css可以通过判断所选的主题index,动态修改linkcss.href属性;
对于其他页面,则要涉及框架父子页面的刷新了,可以看看相关帖子。
我的代码(例如在top.html控制menu页面的css):parent.frames("leftFrame").document.getElementById("linkcss").href="../css/menu.css";
其他页面类同,这样就可以通过选择主题实现了整个网站主题更换的效果了。simple!
联系客服