一步步创建边栏 Gadget(一)

相信朋友们总有这样的经历：通过视频站点看电视剧，由于种种原因全屏时候某个程序（ word ， Excel ）等，而又不想错过看电视剧的机会。看看屏幕右侧边栏上的时钟，主意来咯，要是能够把站点的页面放在边栏上就好了 … 使劲的在 Microsoft 上边找相应的 Gadget 吧 ..

没找到称心的边栏Gadget吧，不必出头丧气咯。下面我们将介绍如何创建自定义的边栏Gadget（以下将成为Gadget），效果如下图所示：

什么是Gadget

边栏Gadget是一种强大的小工具，所以您可能认为创建一个Gadget多么的不容易。事实上如果您了解关于HTML、CSS、JavaScript，创建Gadget变得是那么的简单。最简单的Gadget仅仅有一个HTML文件以及XML描述文件。当然多数的Gadget包含图片文件（jpeg Png ect）、脚本文件(js ,vbs ect)、样式文件(CSS)。所有这些都被放置在一个以.gadget为扩展名的ZIP压缩文件中。

步骤一：创建主HTML文件
命名为video.html

1 < html xmlns ="http://www.w3.org/1999/xhtml" >
2 < head >
3 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >
4 < title > My Video </ title >
5 < script type ="text/javascript" src ="js/video.js" ></ script >
6 < style type ="text/css" >
7 body { margin : 0px ; padding : 0px ; background-image : url(images/bg.jpg) ; background-repeat : repeat-x ; width : 200 ; height : 155 ; background-color : #000 ; }
8 </ style >
9 </ head >
10 < body id ="gb" >
11 < embed src ="http://www.tudou.com/l/e3MBzOUVNaQ" type ="application/x-shockwave-flash" allowscriptaccess ="always" allowfullscreen ="true" wmode ="opaque" id ="elpy" name ="elpy" width ="200" height ="150" >
12 </ embed >
13 </ body >
14 </ html >
15

步骤二：创建XML描述文件

XML描述文件是一个描述Gadget的文件，也可以说是一个Manifest。它将一个Gadget中的内容链接在一起，但是我并不认为其是一个Manifest。因其仅仅提供了该Gadget的描述信息（作者，版本，描述，名称，图标链接等）以及主HTML文件的链接。命名为：gadget.xml

1 <? xml version="1.0" encoding="utf-8" ?>
2 < gadget >
3      < name > My Video </ name >
4      < namespace > netwenchao.gadget </ namespace >
5      < version > 1.0 </ version >
6      < author name ="Denny.dong" >
7          < info url ="http://netwenchao.cnblogs.com%22/>
8         <logo src=" images/logo.png" />
9      </ author >
10      < copyright > Denny.dong © 2009 </ copyright >
11      < description > You can view video from any video site when you have the URL of the video.Just like tudou or youku ect. </ description >
12      < icons >
13      < icon height ="320" width ="240" src ="images/gadgetIcon.png" />
14    </ icons >
15      < hosts >
16          < host name ="sidebar" >
17              < base type ="HTML" apiVersion ="1.0.0" src ="video.html" />
18              < permissions > full </ permissions >
19              < platform minPlatformVersion ="0.1" />
20          </ host >
21      </ hosts >
22 </ gadget >

name: gadget的名称
version: gadget 的版本.
author: 作者信息
info url: 网址
info text: 网址名称
logo src: logo图片地址
copyright: 版权声明
description: gadget的描述
icon src: 该Gadget的图标文件
base src: 该Gadget的主HTML文件

步骤三：创建Gadget
选择以上两个文件，压缩成ZIP格式。修改扩展名从.ZIP为.gadget。双击该文件，即可出现安装提示窗体。如下图：

必备知识：

HTML相关知识

Web脚本，如javascript，vbscript等

一步步创建 边栏 Gadget(一)

猜你喜欢

一步步创建边栏 Gadget(一)