在学习 Google Gadget, 敲了书上的一个小例子, 放在这里吧:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Mini Stock" height="140" scrolling="true"
description="Mini Storck, Gadget A, B, C"
author="xxxx" author_email="xxxx@gmail.com"
author_location="beijing, China">
<Require feature="dynamic-height"/>
<Require feature="setprefs"/>
<Require feature="tabs"/>
</ModulePrefs>
<UserPref name="idList" display_name="Stock ID list" datatype="list" required="true" default_value="600030|600036" />
<UserPref name="selectedTab" datatype="hidden"/>
<Content type="html" view="home,canvas">
<![CDATA[
<style type="text/css">
<!--
body, html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 12px;
font-family: Verdana,Arial,sans-serif;
}
//-->
</style>
<script type="text/javascript" >
var prefs = new gadgets.Prefs();
var ids = prefs.getArray("idList");
var tabs = null;
function viewStockInTab(stockId) {
var tabId = tabs.addTab(""+stockId);
var tabStock = document.getElementById(tabId);
//tabStock.style.display = "block";
tabStock.innerHTML = "<img width=\"500\" height=\"342\" src=\"http://www.google.com/finance/getchart?q="+stockId+"\">";
var tabArray = tabs.getTabs();
var tab = tabArray[tabArray.length-1];
tabs.setSelectedTab(tab.getIndex());
gadgets.window.adjustHeight();
}
function jsOver(obj) {
obj.style.backgroundColor="yellow";
obj.style.cursor="pointer";
}
function jsOut(obj) {
obj.style.backgroundColor="white";
obj.style.cursor="default";
}
function updateAllStock(responseJson) {
//check
var ds = null;
//alert(responseJson.data);
try{
ds = eval(responseJson.data.substring(3));
}catch(e){
}
//alert(ds);
if(ds == null || ds == false){
return;
}
//set data
var htmlData = "<table>";
for(d in ds){
htmlData += "<tr onMouseOver=\"jsOver(this);\" onMouseout=\"jsOut(this);\" οnclick=\"viewStockInTab("+ds[d].t+");return false;\"><td>"+ds[d].lname+"</td>";
htmlData += "<td>"+ds[d].l+"</td>";
htmlData += "<td>"+ds[d].c+"</td>";
htmlData += "<td>"+ds[d].cp+"%</td></tr>";
}
htmlData += "</table>";
//alert(htmlData);
var element = document.getElementById('div_main');
element.innerHTML = htmlData;
tabs.setSelectedTab(0);
gadgets.window.adjustHeight();
}
function showStocks() {
var url = "http://www.google.cn/finance/info?q=";
for(k in ids){
if(k>0){
url += ",";
}
url += ids[k];
}
url += "&infotype=infoquoteall";
//alert(url);
gadgets.io.makeRequest(url,updateAllStock);
}
function init(){
tabs = new gadgets.TabSet(__MODULE_ID__, "Main");// create tab
tabs.addTab("main", "div_main");
var element = document.getElementById('div_main');
element.style.display = "block";
//element.innerHTML = "idList:" + ids;
showStocks();
// Tells gadget to resize itself
//gadgets.window.adjustHeight();
}
function addAStock(){
var stockId = document.getElementById('stockId').value;
if(!stockId || stockId.length != 6){
alert("Please input a stock ID");
return;
}
ids.push(stockId);
prefs.setArray("idList",ids);
showStocks();
//var element = document.getElementById('div_main');
//element.innerHTML = "idList:" + ids;
//gadgets.window.adjustHeight();
}
gadgets.util.registerOnLoadHandler(init);
</script>
<div id="div_main"></div>
<div id="div_add">
<form action="javascript:void(0);" method="GET">
<input type="text" id="stockId" name="stockId"/>
<input type="submit" value="Add a stock" οnclick="addAStock(); return false;" />
</form>
</div>
]]>
</Content>
</Module>
效果如图: