使用ItzDesktop创建Web桌面简单教程
本文由发表于6年前 | Itz项目 | 评论数 3 |  被围观 4,960 views+
整体说明:1、 创建桌面背景:2、 创建工具栏并添加一个工具栏的图标3、 创建点击工具栏图标时打开的窗口并添加点击事件4、 为工具栏添加logo5、 为桌面添加常用事件6、 创建桌面图标7、 添加图标到桌面8、 生成桌面图标打开时对应的窗口,并为桌面图标添加点击事件9、 创建右侧浮动窗口

下面就介绍如何使用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/中并修改背景路径。

Web桌面

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;

工具栏

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

3、 创建点击工具栏图标时打开的窗口并添加点击事件
// 为该图标添加点击时生成窗口的事件
// 首先初始化一个窗口
// 创建一个窗口对象
var winParam = new DeskTopWin();
// 设置窗口宽度
winParam.width = 700;
// 设置窗口高度
winParam.height = 500;
// 设置窗口ID
winParam.id = "ifeng_vedio";
// 设置窗口标题
winParam.title = "凤凰视频";
// 设置窗口内容
winParam.content = "<iframe frameborder='0' name='itzhai_webapps' id='itzhai_webapps_ifeng_vedio' marginheight='0' marginwidth='0' src='http://v.ifeng.com/v360/player.shtml' style='overflow-x: hidden; width: 700px; height:500px;'></iframe>";
// 设置点击图标生成窗口的事件
ItzDtToolBar.setClickEventWin(toolbarIcons[0], winParam);

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

// 为工具栏添加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);

工具栏中添加logo

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);

桌面图标

8、 生成桌面图标打开时对应的窗口,并为桌面图标添加点击事件
// 创建一个窗口对象
var winParam = new DeskTopWin();
// 设置窗口宽度
winParam.width = 700;
// 设置窗口高度
winParam.height = 500;
// 设置窗口ID
winParam.id = "ifeng_vedio";
// 设置窗口标题
winParam.title = "凤凰视频";
// 设置窗口内容
winParam.content = "<iframe frameborder='0' name='itzhai_webapps' id='itzhai_webapps_ifeng_vedio' marginheight='0' marginwidth='0' src='http://v.ifeng.com/v360/player.shtml' style='overflow-x: hidden; width: 700px; height:500px;'></iframe>";

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

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

点击桌面图标打开窗口

9、 创建右侧浮动窗口
// 浮动窗口内容
var contentHtml = "您的微博挂件代码";
// 创建窗口
ItzDtFloatWin.createFloatWin(contentHtml);

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

右边浮动窗口

 

桌面整体效果

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/the-use-itzdesktop-create-a-web-desktop-simple-tutorial.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2012 6/10
文章评论
    3条评论
  1. 发现 2012年07月14日12:54:01  #-49楼 回复 回复

    要是有个最小化就更好了。

  2. byhe 2013年09月08日10:06:53  #-48楼 回复 回复

    下载不了了….

    • arthinking 2013年09月08日23:09:57 回复 回复

      可以下载了,不过还是推荐找其他的一些web桌面库,现在有很多不错的。

给我留言

有人回复时邮件通知我
Itz项目的相关文章
随机文章 本月热门 热评
1 数据结构笔记 – 排序算法 冒泡排序算法实现 2011/9/20
2 Hibernate复合主键作为外键在关联映射中的配置方法 2011/9/30
3 Java Web笔记 – 客户化JSP标签库 自定义标签 2011/11/12
4 追逐梦想的步伐 SMART目标和实用投资计划(PIP) 2012/8/4
5 Java基础笔记 – 线程间通信的实现 wait()和notify()方法 2011/10/25
6 一个最简单的系统引导扇区的实现方法(Boot Sector) 2011/5/1
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.