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窗口代码前加入
Enjoy!
//文章结束
在线效果预览
在线预览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指定所有的窗口不会跨越的页面顶部空间高度,可设置为您需要的值。<script src="js/lib.js" type="text/javascript"></script>
<script type="text/javascript">
topMarginHeight = 50
</script>
Enjoy!
//文章结束