框架集frameset实现主题自动选定更新

pengx 2009-07-28

展开全文

一般的后台管理系统，喜欢使用左右分栏的布局，这样左侧可以使用树形菜单（或者其他形式的菜单），链接到右侧，只刷新右侧，避免的刷新整体等带来的问题。如图所示： (我做的一个城建档案馆的demo)

框架页代码如下：
<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)"：

2通过选择top.html的droplist的主题选项，更改整体的风格，这就涉及到框架间传递与刷新的问题。（前提是针对页面写好了多套css，页面的class和id引用名称固定，只要更换不同的css就可以更换页面所有标签的风格）

实现：每个页面的css链接加入id属性，方便动态修改时查找

top.html页面：

本身的链接css可以通过判断所选的主题index,动态修改linkcss.href属性；

对于其他页面，则要涉及框架父子页面的刷新了，可以看看相关帖子。

我的代码（例如在top.html控制menu页面的css）：parent.frames("leftFrame").document.getElementById("linkcss").href="../css/menu.css";

其他页面类同，这样就可以通过选择主题实现了整个网站主题更换的效果了。simple!