Google Gadgets 小例子

原创于 2012-06-04 14:40:12 发布 · 880 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#google #function #div #url #tabs

本文通过一个具体的示例介绍了如何使用Google Gadget来创建一个股票查看小工具。该小工具可以展示不同股票的实时信息，并允许用户添加新的股票进行跟踪。

在学习 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);\" onclick=\"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" onclick="addAStock(); return false;" />
			    </form>
			</div>
		]]>
	</Content>
</Module>

效果如图: