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(2011) Comments(11) Edit 收藏

 回复 引用   
#1楼2005-06-04 20:30 | 小胡子
从在线预览看,很不错
 回复 引用 查看   
#2楼2005-06-04 21:39 | 吕震宇      
不错,很吸引人
 回复 引用   
#3楼2005-06-05 09:52 | 喜欢雨
感觉很不错啊!!
 回复 引用   
#4楼2005-06-05 10:46 | 无常
能像MSNspace那样保存状态就更完美了
 回复 引用 查看   
#5楼[楼主]2005-06-05 16:06 | Teddy's Knowledge Base      
今天又改正了窗口最大化后滚动条不能显示的错误,并添加了一个新在预览程序:《读者》10年珍藏版在线随机阅读
 回复 引用 查看   
#6楼2005-06-06 09:57 | 雨玲珑      
滚动还是有点问题
 回复 引用 查看   
#7楼[楼主]2005-06-06 10:05 | Teddy's Knowledge Base      
to 雨玲珑:
滚动有什么问题呢?能说详一点吗,好让我改~~

不过我确实也发现了如果窗口内内容过多的话最下面一行内容有时显示不出来,我看看是怎么回事~~

 回复 引用   
#8楼2005-07-12 22:45 | sonnicy[未注册用户]
比较不错,希望我们能够交个朋友
MSN:sonnicy@msn.com

 回复 引用   
#9楼2006-09-05 11:53 | 李永波 [未注册用户]
我下在了 很好
谢谢

 回复 引用   
#10楼2007-12-10 10:50 | 路过[未注册用户]
窗口拖动后,会变成多个MDI窗口了,而且无法消失。
 回复 引用 查看   
#11楼2008-01-30 01:16 | 龙儿      
能不能改成像126邮箱一样的MDI窗体模式,子窗体间可以自由切换,那样会更实用