相信朋友们总有这样的经历：通过视频站点看电视剧，由于种种原因全屏时候某个程序（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 <htmlxmlns="http://www.w3.org/1999/xhtml">2 <head>3 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">4 <title>My Video</title>5 <scripttype="text/javascript"src="js/video.js"></script>6 <styletype="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 <bodyid="gb">11 <embedsrc="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 <authorname="Denny.dong">7 <infourl="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 <iconheight="320"width="240"src="images/gadgetIcon.png"/>14 </icons>15 <hosts>16 <hostname="sidebar">17 <basetype="HTML"apiVersion="1.0.0"src="video.html"/>18 <permissions>full</permissions>19 <platformminPlatformVersion="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等

相关资源：

http://msdn.microsoft.com/en-us/library/dd370867(VS.85).aspx

下一篇将介绍如何显示并添加配置信息，以及添加Dock等...

转载于:https://www.cnblogs.com/netwenchao/archive/2009/07/30/1535445.html

一步步创建 边栏 Gadget(一)相关推荐

  1. 一步步创建 边栏 Gadget(二)

    相信使用上篇中创建的边栏Gadget之后,大家会很郁闷.难道视频窗口就那么小吗?看起来真费劲.我能通过该Gadget看着一部电视剧.而不能够定制自己需要的或者想要看的电视剧. 在上一篇一步步创建 边栏 ...

  2. Java开发环境的搭建以及使用eclipse从头一步步创建java项目

    原文:出自本人的Linux博客http://blog.csdn.net/unix21/article/details/18813173 一.Java 开发环境的搭建 这里主要说windows环境下怎么 ...

  3. 用CSS的float和clear创建三栏液态布局的方法(转载）

    三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.   ...

  4. 采用Visual Stuidio 2010 创建网站栏

    采用Visual Stuidio 2010 创建网站栏 Visual Stuidio 2010 该项目模板使创建网站栏/内容类型和列表变得非常方便. 1. 管理员身份打开Visual Stuidio ...

  5. Microsoft Word 教程:如何在 Word 中更改页边距、创建新闻稿栏？

    欢迎观看 Microsoft Word 教程,小编带大家学习 Microsoft Word 的使用技巧,了解如何在 Word 中更改页边距.创建新闻稿栏. 在 Word 中,每个页面会自动显示一英寸的 ...

  6. 一步步创建vue-element-admin框架实现001-创建cli3项目

    一步步创建vue-element-admin框架实现001-创建cli3项目 这里写目录标题 一步步创建vue-element-admin框架实现001-创建cli3项目 使用cli3创建工程,vue ...

  7. 用CSS的float属性创建三栏布局网页的方法

    三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...

  8. css导航栏_CSS：创建导航栏

    css导航栏 Every website needs a navgation bar to help visitors navigate around the website. This is gen ...

  9. excel条件格式使用_如何使用条件格式在Excel中创建进度栏

    excel条件格式使用 Progress bars are pretty much ubiquitous these days; we've even seen them on some water ...

最新文章

  1. Contiki Process概述
  2. 批量条形码生成器_条码打印软件之Code32条形码
  3. Android关于绘图中Shader 的效果（中级）
  4. 算法导论-MIT笔记
  5. 哪家中国公司为Java 16贡献最多？Java第一大厂居然不是第一的...
  6. 从清明节到儿童节，打造一个童话城市
  7. [HNOI2003]消防局的设立（贪心）
  8. xcode w情ndows版,xcode Windows版安装使用介绍
  9. 【opencv】双目视觉下空间坐标计算/双目测距 6/13更新(转载)
  10. MongoError: E11000 duplicate key error collection: blog.users index: email_1 dup key
  11. python 命令行参数_Python 命令行参数介绍
  12. 数据结构java学生成绩排序_数据结构学习--Java简单排序
  13. adb shell 运行时报错“adb server version (26) doesn‘t match this client (39)； killing...“的解决方案
  14. OA选型案例：建筑行业选型华天OA系统
  15. mysql的update和case when同步使用
  16. 笔记本电脑插入耳机仍然外放(亲测有效)
  17. WORD出现VBE6EXT.OLD不能被加载的问题
  18. 南京信息工程大学计算机考研怎么样,南京信息工程大学就业怎么样，考研好不好？...
  19. ae制h5文字动画_绝对干货！H5动画制作方法全揭秘
  20. 人人开源搭建后台管理系统 逆向工程生成CRUD代码

热门文章

  1. 都快下班了，才来写日记
  2. Redis整合Spring结合使用缓存实例
  3. JavaScript中十个一步拷贝数组的方法
  4. Android中的资源复用小技巧
  5. DFS BFS 总结
  6. Core-3399-JD4 六核高性能AI核心板
  7. np.identity()
  8. JQ学习（三）-ajax
  9. LUA 拾遗（编译-调试-运行）
  10. Java消息中间件的概述与JMS规范