1.下载和安装
下载winlike，大家可以到：http://www.winlike.net/ 上去下载，打开网页看到的是就是作者使用winlike来创建的网站，大家可以看到在一个页面上就可以开不同的窗口，而且还可以互相的移动和切换，这和我们平常使用的应用程序就是非常的相识了。找到左边的winlie->download后就可以在打开的窗口中选择下载了。目前最新的版本是1.5.03，非常小，包括很多的例子程序在一起才0.6M，而调用它的JS也才不到30K，所以是非常适合我们使用的。
下载完毕后，我们将压缩包WinLIKE_1.5.03.zip解压缩到本地目录，然后就可以看到目录下有：samples、skins、winlike三个文件夹和很多以数字开头的html文件（比如00_index.html)，我来做个简单的说明：
samples：看名称就知道了，是例子。即winlike各属性和方法使用的例子网页汇总；
skins：这个就是窗口的皮肤文件了，下载包里也包含了几个，更多的我们可以从其网站上进行下载；
winlike：这个包就是主要是js和相关文件的包了。我们最重要使用的就是其目录下的winman包了；
其他html文件：这就是所有的文件汇总了，我们可以通过打开00_index.html文件来进行查看。
在00_WinLIKE.html文件中，我们可以通过它自带的来创建和使用winlike。需要说明的是，压缩包里并没有提供js的源码，都是经过处理之后的js代码，不过这也不要紧，关键的是它有很丰富的api和属性供我们参考和使用。
2.简单使用
我们可以通过新建一个窗口来看看它的效果，打开目录下的00_WinLIKE.html这个文件，然后选择左边的NEW菜单（这个也是窗口弄出来的哦~~），然后就会出现两个窗口，一个是空白的窗口，另外一个就是这个窗口的属性编辑窗口了。比如可以输入title（标题，就是显示在窗口上的文字）、skin（选择窗口的皮肤，就是skins目录下的文件夹名称）、content（窗口的内容，可以用网址来代替）、name（就是这个窗口的名称，这个窗口的名称我们在使用a标签的时候可以指定target为其名称来使打开的网页就出现在该窗口中），然后下面的属性就是可见与否、移动和最大最小化等等属性了，这个我们下面在详细说。
比如我们输入title为：你好，content为：http://www.sohu.com ，name为sohu，然后其他的都默认，然后再点击set按钮，我们就可以看到刚才那个新窗口中打开了SOHU的首页了，呵呵。然后我们再打开左边的SAVE按钮，我们就可以看到创建这个窗口的源代码了，可以看到代码如下：
<!-- WinLIKE (c) 1998-2007 by CEITON technologies GmbH - www.winlike.net -->
<!-- Change this source for older browsers! --><SCRIPT>WinLIKEerrorpage='winlike/winman/hlp-error.html';</SCRIPT>
<SCRIPT SRC="winlike/winman/wininit.js"></SCRIPT><SCRIPT SRC="winlike/winman/winman.js"></SCRIPT>
<!-- Delete this line, if the editor should not be used anymore. --><SCRIPT SRC="winlike/winedit/winedit.js"></SCRIPT>
<SCRIPT>
WinLIKE.definewindows=mydefs;
function mydefs()
{
var j=new WinLIKE.window('你好',266,111,240,240,12);
j.Nam='sohu';
j.Adr='http://www.sohu.com';
WinLIKE.addwindow(j);
}
</SCRIPT>
<BODY onLoad=WinLIKE.init() onResize=WinLIKE.resizewindows()>
<!-- Don't remove this line!--><IMG ID=ih_ SRC="skins/trans.gif" style="z-Index:4000;position:absolute;left:0;top:0;width:100%;height:100%">
<!-- You can change this loading picture! --><IMG ID=ig_ SRC="winlike/winman/load.gif" STYLE="position:absolute;left:35%;top:40%;z-Index:4001">
<!-- Insert your page-content here! -->
我们可以看到，创建一个窗口，只需要简单的四行就可以搞定，是不是很简单？！重要的是，它还支持各种不同的浏览器，这个我们可以从其官网上可以看到。
由于篇幅的原因，属性和方法说明在我的下一篇文章中将给大家介绍！这里还要强调一点的是，如果是你自己使用页面来调用winlike的js来创建窗口的话，请一定按照如下方式来做（假设你的winlike解压到了目录D：\WinLIKE_1.5.03，比如我们建立的页面在D:\目录下的话）：
1.在整个网页文件的head头中引入如下内容：
<head>
<script>
WinLIKEerrorpage='WinLIKE_1.5.03/winlike/winman/hlp-error.html';
WinLIKEskinpath = "WinLIKE_1.5.03/skins/";
WinLIKEfilepath = "WinLIKE_1.5.03/winlike/";
</script>
<script language="javascript" src="WinLIKE_1.5.03/winlike/winman/wininit.js"></script>
<script language="javascript" src="WinLIKE_1.5.03/winlike/winman/winman.js"></script>
</head>
<SCRIPT>
WinLIKE.definewindows=mydefs;
function mydefs()
{
var j=new WinLIKE.window('你好',266,111,240,240,12);
j.Nam='sohu';
j.Adr='http://www.sohu.com';
WinLIKE.addwindow(j);
}
</SCRIPT>
2.在body标签上加入如下内容：
<body onload="WinLIKE.init()" onResize="WinLIKE.resizewindows()" onSelectStart="self.event.returnValue=false;" >
3.在bodu体内加入如下内容：
<!-- 这一行请不要删除，要保留!-->
<IMG ID=ih_ SRC="$WINLIKE_HOME/skins/trans.gif" style="z-Index:4000;position:absolute;left:0;top:0;width:100%;height:100%">
<!-- 你可以修改这里的loading图片，改成自己的目录图片路径也是可以的! -->
<IMG ID=ig_ SRC="$WINLIKE_HOME/winlike/winman/load.gif" STYLE="position:absolute;left:35%;top:40%;z-Index:4001">
</body>
分享到：
相关推荐
摘要:脚本资源,Ajax/JavaScript,仿Windows 超多精彩的仿微软Windows视窗JS代码，超多的JS窗口特效，各式各样有50种，而且内含与此相关的示例文件也比较丰富，是学习Ajax的好素材，推荐给js前端开发者。
jsWindow源码包，是一个由js制作的仿Window窗口风格的弹出窗口，模拟了Windows窗口的风格，包括了窜的标题栏和状态栏，还包括了最大化、最小化按钮等，在窗口中可显示网页的内容、文字和图片等。 该 JS仿Windows...
轻松制作仿微软窗口，欢迎大家下载
To make it easier for you, please have a look at ALL of the following samples. Most probably your upcoming question during developing with WinLIKE will be answered here....JS仿微软窗口效果
javascript的经典封装,在网上找了14个单一RAR,怪麻烦的,压缩了一下传了上来.不过内容还是不错的.