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

在上一篇一步步创建 边栏 Gadget（一）中，我们创建了一个简单的边栏Gadget。细心的朋友们也许会发现我们创建的Gadget中没有下图中 圈选的按钮，仅仅拥有上方的关闭按钮。本篇将介绍如何为我们的边栏Gadget添加配置属性改变边栏Gadget的大小，以及添加播放URL配置选项。

总体来讲，本部分比第一部分仅仅多出两个js文件以及一个HTML页面（用于构成系统配置页面）。不过为了添加这些功能到我们的边栏Gadget中我们需要对上一篇中的文件做部分修改。

步骤一：为边栏Gadget添加配置属性

a.创建一html文件命名为setting.html

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <html>3 <head>4 <title>SidebarShell:Settings</title>5 <scripttype="text/javascript"src="js/setting.js"></script>6 <styletype="text/css">7 body{width:240;height:180;font-size:12px;background-image:url(images/bg.jpg);background-repeat:repeat-x;}8 ul{margin:16px;padding:0px;list-style-type:none;}9 li{margin:4px;padding:4px;}10 #btnsv{margin-left:40px;}11 </style>12 </head>13 <bodyonLoad="loadsett()">14 <ul>15 <li>URL:&nbsp;&nbsp;<inputtype="text"id="txturl"name="txturl"size="14"value=""/></li>16 <li>DIS:&nbsp;&nbsp;&nbsp;&nbsp;<selectid="seldis"name="seldis">17 <optionvalue="120X90">120X90</option>18 <optionvalue="160X120">160X120</option>19 <optionvalue="200X150">200X150</option>20 <optionvalue="240X180">240X180</option>21 <optionvalue="280X210">280X210</option>22 <optionvalue="320X240">320X240</option>23 </select>24 </li>25 </ul>26 <hr/>27 <divstyle="text-align:center;">28 <ahref="http://netwenchao.cnblogs.com">更多信息请访问Denny.dong</a>29 </div>30 </body>31 

b.在该html文件中添加html代码，在此我们仅仅添加URL以及尺寸等配置项。

c.添加一脚本文件命名为setting.js，并输入如下代码（用于存放以及加载配置信息）。

