Teddy改进的网页MDI窗口效果

即使您没有任何Javascript基础也能轻松应用于您自己的网页的MDI窗口,所有页面中的窗口可以任意拖动、缩放、最大化、最小化、关闭,并可以通过双击窗口标题来最大化、取消最大化窗口,自动显示滚动条,兼容IE、Firefox、Mozilla浏览器,基于dhtmlcentral修改,改进了部分错误并简化了调用方式。

在线效果预览

在线预览2:《读者》10年珍藏版在线随机阅读


示例及源码下载

使用方法

1、首先,请保证所有MDI窗口在页面的最底部,否则可能窗口最小化和最大化时会覆盖其他内容;

2、源码中的Window Template.txt文件内包含了一个MDI窗口的代码模版,如果,您的页面只需包含一个MDI窗口,则只需复制该文件中的代码到你的页面,如果,需要多个MDI窗口,只需,将该文件内的代码中所有的数字"0"替换为1、2、3等,再将代码添加到您的网页,注意,窗口数字索引从0开始,窗口索引必须连续不能间断,程序会根据窗口数量自动调整窗口的初始大小和排列位置;

3、修改MDI窗口的#Title#和#Content#为您需要的任意HTML内容;

4、设置页面body元素的onload="winit(num)",其中,num必须是该页面中包含的MDI窗口数目;

5、复制源码中的js、css和images目录到您的网页的同一目录;

6、在您的网页中所有MDI窗口代码前加入
<link href="css/styles.css" rel="Stylesheet" type="text/css" />
<script src="js/lib.js" type="text/javascript"></script>
<script type="text/javascript">
 topMarginHeight = 50
</script>
其中,topMarginHeight指定所有的窗口不会跨越的页面顶部空间高度,可设置为您需要的值。

Enjoy!

//文章结束
posted @ 2005-06-04 19:04  Teddy's Knowledge Base  Views(2619)  Comments(11Edit  收藏  举报