使用ItzDesktop创建Web桌面简单教程

下面就介绍如何使用ItzDesktop编写自己的Web桌面。

首先,为了熟悉大致需要用到的代码,可以浏览ItzDesktop中提供的demo。

整体说明:

① 代码中涉及到的图片路径都是在项目的images文件夹中的图片,如果想自定义图标或背景,可以自己添加图片到该文件夹中,并获取图片路径。

② 由于窗口中的内容部分有些需要贴入HTMl代码,当HTML代码中包含双引号时,就需要转义了,可以使用项目根目录中的converseTool.html进行转换后再复制粘贴过来使用。

1、 创建桌面背景:

// 创建Itz桌面组件
var desktop = new Desktop();
// 设置背景路径
desktop.background = “images/desktop_bg/1271382018_ddvip_7593.jpeg”;
// 设置宽度
desktop.width = “100%”;
// 设置高度
desktop.height = “100%”;
// 把桌面添加到HTMl文档中
desktop.addToPage();

自定义背景时,把自己需要的背景图片放入images/desktop_bg/中并修改背景路径。

[caption id=”attachment_1882” align=”aligncenter” width=”300” caption=”Web桌面”][/caption]

2、 创建工具栏并添加一个工具栏的图标

// 创建工具栏
ItzDtToolBar.createToolBar();

//创建一个数组用于保存工具栏所有的图标
var toolbarIcons = new Array();
// 创建工具栏图标
var icon = new DesktopIcon();
// 设置图标图片,如果需要自定义图片,最佳图片大小为:40 * 40
icon.imageSrc = “images/shortcut/ifeng_logo.png”;
// 设置图标ID
icon.id = “ifeng_vedio”;
// 把图标添加到工具栏中
ItzDtToolBar.addIconToToolBar(icon);
toolbarIcons[0] = icon;

[caption id=”attachment_1883” align=”aligncenter” width=”300” caption=”工具栏”][/caption]

注意:最多可以在工具栏创建9个图标。

3、 创建点击工具栏图标时打开的窗口并添加点击事件

// 为该图标添加点击时生成窗口的事件
// 首先初始化一个窗口
// 创建一个窗口对象
var winParam = new DeskTopWin();
// 设置窗口宽度
winParam.width = 700;
// 设置窗口高度
winParam.height = 500;
// 设置窗口ID
winParam.id = “ifeng_vedio”;
// 设置窗口标题
winParam.title = “凤凰视频”;
// 设置窗口内容
winParam.content = ““;
// 设置点击图标生成窗口的事件
ItzDtToolBar.setClickEventWin(toolbarIcons[0], winParam);

注意,窗口的内容winParam.content中如果包含双引号,需要添加转义字符,可以使用项目根目录中的ConverseTool.html进行转换后再粘贴进来。

4、 为工具栏添加logo

// 为工具栏添加logo
var icon = new DesktopIcon();
// 设置logo图片,最佳图片大小:49 * 49
icon.imageSrc = “images/shortcut/itzhai_logo.png”;
// 设置logo ID
icon.id = “itzhai_logo”;
// 把logo添加到工具栏中
ItzDtToolBar.addLogoToToolbar(icon);

[caption id=”attachment_1884” align=”aligncenter” width=”300” caption=”工具栏中添加logo”][/caption]

5、 为桌面添加常用事件

//为桌面添加常用的事件
ItzDtCom.addDefaultInfo(); // 添加桌面信息
ItzDtCom.addToolBarEvent(); // 添加工具栏事件
ItzDtCom.addDeskTopEvent(); // 添加桌面事件(选择,右键单击)

6、 创建桌面图标

// 创建桌面图标
// 桌面图标数组,用于保存所有的图标
var icons = new Array();
// 创建一个桌面图标
var icon = new DesktopIcon();
// 设置桌面图标图片路径,最佳图片大小:49 * 49
icon.imageSrc = “images/shortcut/ifeng_logo.png”;
// 设置桌面图标标题
icon.title = “凤凰视频”;
// 设置桌面图标ID
icon.id = “ifeng_vedio”;
// 把图标添加到图标数组中
icons[0] = icon;

7、 添加图标到桌面

// 把所有图标添加到桌面
ItzDtIco.addIconToDesktop(icons);

[caption id=”attachment_1885” align=”aligncenter” width=”83” caption=”桌面图标”][/caption]

8、 生成桌面图标打开时对应的窗口,并为桌面图标添加点击事件

// 创建一个窗口对象
var winParam = new DeskTopWin();
// 设置窗口宽度
winParam.width = 700;
// 设置窗口高度
winParam.height = 500;
// 设置窗口ID
winParam.id = “ifeng_vedio”;
// 设置窗口标题
winParam.title = “凤凰视频”;
// 设置窗口内容
winParam.content = ““;

// 设置第一个图标点击事件
// icons[0] 要添加点击事件的图标
// winParam 点击后将生成的窗口
ItzDtIco.setClickEventWin(icons[0], winParam);

注意,窗口的内容winParam.content中如果包含双引号,需要添加转义字符,可以使用项目根目录中的ConverseTool.html进行转换后再粘贴进来。

[caption id=”attachment_1886” align=”aligncenter” width=”300” caption=”点击桌面图标打开窗口”][/caption]

9、 创建右侧浮动窗口

// 浮动窗口内容
var contentHtml = “您的微博挂件代码”;
// 创建窗口
ItzDtFloatWin.createFloatWin(contentHtml);

注意,窗口的内容contentHtml中如果包含双引号,需要添加转义字符,可以使用项目根目录中的ConverseTool.html进行转换后再粘贴进来。

[caption id=”attachment_1887” align=”aligncenter” width=”179” caption=”右边浮动窗口”][/caption] [caption id=”attachment_1888” align=”aligncenter” width=”300” caption=”桌面整体效果”][/caption]

arthinking wechat
欢迎关注itzhai公众号