2014年5月7日 星期三

[桌面小工具] 黃金即時報價 製作

win7 桌面小工具簡單製作
[1] 準備xml檔，設定來源為要顯示的html檔(如goldprice.html)，範例如下
<gadget>
<name>SDK Hello World</name>
<version>1.0.0.0</version>
<author name="Microsoft">
    <info url="msdn.microsoft.com" />
</author>
<copyright>&#169; Microsoft Corporation.</copyright>
<description>"HelloWorld" Sidebar gadget sample.</description>
<hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="goldprice.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
</hosts>
</gadget>
[2] 準備html(goldprice.html)檔，截取一部分的網頁內容，並調整適當大小，和設定背景圖片(自行準備)，並設定２分鐘更新一次網頁，須自行修改網頁代碼(不另說明)，範例如下
<html >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
        <title>Hello World</title>
        <style type="text/css">
        body
        {
            margin: 0;
            width: 400px;
            height: 150px;
            font-family: verdana;
            font-weight: bold;
            font-size: small;
        }


        #gadgetContent
        {
            margin-top: 20px;
            width: 800px;
	    height: 150px;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>
        <script type="text/jscript" language="jscript">
			setTimeout("self.location.reload();",60000);
            // Initialize the gadget.
            function init()
            {
                var oBackground = document.getElementById("imgBackground");
                oBackground.src = "url(whiteback.png)";
            }
        </script>
		<link rel="stylesheet" type="text/css" href="http://img.hexun.com.tw/gold/2010/gold.css" />
		<script language="javascript" src="http://img.hexun.com.tw/www/2010/js/tab.js"></script>
    </head>

    <body>
		<style type="text/css">
		.newgp0124{width:380px;float:left;margin:10px;display:inline;overflow:hidden;height:130px;margin-left:30px;}
		.gpcont{ height:124px; padding:6px 10px 0 10px;border:#cbcdcc 1px solid; border-top:none; float:left; width:278px; overflow:hidden;}
		.righttag{}
			 
		.tagn,.tagf{  padding:5px 7px;text-align:center; cursor:pointer;}
		.tagn{border-bottom:#cbcdcc 1px solid;}
		.tagf{ border:#cbcdcc 1px solid; border-right:#cbcdcc 1px solid;border-bottom:none;color:#000;}
		.hexunHidden{display:none}
		.hexunShow{display:block}
		#righttag tr td a {color:#707070;text-decoration:none;}
		#righttag tr td.tagf a {color:#000;}
		.goldHqContainer {width:958px;overflow:hidden;margin:10px auto;border:1px solid #ccc;}
		.msgContainer {position:relative;width:380px;height:85px;z-index:1;overflow:hidden;top:10px;}
		.currentImg {position:absolute;top:-15px;}

		.fixedMsg {width:500px;float:left;height:130px;margin-top:10px;display:inline;margin-left:30px;}
		.fixedMsg table tr td a {text-decoration:none;color:#000;}
		.imgDateShow {width:180px;height:85px;float:right;}
		.imgDateTop {overflow:hidden;}
		.imgDateTop img {width:35px;height:47px;float:left;margin-top:12px;}
		.imgDateNumber {padding-left:10px;float:left;display:inline;font-family:Arial;}
		.imgDateNumber strong {display:block;font-size:30px;color:#009900;line-height:28px;margin-top:10px;}
		.imgDateNumber span {display:inline-block;margin-left:5px;margin-right:5px;color:#090;font-size:14px;}
		.imgDateBottom {color:#ccc;margin-top:3px;text-align:center;}
		.rightMsg td {height:42px;text-align:center;cursor:pointer;}
		.currentTab {width:99px;border:1px solid #ECECEC;border-right:none;}
		.noTab {border-right:1px solid #ECECEC;}
		.rightMsg td div {background:#fff;}
		.rightMsg .noTab div {width:96px;height:38px;background:#F5F5F5;margin-top:1px;margin-left:0;float:left;line-height:38px;}
		.showMsgLayer {float:left;width:380px;margin-left:20px;display:inline;overflow:hidden;}

		.showLayer1 dl{float:left;width:180px;overflow:hidden;margin-top:12px;margin-right:10px;}
		.showLayer1 dl dt {float:left;color:#336699;width:50px;}
		.showLayer1 dl dd {float:left;display:inline;margin-left:6px;overflow:hidden;text-align:right;}
		.showLayer1 dl dd.last {width:15px;}
		.showMsgLayer th {font-weight:normal;color:#ccc;}
		.showLayer1 table tr td {font-family:Arial;}  </style>
		<script type="text/javascript" src="http://img.hexun.com.tw/gold/js/hexun.index.gold.js"></script>
		<div class="newgp0124">
				<table width="100%" border="0" cellspacing="0" cellpadding="0"  class="righttag" id="righttag">
					<tr>
						<td class="tagf"  id="tagname_nowhot1"><a href="http://gold.hexun.com.tw/hjxh/" target="_blank">黃金</a></td>
									</tr>
				</table>
				<div class="msgContainer">
					<a href="###" target="_blank"><img class="currentImg" id="currentImg" src="http://dfile.tool.hexun.com.tw/homepage/gold/img/avgprice.gif?1379919748215" /></a>
					<div class="imgDateShow" id="imgDateShow">
						<!--div class="imgDateTop">
							<img src="down.gif" />
							<div class="imgDateNumber">
								<strong>2447.31</strong>
								<span>-100.00</span><span>-0.05%</span>
							</div>
						</div>
						<div class="imgDateBottom">2013年9月18日 11：59 北京時間</div-->
					</div>
				</div>
		</div>
		<script type="text/javascript">
			hexun.index.Gold.get().init();
		</script>
    </body>
</html>
[3]  將做好的網頁(包含xml,圖檔等)壓縮成zip檔，之後更改副檔名為.gadget
[4]  執行.gadget檔就可以安裝，並出現在桌面，可再自行設定不透明度等

[5]  安裝完成應該會出現在使用者路徑的 AppData\Local\Microsoft\Windows Sidebar
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)