一步步创建 边栏 Gadget(二)

    相信使用上篇中创建的边栏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         <script type="text/javascript" src="js/setting.js"></script>
 6     <style type="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     <body onLoad="loadsett()">
14     <ul>
15         <li>URL:&nbsp;&nbsp;<input type="text"  id="txturl" name="txturl" size="14" value=""/></li>
16         <li>DIS:&nbsp;&nbsp;&nbsp;&nbsp;<select id="seldis" name="seldis">
17             <option value="120X90">120X90</option>
18             <option value="160X120">160X120</option>
19             <option value="200X150">200X150</option>
20             <option value="240X180">240X180</option>
21             <option value="280X210">280X210</option>
22             <option value="320X240">320X240</option>
23             </select>
24         </li>
25     </ul>
26     <hr/>
27     <div style="text-align:center;">
28         <href="http://netwenchao.cnblogs.com">更多信息请访问Denny.dong</a>
29     </div>
30     </body>
31 

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

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

 1 var dfUrl="http://www.tudou.com/l/e3MBzOUVNaQ";
 2 function procSettingsClosingEvent(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 function loadsett()
11 {
12     var gSE="";
13     var gUrl="";
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){return typeof(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 width
 6 var strWidth="180";
 7 var strDis="";
 8 var timeTransition=3;
 9 
10 function $(el){return typeof(el)=="string"?document.getElementById(el):el;}
11 function SettingsClosed(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 function Init_gadget(){
20     strDis=System.Gadget.Settings.read("dis");
21     strUrl=System.Gadget.Settings.read("vurl");
22     SetGadgetSetting(strDis,strUrl);
23 }
24 function SetGadgetSetting(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 size
50 function setwd(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     else
61         $("palyerHoder").innerHTML=src.replace("$URL",defURL);
62 
63 }

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

f.发布Gadget效果如下

                     
 

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

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

 

 1 //define dock event
 2 System.Gadget.onDock = CheckDockState;
 3 //define undock event
 4 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274887.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tableau 自定义图表_一种新的十六进制美国地图布局的案例-Tableau中的自定义图表

tableau 自定义图表For whatever reason, 无论出于什么原因 maps are cool. Even though the earth has mostly been the same since those 地图很酷 。 即使自Pangaea days, we humans make and remake maps constantly. It might be that old maps remind us of how things …

2022,前端工具链十年盘点

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列2021 …

书籍排版学习心得_为什么排版是您可以学习的最佳技能

书籍排版学习心得重点 (Top highlight)I was introduced to design in a serpentine fashion. I don’t have any formal training. Instead, I’ve learned everything through the Web, books, and by interacting with designers daily.我被介绍为蛇形设计。 我没有任何正规…

若川的 2021 年度总结,弹指之间

1前言从2014年开始&#xff0c;每一年都会写年度总结&#xff0c;已经坚持了7个年头。7年的光阴就是弹指之间&#xff0c;转瞬即逝。正如孔子所说&#xff1a;逝者如斯夫&#xff0c;不舍昼夜。回顾2014&#xff0c;约定2015&#xff08;QQ空间日志&#xff09;2015年总结&…

线框图用什么软件_为什么要在线框中着色?

线框图用什么软件I was recently involved in a debate around why some wireframes (which were definitely not UI screens) were not 100% greyscale. This got me thinking — when is it ok to use colour in wireframes, and when is it going to cause you problems fur…

Linux 内核

Linux 内核是一个庞大而复杂的操作系统的核心&#xff0c;不过尽管庞大&#xff0c;但是却采用子系统和分层的概念很好地进行了组织。通过本专题&#xff0c;我们可以学习 Linux 的分层架构、内核配置和编译、内核性能调试和 Linux 2.6 中的许多提升功能。Linux 内核组成 Linux…

给asterisk写app供CLI调用

环境&#xff1a;CentOS6.2 Asterisk 1.8.7.1 一、添加源文件 复制app_verbose.c为app_testApp.c 复制app_verbose.exports为app_testApp.exports 主要是修改一些标识&#xff0c;编译不会出错就行&#xff0c;这里列出我进行的主要修改。 1、添加头文件 #include "aster…

前端,校招,面淘宝,指南

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列虽然是…

qq空间网页设计_网页设计中负空间的有效利用

qq空间网页设计Written by Alan Smith由艾伦史密斯 ( Alan Smith)撰写 Negative space is a key design element that you may come across in the fields of art, architecture, interior design, landscaping and web design. Rather than serving as awkward, empty areas …

Git 和 GitHub 教程——版本控制入门

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列Learn…

matlab中的:的优先级_内容早期设计:内容优先

matlab中的:的优先级By Simone Ehrlich, Content Strategy Manager由 西蒙埃利希 &#xff0c;内容策略经理 Words are cheap. Cheaper than wires; cheaper than mocks. That doesn’t mean words aren’t important, just less expensive to produce as a design asset. So …

我真的哭了,哭过后呢(-)

这些是山区的孩子们&#xff01; 这是他们的教室。这个也算是&#xff01;如此的师资力量自己解决吃饭问题冬天到了&#xff0c;一起烤烤火与泥土污水一起还好&#xff0c;最大的数字只是10老师抱着孩子来给我们上课了不知道山那边会是什么呢&#xff1f;又一双充满了渴望的大眼…

脑裂问题解决方案_从解决方案到问题

脑裂问题解决方案Once upon a time a couple of years ago, one of my mentors (and favourite people in the world) repeatedly drilled the idea above into my brain. Her advice for Product people was to “fall in love with the problem, not the solution”. At the …

Vue.js 官方团队成员霍春阳新作,深入解析 Vue.js 设计细节【文末送书】

霍春阳&#xff08;Hcy&#xff09;&#xff0c;Vue.js 官方团队成员。专注于 Web 研发领域&#xff0c;是 Vue.js 3 的核心贡献者之一&#xff0c;Vue.js 文档生成工具 Vuese 的作者&#xff0c;技术社区活跃者&#xff0c;曾撰写大量颇受好评的技术博客。经过一年的准备&…

LINQ之路 5:LINQ查询表达式

书写LINQ查询时又两种语法可供选择&#xff1a;方法语法&#xff08;Fluent Syntax&#xff09;和查询表达式&#xff08;Query Expression&#xff09;。 LINQ方法语法的本质是通过扩展方法和Lambda表达式来创建查询。C# 3.0对于LINQ表达式还引入了声明式的查询表达式&#xf…

调查谋杀案以换取Obra Dinn

回顾性 (RETROSPECTIVE) I am not sure if this is intentional, but Lucas Pope has a knack for turning the mundane into something special. This was evident in his release of Papers Please. In that game, you’re a border patrolman trying to provide for your fa…

9年前的大一,我们这样为女生过37女生节【祝节日快乐】

这是一篇水文~没啥目的&#xff0c;若说要有&#xff0c;就是希望大家参加源码共读学起来。公众号后台显示所有读者朋友中大约有23%的女生。前端工程师中女生应该占比相对多些。祝关注我公众号的女生3.7女生节快乐&#xff0c;大部分公司明天应该都有半天假期。可以留言大学时你…

requests模块发送带headers的Get请求和带参数的请求

1.在PyCharm开发工具中新建try_params.py文件&#xff1b; 2.try_params.py文件中编写代码&#xff1a; import requests#设置请求Headers头部header {"User-Agent" : "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;"}#请求输入参数p…

面试官问:跨域请求如何携带cookie?

大家好&#xff0c;我是若‍川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列本文…

ux设计中的各种地图_移动应用程序设计中的常见UX错误

ux设计中的各种地图Have you ever tried a new app, only to realize you have no idea how to use it?您是否曾经尝试过一个新的应用程序&#xff0c;却发现自己不知道如何使用它&#xff1f; Few things can transport a person from calm and happy, to frustrated and an…