第三步:設(shè)置定時(shí)更新數(shù)據(jù)。
我們設(shè)置每 1 分鐘更新一次數(shù)據(jù):
setInterval( function() { update(widget) }, 60*1000 );
第四步:設(shè)置點(diǎn)擊擴(kuò)展后的鏈接窗口。
$(widget).click(function() { //設(shè)置點(diǎn)擊擴(kuò)展后的鏈接窗口 jetpack.tabs.open(" jetpack.tabs[ jetpack.tabs.length-1 ].focus(); });
jetpack.tabs 為瀏覽器窗口的標(biāo)簽對象,.open(url) 為新打開瀏覽器窗口標(biāo)簽的方法,.focus()為選中此標(biāo)簽為當(dāng)前標(biāo)簽的方法。
OK,F(xiàn)irefox 的 Jetpack 擴(kuò)展——Gmail 郵件提醒,經(jīng)過簡單的四步輕松完成。
全部代碼如下:
var count = 0; function update(widget) { var widget = $(widget), notify = function(msg) { // 定義通知的公用方法 jetpack.notifications.show({ title: "Gmail", body: msg, icon: " }); }; $.get(" var el = $(xml).find("fullcount"); // 記錄未讀新郵件數(shù)的節(jié)點(diǎn) if(el){ var newcount = parseInt(el.get(0).textContent); if(newcount > count) { // 如果未讀新郵件數(shù)大于原來的郵件數(shù),則提示來自哪里 var sender = $(xml).find("name").get(0).textContent; notify("New message from "+sender); } count = newcount; widget.find("#count").text(count); //賦給指定的元素 } else { //如果未登錄,提示登錄 widget.find("#count").text( "Login" ); notify("Please login to Gmail"); } }); } jetpack.statusBar.append({ html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail郵件圖標(biāo)和未讀新郵件數(shù) width: 40, //狀態(tài)欄上的寬度為40,預(yù)留3位數(shù)的寬度 onReady: function(widget) { $("#count", widget).css({ //給未讀新郵件數(shù)添加樣式 cursor: "pointer", paddingLeft:"4px", fontFamily: "Tahoma, Arial, sans-serif", verticalAlign: "top", fontSize: "10px", lineHeight:"18px", }); $(widget).click(function() { //設(shè)置點(diǎn)擊擴(kuò)展后的鏈接窗口 jetpack.tabs.open(" jetpack.tabs[ jetpack.tabs.length-1 ].focus(); }); update(widget); setInterval( function() {update(widget) }, 60*1000 ); } });
測試Demo:http://www.planabc.net/lab/jetpack/gmail/
對于 Jetpack 詳細(xì)的 API,可以閱讀 about:jetpack 頁面的 API Reference 標(biāo)簽部分。
案例源碼來自:https://jetpack.mozillalabs.com/demos/gmail-checker.js
原文:http://www.planabc.net/2009/10/14/jetpack_gmail_checker/
本文鏈接:http://www.95time.cn/tech/web/2009/7085.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 Firefox的Jetpack擴(kuò)展案例分析 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|