首先，你可以点这个地方，看看这个模拟的google操作系统，
下面是一个系统截图：
好东西大家一起分享，你可以点这里下载这个实例
下面是二次开发说明：
一、 目录结构
Icons文件夹用于保存桌面png图标。
Images文件夹用于保存桌面背景图片。
SpaceFrame文件夹里面是框架示例程序的入口。
TestJs文件夹用于保存精灵OS框架核心JS代码。
Themes文件夹用于保存OS窗口样式、状态栏样式、任务栏样式等主题文件。
原则上只要保持目录结构不便，运行示例代码便没有问题。
二、 示例入口页面源代码及分析
<html xmlns="http://www.w3.org/1999/xhtml" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head >
<title>FairyNest</title>
<link href="../Themes/vista/win.css" rel="stylesheet" type="text/css"/>
<link href="../Icons/vista/icon.css" rel="stylesheet" type="text/css"/>
<link href="../Themes/vista/taskbar.css" rel="stylesheet" type="text/css" />
<link href="../Themes/vista/bleb.css" rel="stylesheet" type="text/css" />
<link href="../Themes/vista/Status.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../TestJs/BlueEffects.js"></script>
<script type="text/javascript" src="../TestJs/BlueWinEffects.js"></script>
<script type="text/javascript" src="../TestJs/BlueWindows.js"></script>
<script type="text/javascript" src="../TestJs/BlueTaskBar.js"></script>
<script type="text/javascript" src="../TestJs/BlueIcon.js"></script>
<script type="text/javascript" src="../TestJs/BlueDeskIcon.js"></script>
<script type="text/javascript">
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 onLoad="Test()" style=" margin:0px; background-image:url('../Images/cehIgS9QLaLLc2.jpg'); overflow:hidden;">
</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()以在桌面上显示图标。