1 vardfUrl="http://www.tudou.com/l/e3MBzOUVNaQ";2 functionprocSettingsClosingEvent(event){3 if(event.closeAction==event.Action.commit)4 {5 System.Gadget.Settings.write("vurl",$("txturl").value);//存储配置信息6 System.Gadget.Settings.write("dis",$("seldis").value);7 }8 event.cancel=false;9 }10 functionloadsett()11 {12 vargSE="";13 vargUrl="";14 System.Gadget.onSettingsClosing=procSettingsClosingEvent;15 gSE=System.Gadget.Settings.read("dis");//读取配置信息16 gUrl=System.Gadget.Settings.read("vurl");//读取配置信息17 $("seldis").value=(gSE=="")?"120X90":gSE;//填充默认的配置信息18 $("txturl").value=(gUrl=="")?dfUrl:gUrl;19 }20 function$(el){returntypeof(el)=="string"?document.getElementById(el):el;}21 

d.添加video.js文件，在其中填写如下代码。用于加载配置信息以及应用配置信息到页面上。

1 //Enable the gadget setting UI.2 System.Gadget.settingsUI="settings.htm";3 //Delegate for when the Settings dialog is closed.4 System.Gadget.onSettingsClosed=SettingsClosed;5 //default width6 varstrWidth="180";7 varstrDis="";8 vartimeTransition=3;9 10 function$(el){returntypeof(el)=="string"?document.getElementById(el):el;}11 functionSettingsClosed(m_event){12 if(m_event.closeAction==m_event.Action.commit){13 strDis=System.Gadget.Settings.readString("dis");14 strvUrl=System.Gadget.Settings.readString("vurl");15 SetGadgetSetting(strDis,strvUrl);16 }17 }18 //初始化gadget，并未其加载默认参数。19 functionInit_gadget(){20 strDis=System.Gadget.Settings.read("dis");21 strUrl=System.Gadget.Settings.read("vurl");22 SetGadgetSetting(strDis,strUrl);23 }24 functionSetGadgetSetting(strFeedback,strUrl){25 switch(strFeedback){26 case"120X90":27 setwd(120,90,strUrl);28 break;29 case"160X120":30 setwd(160,120,strUrl);31 break;32 case"200X150":33 setwd(200,150,strUrl);34 break;35 case"240X180":36 setwd(240,180,strUrl);37 break;38 case"280X210":39 setwd(280,210,strUrl);40 break;41 case"320X240":42 setwd(320,240,strUrl);43 break;44 default:45 setwd(120,90,strUrl);46 break;47 }48 }49 //set the element size50 functionsetwd(intwid,inthid,strUrl){51 debugger;52 $("gb").style.width=intwid;53 $("gb").style.height=inthid+2;54 defURL="http://www.tudou.com/l/e3MBzOUVNaQ"55 56 src="<embed src='$URL' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' id='elpy' name='elpy' width='"+intwid+"' height='"+inthid+"'></embed>"57 if(strUrl.length>1){58 $("palyerHoder").innerHTML=src.replace("$URL",strUrl);59 }60 else61 $("palyerHoder").innerHTML=src.replace("$URL",defURL);62 63 }

e.修改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"onLoad="Init_gadget()">11 <divid="palyerHoder">12 </div>13 </body>14 

f.发布Gadget。效果如下

步骤二:为边栏Gadget添加Dock属性，使其在Dock状态下视频尺寸变大。

a.在video.js中添加如下代码，使其在Dock状态下尺寸变为系统设定的尺寸，而在非Dock状态下尺寸设定为360X270.

1 //define dock event2 System.Gadget.onDock = CheckDockState;3 //define undock event4 System.Gadget.onUndock = CheckDockState;5 6 function CheckDockState(){7 System.Gadget.beginTransition();8 9 var oBody = document.body.style;10 if (System.Gadget.docked){11 SetGadgetSetting(System.Gadget.Settings.readString("dis"),"");12 }13 else{14 setwd(360,270,"");15 }16 System.Gadget.endTransition(System.Gadget.TransitionType.morph, timeTransition);17 

b.发布Gadget，效果如图一。

点击此下载代码

转载于:https://www.cnblogs.com/netwenchao/archive/2009/08/03/1537622.html

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

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

    相信朋友们总有这样的经历:通过视频站点看电视剧,由于种种原因全屏时候某个程序(word,Excel)等,而又不想错过看电视剧的机会.看看屏幕右侧边栏上的时钟,主意来咯,要是能够把站点的页面放在边栏上就 ...

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

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

  3. SAP RETAIL 参考PO创建分配表之二

    SAP RETAIL 参考PO创建分配表之二 SAP里的分配表,是可以参考采购订单来创建的.这里的采购订单,主要是STO,比如从DC转入门店,或者门店之间调货的STO. 1,采购订单号:4500000 ...

  4. ASP.NET Web API 过滤器创建、执行过程(二)

    ASP.NET Web API 过滤器创建.执行过程(二) 前言 前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...

  5. python创建列表_python创建与遍历List二维列表的方法

    python 创建List二维列表 lists = [[] for i in range(3)] # 创建的是多行三列的二维列表 for i in range(3): lists[0].append( ...

  6. 使用.NET Core创建Windows服务（二） - 使用Topshelf方式

    原文:Creating Windows Services In .NET Core – Part 2 – The "Topshelf" Way 作者:Dotnet Core Tut ...

  7. 一步步手动实现热修复(二)-类的加载机制简要介绍

    *本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 本节课程主要分为3块: 1.一步步手动实现热修复(一)-dex文件的生成与加载 2.一步步手动实现热修复(二)-类的加载机制简要介 ...

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

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

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

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

最新文章

  1. 从源码分析DEARGUI之add_drag_float和4
  2. OpenYurt — Yurtctl
  3. [UVa10296]Jogging Trails
  4. 10.31T4 HAOI2010最长公共子序列 计数+容斥原理
  5. k8s创建pod加入容器_K8S架构原理及其工作流程
  6. Java中的值类型：为什么它们不可变？
  7. LSGO软件技术团队2015~2016学年第九周（1026~1101）总结
  8. 远程协助计算机是灰色的,服务器远程协助是灰色的
  9. 高平二中2021高考成绩查询,录取信息
  10. Unity推出2D工具:不再只是3D引擎
  11. web.config 加密/解密
  12. jmeter监控服务器的方法
  13. vue项目使用eslint和prettier格式化项目
  14. 计算图片中矩形间的IOU
  15. 假期北京旅游请注意了！
  16. HTML/CSS学习笔记（1）
  17. python cherry 用法
  18. ppt如何替换其他mo ban_吴军老师《P荆斩棘, P沙捡金,T纲挈领 :职场PPT制作与呈现技巧》课程大纲...
  19. python刷微博关注_[代码全屏查看]-python刷新浪微博粉丝
  20. linux网络测速qerf,yabo413.com

热门文章

  1. 突然不能 ip访问服务器文件夹,用友U8 工作站连接不到服务器,ping IP及服务器名都正常，访问服务器共享文件夹也正常...
  2. json动画_three.js动画（四）
  3. java方法的定义格式
  4. Idea 设置Eclipse快捷键（常用）
  5. 洛谷p2234/BZOJ1588 [HNOI2002]营业额统计
  6. 10.static_extern
  7. Struts2结果跳转方式
  8. 计算机组成原理——关于数据对齐存储
  9. Java面向对象（4） ——多态
  10. g++ linux 编译开栈_方舟编译器编译hello world踩坑全记录