用某开源框架模拟的google操作系统（附图和下载）

首先，你可以点这个地方，看看这个模拟的google操作系统，

下面是一个系统截图：

好东西大家一起分享，你可以点这里下载这个实例

下面是二次开发说明：

一、 目录结构

Icons文件夹用于保存桌面png图标。

Images文件夹用于保存桌面背景图片。

SpaceFrame文件夹里面是框架示例程序的入口。

TestJs文件夹用于保存精灵OS框架核心JS代码。

Themes文件夹用于保存OS窗口样式、状态栏样式、任务栏样式等主题文件。

原则上只要保持目录结构不便，运行示例代码便没有问题。

二、 示例入口页面源代码及分析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head >

<title>FairyNest</title>

function Test()

{

BlueTaskBar.CreateTaskBar();

BlueDesk.CreateDeskArea();

var mytest={width:800,height:550,x:100,y:100,url:"http://www.baidu.com",status:"百度首页"};

var Icon=new DeskIcon({Src:"home.png",Title:"百度搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

mytest={width:800,height:550,x:100,y:100,url:"http://www.google.com",status:"google首页"};

Icon=new DeskIcon({Src:"Document.png",Title:"google搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

mytest={width:800,height:550,x:100,y:100,url:"http://www.yodao.com/",status:"有道首页"};

Icon=new DeskIcon({Src:"Clock.png",Title:"有道搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

mytest={width:800,height:550,x:100,y:100,url:"http://www.yahoo.cn/?loop=true",status:"yahoo首页"};

Icon=new DeskIcon({Src:"Bat.png",Title:"yahoo搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

mytest={width:800,height:550,x:100,y:100,url:"http://www.zhongsou.com/index_jb.htm",status:"中搜首页"};

Icon=new DeskIcon({Src:"pic.png",Title:"中国搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

BlueDesk.ShowIcons();

}

</script>

</head>

</body>

</html>

首先，在<head>里面引用了所有相关的样式文件和js文件，并有一个名为test的js函数，这个函数将在<body onLoad="Test()">这个地方调用，也即是页面载入完成以后将运行这个函数。

然后，test函数里面，一定要先运行这两行代码：

BlueTaskBar.CreateTaskBar(); //创建任务栏

BlueDesk.CreateDeskArea(); //创建桌面

并不一定要再test函数里面调用这两个方法，但一定要在你开始创建一个个桌面图标之前，先吧任务栏和桌面区域创建好。不然，桌面区域都没创建好，桌面图标创建咋哪里？

接着，就可以在桌面上创建桌面图标了：

var mytest={width:800,height:550,x:100,y:100,url:"http://www.baidu.com",status:"百度首页"};

var Icon=new DeskIcon({Src:"home.png",Title:"百度搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

其中，var Icon=new DeskIcon()是用来创建桌面图标的。

DeskIcon对象用户应该了解的参数主要有三个：

Src：桌面图标的路径，应该为png各式的背景透明的图标，不然显示出来可能不太好看。

Title：桌面图标的标题，将显示在桌面图标的下面，类似于windows桌面图标标题的现实方式。

WinOptions：这个参数应该是一个json对象，也即是类似于这里var mytest={width:800,height:550,x:100,y:100,url:"http://www.baidu.com",status:"百度首页"}; 这样的一个对象。这个参数主要用来定义当双击桌面图标的时候，系统将打开一个什么样的窗口，具体的定义方式，请参看下面的WinOptions定义。

再接着就是WinOptions的定义了，也就是定义系统应该打开什么样的窗口。

用户应该关心的WinOptions对象属性如下：

id：string ，字符串类型，定义窗口的唯一标识。如果用户不做定义的话，系统将自动生成。一般如果不是要把窗口的openmodal属性设置为true的话，不推荐手工设置id.同时，系统部允许id重复，若检测到重复时，系统将报错。

closable：true|false ，定义该窗口是否显示关闭按钮，若定义为false，则窗口打开后将不能关闭。

minsizeable：true|false ，定义窗口是否显示最小化按钮。若定义为false，则窗口打开后将不能最小化到任务栏。

maxsizeable：true|false ，定义窗口是否显示最大化按钮。若定义为false，则窗口打开后将不能最大化到满屏。

resizeable：true|false ，定义窗口是否可以拖动大小。若定义为false，则窗口打开后将不能通过鼠标拖动改变窗口大小。窗口拖动大小的触点在窗口右下角。

dragable：true|false ，定义窗口是否可以拖动改变位置。若定义为false，则窗口打开后将固定在桌面上，不能通过拖动改变窗口的位置。拖动窗口的触点在窗口title区域。

openmodal：true|false ，定义窗口是否只能打开一次。若定义为true，则窗口打开后再次点击对应的桌面图标时，系统将不会重新打开新的窗口，而是使当前窗口获得焦点。若定义为false，则重复点击对应的桌面图标时，系统将重复生成同样定义的窗口。同时，若要使openmodal属性为true生效，应配合使用id属性，此时应手工设置窗口id。

showstatus：true|false ，定义窗口是否显示状态栏。

title：string ，字符串类型，定义窗口标题。

haseffect：true|false ，定义窗口是否使用效果。若为true，则窗口在打开、关闭、最大化、最小化时都将显示动画效果。

openmax：true|false ，定义窗口打开时是否最大化。

opencenter：true|false ，定义窗口打开时是否桌面居中。

minwidth: int ，数字类型，定义窗口的最小宽度，即当窗口可以拖动大小时，最小不会小于此宽度。

minheight: int ，数字类型，定义窗口的最小高度，即当窗口可以拖动大小时，最小不会小于此高度。

width: int ，数字类型，定义窗口打开时的宽度。数值不能小于minwidth，否则无效。

height: int ，数字类型，定义窗口打开时的高度。数值不能小于minheight，否则无效。

X: int ，数字类型，定义窗口打开时的x坐标。

y: int ，数字类型，定义窗口打开时的y坐标。

最后，当创建好了桌面图标以后，这时还只是把一个个桌面图标对象装载在内存里面。需要再调用BlueDesk.ShowIcons()以在桌面上显示图标。

posted @ 2009-10-29 13:17 laoliao 阅读(459) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

用某开源框架模拟的google操作系统（附图和下载）

公告