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

首先,你可以点这个地方,看看这个模拟的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文件,并有一个名为testjs函数,这个函数将在<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对象属性如下:

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

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

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

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

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

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

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

showstatustrue|false ,定义窗口是否显示状态栏。

titlestring 字符串类型,定义窗口标题。

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

openmaxtrue|false ,定义窗口打开时是否最大化。

opencentertrue|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  阅读(462)  评论(0编辑  收藏  举报