DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Jetpack擴展案例:Gmail郵件提醒功能
Jetpack擴展案例:Gmail郵件提醒功能
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:Firefox 的 Jetpack 擴展案例分析:Gmail 郵件提醒.

Firefox 的 Jetpack 擴展案例分析:Gmail 郵件提醒

Gtalk 軟件的最下方有個很好又很實用的功能,就是 Gmail 郵件提醒功能。會定時更新你 Gmail 中未讀新郵件的數量。

試想如果我們將此功能移植到 Firefox 上一定有趣!

第一步,在狀態欄中顯示圖標和數據

通過 《如何創建 Firefox 的 Jetpack 擴展》 這篇文章,我們可以輕易的創建:

jetpack.statusBar.append({
    html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail郵件圖標和未讀新郵件數
    width: 55, //狀態欄上的寬度為55
    onReady: function(widget) {
        $("#count", widget).css({ //給未讀新郵件數添加樣式
            cursor: "pointer",
            paddingLeft:"4px",
            fontFamily: "Tahoma, Arial, sans-serif",
            verticalAlign: "top",
            fontSize: "10px",
            lineHeight:"18px",
        });
    }
});

第二步,獲取 Gmail 的數據,更新未讀新郵件數

可以通過 Gmail 郵件的 Feed 獲得(需登錄):https://mail.google.com/mail/feed/atom

Feed 源碼中的 fullcount 標簽是用來記錄當前的未讀新郵件數。

OK,首先數據源有了。接著,我們使用再熟悉不過的 Ajax 技術,獲取到數據並賦給指定的元素。

function update(widget) {
    var widget = $(widget);
    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 記錄未讀新郵件數的節點
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            widget.find("#count").text(newcount); //賦給指定的元素
        } else { //如果未登錄,顯示“Login”
            widget.find("#count").text( "Login" );
        }
    });
}

我們還可以通過進行一些優化:比如當未讀新郵件數大於原來的郵件數時,增加提示信息等。
提示信息這裡使用 jetpack.notifications.show(options) 方法,options 參數有三個屬性:title (String):通知的標題;icon (URL):通知 icon 的 URL;body (String):通知的主題內容。

優化後的代碼如下:

function update(widget) {
    var widget = $(widget),
        notify = function(msg) { // 定義通知的公用方法
            jetpack.notifications.show({
                title: "Gmail",
                body: msg,
                icon: "http://mail.google.com/mail/images/favicon.ico"
            });
        };
    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 記錄未讀新郵件數的節點
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            if(newcount > count) { // 如果未讀新郵件數大於原來的郵件數,則提示來自哪裡
                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");
        }
    });
}

第三步:設置定時更新數據

我們設置每 1 分鐘更新一次數據:

setInterval( function() { update(widget) }, 60*1000 );

第四步:設置點擊擴展後的鏈接窗口

$(widget).click(function() { //設置點擊擴展後的鏈接窗口
    jetpack.tabs.open("http://mail.google.com");
    jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});

jetpack.tabs 為浏覽器窗口的標簽對象,.open(url) 為新打開浏覽器窗口標簽的方法,.focus()為選中此標簽為當前標簽的方法。

OK,Firefox 的 Jetpack 擴展——Gmail 郵件提醒,經過簡單的四步輕松完成。

全部代碼如下:

var count = 0;
function update(widget) {
    var widget = $(widget),
        notify = function(msg) { // 定義通知的公用方法
            jetpack.notifications.show({
                title: "Gmail",
                body: msg,
                icon: "http://mail.google.com/mail/images/favicon.ico"
            });
        };
    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 記錄未讀新郵件數的節點
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            if(newcount > count) { // 如果未讀新郵件數大於原來的郵件數,則提示來自哪裡
                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郵件圖標和未讀新郵件數
    width: 40, //狀態欄上的寬度為40,預留3位數的寬度
    onReady: function(widget) {
        $("#count", widget).css({ //給未讀新郵件數添加樣式
            cursor: "pointer",
            paddingLeft:"4px",
            fontFamily: "Tahoma, Arial, sans-serif",
            verticalAlign: "top",
            fontSize: "10px",
            lineHeight:"18px",
        });        $(widget).click(function() { //設置點擊擴展後的鏈接窗口
            jetpack.tabs.open("http://mail.google.com");
            jetpack.tabs[ jetpack.tabs.length-1 ].focus();
        }); 
       update(widget);
        setInterval( function() {update(widget) }, 60*1000 );   
}
});

測試Demo:http://www.planabc.net/lab/jetpack/gmail/

對於 Jetpack 詳細的 API,可以閱讀 about:jetpack 頁面的 API Reference 標簽部分。

案例源碼來自:https://jetpack.mozillalabs.com/demos/gmail-checker.js

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved