用 Pinify 將你的網站固定到 Windows 7 的任務欄中

微軟在 IE9 中引入一個叫 ‘Site Pinning’ 的功能，該功能僅在 Windows 7 下能用。該功能允許用戶將某個網站固定在任務欄中，并可直接點擊打開該網站，就像其他應用程序一般。

而 Pinify 就是這樣一個 jQuery 的插件（前身是 ie9ify）可讓開發者模擬上述工具，讓網站看起來像是一個桌面程序一般，不僅可以固定到任務欄還提供了一些附加的功能特性。

要求

Pinify 插件可從 http://bsatrom.github.com/pinify/ 這里下載，它要求 jQuery 1.5 或者更高的版本，要求 IE9 或者更新的瀏覽器。

開始使用

Pinify 插件包含下面兩個功能：

• 將網站固定到任務欄中
• 提供一些工具函數用來給固定到任務欄的網站增加一些類似桌面應用的體驗功能

固定網站到任務欄

為了固定網站到任務欄，我們需要拖動 IE9 瀏覽器的 tab 欄到任務欄中，該插件就可以實現將網站固定到任務欄，Pinify 的方法定義如下：

$(selector).pinify(functionName, options);

其中參數 functionName 和 options 并不是必填的，默認的會調用 init 方法，該方法將手機網站信息并填充一些不同的元數據，通常的話使用 head 元素作為指定的選擇器：

$(‘head’).pinify(); 

但是，站長其實并不知道網站是否可以被固定到任務欄，這是網站開發者的責任，他需要在用戶瀏覽器支持的情況下告知此功能。例如他可以在網頁上的banner條上添加一個圖片，并指示用戶將該圖片拖拽到系統的任務欄。為了允許固定網頁上的任何元素，functionName 必須指定為 enablePinning，同時可以在圖片上顯示一個hover提示信息告知用戶此功能。pinify 函數本身可以指定這個提示信息，例如：

$(‘img’).pinify(‘enablePinning’,’請將我拖到任務欄上:)’);

另外也可以在頁面上顯示一個提示信息：

$('#header').pinify('pinTeaser', {   
    icon: 'favicon.ico',
    pinText: 'Drag this image to the taskbar to pin this site',
    textColor: 'white',
    mainContentSelector: '#body'
});

如下圖所示：

Pinify 也可以將網站固定到開始菜單中，只需要將 functionName 設置為 enableSiteMode ，一定點擊指定頁面元素，便會彈出對話框讓用戶確認是否將網站固定到開始菜單。

$(‘a’).pinify(‘enableSiteMode’,click);

該函數也可以使用其他種類的事件來觸發，該事件可以作為第二個參數傳遞給pinify，如果不指定的話，默認就是點擊事件。彈出的提示對話框如下圖所示：

定制固定的網站

一旦網站被固定到了任務欄，可以通過 width 和 height 參數來自設定打開瀏覽器的大小，也可以設置網站圖標、默認打開的網址、應用名稱、工具提示和任務等，其中任務可以是導航鏈接或者是網站的功能。這使得用戶可以無需訪問網站首頁直奔主題。

下面是完整的定制方法：

$('head').pinify({
                applicationName: 'mySite1',
                favIcon: 'sample_icon.ico',
                navColor: 'Black',
                startUrl: '/sample/pinify_simple.html',
                tooltip: 'mySite',
                window: 'width=800;height=600',
                tasks: [
             {
                     'name': 'jQuery 推ter feed',
                             'action': 'http://推ter.com/jQuery',
                             'icon': 'http://jquery.com/favicon.ico'
                    },
                  {
                             'name': 'Microsoft blog',
                             'action': 'http://blogs.technet.com/b/microsoft_blog/',
                             'icon': 'http://blogs.technet.com/themes/wireframe/favicon.ico'
                    }]
 });

當右擊被固定的網站時，一個選項菜單就會顯示，如下圖所示。該選項菜單可顯示多達5個項。

工具函數 Utility Functions

Pinify 插件包含很多工具函數，這些函數可讓你方便的調用 IE9 提供的新功能，讓你的網站看起來更像是一個桌面程序。同時，這些函數還可以執行瀏覽器特定的檢查和異常處理。

檢查網站是否已經固定到任務欄

如果網站已經是固定到任務欄了，那就沒必要再提示用戶，我們可以使用 Pinify 提供的 isPinned 方法來判斷，如果返回 true 則表示網站已經固定到任務欄了。

$.pinify.isPinned();

檢查首次運行狀態

