WinLIKE仿微软视窗

来源：互联网发布：三亚网络监管局编辑：程序博客网时间：2024/05/16 19:41

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按钮，我们就可以看到创建这个窗口的源代码了，可以看到代码如下：

<SCRIPT>WinLIKEerrorpage='winlike/winman/hlp-error.html';</SCRIPT>

<SCRIPT SRC="winlike/winedit/winedit.js"></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>

<IMG ID=ih_ SRC="skins/trans.gif" style="z-Index:4000;position:absolute;left:0;top:0;width:100%;height:100%">

<IMG ID=ig_ SRC="winlike/winman/load.gif" STYLE="position:absolute;left:35%;top:40%;z-Index:4001">

我们可以看到，创建一个窗口，只需要简单的四行就可以搞定，是不是很简单？！重要的是，它还支持各种不同的浏览器，这个我们可以从其官网上可以看到。

由于篇幅的原因，属性和方法说明在我的下一篇文章中将给大家介绍！这里还要强调一点的是，如果是你自己使用页面来调用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标签上加入如下内容：

3.在bodu体内加入如下内容：

</body>

上次也简单的说了下WinLIKE的使用，我们创建一个窗口，使用如下代码即可：

var j=new WinLIKE.window('Title',PosLeft,PosTop,Width,Height,z-Index);
j.Attribute=Value;
...
WinLIKE.addwindow(j);

窗口的位置和大小（宽度和高度）都是以像素（pixel）为单位的。在上述代码的第一行和最后一行之间可以插入窗口的属性信息，比如j.Nam="sohu".注意，这里的使用点成员符号来表示特定窗口的属性，如果想对所有的窗口实现统一的属性管理，可以使用下划线代替点成员符号，比如上面的Nam属性，可以使用_Nam="sohu"这样，前面不用加j标识，这样就表示所有的窗口的名称都是sohu。

下面列出窗口的属性和其说明：

1.Ttl
窗口的名称，这个名称最好是保证其唯一性。这个名称类似于我们在框架页面中的框架的名称一样，这样我们就可以在<a href="" target="你的窗口名称">连接</a>这样来使用了，当我们点击连接的时候，就会在我们定义的窗口中打开这个页面。

2.Left
窗口的左边距浏览器的左边的绝对距离，单位为像素！

3.Top
窗口的上边距浏览器的上边的绝对距离，单位为像素！

4.Width
窗口的绝对宽度，单位为像素！这里的绝对宽度是指，无论浏览器的大小如何改变其宽度是不会改变的。

5.Height
窗口的绝对高度，单位为像素！

6.RLeft
窗口的左边距浏览器左边的相对距离，这样浏览器的大小改变的时候，其会动态的调整。我们在使用相对属性，比如RLeft,RTop,RWidth,RHeight的时候，我们在定义窗口的时其对应的PosLeft,PosTop,Width,Height就应该用%来表示，比如：
var win = new WinLIKE.window("", 200, "%", "%", 300, 5);
win.RTop = "WinLIKE.browsersize().Height - Height";
win.RWidth = "WinLIKE.browsersize().Width - Width";
这样我们就可以动态的改变窗口的宽度了。

7.RTop
窗口的上边距浏览器的上边的相对距离！

8.RWidth
窗口相对浏览器的宽度，当浏览器的大小改变时，窗口的宽度会按比例进行缩放！

9.RHeight
窗口的相对浏览器的高度，当浏览器的大小改变时，窗口的高度会按比例进行缩放！

10.Ski
窗口的皮肤名称，其值应该是skins目录下的文件夹的名称（也就是皮肤的名称）！默认是default

11.Adr
窗口中内容的URL地址，注意该地址在运行期是只读的，即必须在创建窗口的同时赋予其地址。后期是不允许通过该属性来改变窗口的内容的，只用通过其API方法来改变，这个后面再说！

12.Nam
窗口的target name，即我们可以通过<a>标签的target来定位到指定名称的窗口中！这个属性在运行期间也是只读的！

13.Fro
设置窗口是否永远在最前面，无论其他窗口的z-index怎么改变！其值为true或false，默认是false！

14.Vis
设置窗口是否可见，其值为true或false，默认是true！

15.Tit
窗口的标题栏是否可见，其值为true或false，默认是true！

16.Min
窗口的最小化按钮是否可见，其值为true或false，默认是true！

17.Cls
窗口的关闭按钮是否可见，其值为true或false，默认是true！

18.Mov
设置窗口是否可以移动，其值为true或false，默认是true！

19.Siz
窗口是否可以通过鼠标来改变大小，其值为true或false，默认是true！

20.Mn
窗口是否为最小化的，其值为true或false，默认是false，表示创建时不是最小化的！

21.Mx
窗口是否是最大化的，其值为true或false，默认是false，表示创建时不是最大化的！

22.Ed
窗口是否可以被编辑，其值为true或false，默认是true，一般情况下我们在开发的时候是不进行编辑的！

23.SD
窗口的刷新按钮是否可见，就是窗口最左上角的那个刷新按钮。其值为true或false，默认是true！

24.LD
窗口的DeepLink是否可见，其值为true或false，默认是true！这个一般好象没什么用处，可以关闭！

25.HD
窗口的前进后退按钮是否可见，其值为true或false，默认是true！这个前进后退按钮和浏览器的前进后退类似，只不过是图标而已。通过这个历史操作，我们可以在一个窗口中进行当前窗口历史URL记录的前进和后退！

26.Bac
设置是否永远不改变窗口的z-index属性，其值为true或false，默认是false！

27.Rel
官方的解释是relative/absolute behavior，具体的实际意义不是很清楚！

28.Del
deleted (not created)，运行期间只读！具体意义也没怎么弄清楚，呵呵~~~

29.Bg
是否指定为后台窗口，默认为false，其值为true或false！

30.onUnload
窗口的卸载事件，其值类型为字符串型。一般我们就指定其函数名称即可，比如：win.onUnload="myUnload()";

31.onClose
窗口的关闭事件，其值为字符串型。同上onUnload，不过他是在onUnload之后执行的。

32.onEvent
    窗口的事件集中处理函数，该方法有两个参数，分别是当前窗口对象和事件代码。比如我们定义如下：
win.onEvent="winMag";
function winMag(/*object*/win, /*int*/what)
{
    if (what == 1) alert('最小化！');
    else if (what == 3) alert('关闭！');
}
    这里的what可以表示多个事件，官方手册中没有具体的说明，不过我们可以自己写如下函数，然后进行检测即可！
// 窗口事件代码检测方法
var tmp = new Object(); // 该对象用来存储事件
function winMag(win, what)
{
    if (!tmp[what]) {
        alert(win.Nam + '/n' + what);
        tmp[what] = true;
    }
}
    然后通过鼠标对窗口的操作就可以知道是什么事件了！

33.myP
窗口的自定义属性，比如win.test="nihao",这样就可以自定义一个属性了！

上面介绍了窗口的所有基本属性，通过属性定义，我们就可以定义出不同的窗口对象，然后结合API操作方法动态的改变窗口属性等就可以创建一个丰富的桌面式应用程序了！