一步步創建邊欄 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:  <input?type="text"??id="txturl"?name="txturl"?size="14"?value=""/></li>
16?????????<li>DIS:    <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?????????<a?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.pswp.cn/news/274887.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/274887.shtml
英文地址，請注明出處：http://en.pswp.cn/news/274887.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！