在某些時候，需要知道被固定的網站是否是首次點擊打開，如果是第一次點擊打開的話，就會有方法被觸發，而 firstRunState 函數就是用來確定是否首次運行。如果該函數返回0表示網站還沒有被固定到任務欄或者是該網站尚未被點擊打開過；返回1表示首次從任務欄運行，返回2表示首次從開始菜單中運行。

$.pinify.firstRunState();

添加跳轉列表

當右擊被固定的網站圖標時，會顯示一個選項菜單，菜單中是包含一些特定任務的列表。我們剛才提到過的，你可以通過 pinify 函數往這個菜單添加導航鏈接。

同時該插件還提供一個函數用來動態添加導航鏈接，例如一個購物網站可以再添加一個“我的購物車”、“我的個人中心”等鏈接：

$.pinify.addJumpList(options);

調用示例：

$.pinify.addJumpList({
                title: 'My stuff',
                items: [
            {
                name: 'Recently viewed books',
                url: '/recentlyView.html',
                icon: 'book.ico'
            },
            {
                name: 'New book releases',
                url: '/newBookReleases.html',
                icon: 'recent.ico'
            }
        ]
});

這樣，一個包含在類別 My Stuff 的跳轉列表就顯示在 Tasks 類別之上（如下圖），如果用戶希望查看最近閱讀的小說，那么通過點擊這個列表就可以快速進入。開發者還可以添加用戶可能會感興趣的其他鏈接。

刪除跳轉列表

清空跳轉列表很簡單，直接調用 clearJumpList 方法即可：

$.pinify.clearJumpList();

創建縮略圖工具欄

在 Windows 7 中，當鼠標移動任務欄按鈕之上，便會顯示該程序運行的縮略圖，某些應用會顯示一些預覽圖等，例如當鼠標放在媒體播放器之上，便會顯示當前專輯的封面。縮略圖同時還提供一些常用操作，例如上一個、播放、暫停、下一個等等，用來控制播放器的動作。

同樣的，當用戶將鼠標放到網站圖標之上時，也會顯示網站的縮略圖，而 createThumbbarButtons 方法可以讓開發者添加一組按鈕到在縮略圖顯示的下方，用于控制網站的行為，例如可以提供 ‘首頁’, ‘搜索’ 以及 ‘聯系我們’ 等按鈕，當點擊這些按鈕時就可以打開相應的頁面，createThumbbarButtons 方法定義如下：

$.pinify.createThumbbarButtons(options);

示例代碼：

$.pinify.createThumbbarButtons({
        buttons: [
                {
                    name: 'Home',
                    icon: 'Home.ico',
                    click: function() {
                        document.location = "home.html"
                    }
                },
                {
                    name: 'Contact Us',
                    icon: 'email-icon.ico',
                    click: function() {
                        document.location = "contact_us.html"
                    }
                }
             ]
});

顯示提醒

很多 Web 應用檢索新數據的時候，需要固定間隔的往服務器發送請求，如果有新的數據時便更新網頁或者網頁上的某一部分內容。Pinify 插件提供了函數讓開發者可以在固定的網站圖標上執行閃動和添加提醒圖標，當然這個提醒的前提是用戶當前已經打開了該網站。

通過添加重疊的圖標來顯示提醒

重疊的圖標是一些小圖標繪制在另外一些小圖標之上，Windows 使用這些圖標來區分不同的狀態，例如在一個文件圖標上添加一個小箭頭表示這是一個指向某個文件的快捷方式。同樣，對一個 Web 應用而言，一個重疊的圖標可以只是用戶網站有什么新內容或者其他變化。在 Pinify 中，重疊圖標會顯示在任務欄圖標的右下方。

可以使用 addOverlay 來添加重疊圖標：

$.pinify.addOverlay(options);

示例代碼：

$.pinify.addOverlay({
           title: 'New Message',
           icon: 'newmessage.ico'
});

一旦用戶恢復了瀏覽器窗口，重疊的圖標便會被移除，clearOverlay 方法可以用來清除重疊圖標：

$.pinify.clearOverlay();

通過閃動任務欄圖標來提醒

另外一個提醒的方法是圖標閃動，通過 flashTaskbar 方法可以實現閃動，閃動的前提是瀏覽器窗口已經被最小化了。

該函數僅用于非常重要的提醒需要用戶立即關注，例如登錄會話將失效之類的：

$.pinify.flashTaskbar();

總結

Pinify 插件可以讓開發者為網站添加一些 IE9 上才有的特性，開發者可以為網站提供一些類似桌面應用才有的特性。一個字：酷！

最后說明下：Pinify 只支持 Windows 7 下的 IE9！