# IE9 新功能探索：網頁釘選(Pinning)與捷徑清單(Jump Lists)

IE9 來了，這次在外觀與效能方面都有很大的改變，其中一個有趣的功能就是 IE9 的網頁釘選能力，也就是可以讓使用者將你網站的任一頁釘選到 Windows 7 的工作列上，而且還能讓網頁開發人員設定網頁釘選到工作列的名稱、捷徑清單與自訂圖示等，非常有趣。

我們先來看看設定完成後的效果為何，對使用者來說，使用的方式也很簡單，只要從網址列圖示的地方用滑鼠拖曳到 Windows 7 的工作列即可，如下圖示：

![alt](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9e3167d8c5b2201ffeaa-image_209.png "title")

![alt](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e277ba7eb3e68fbbbde1-image_210.png "title")

![alt](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b22339c64da364c8a8d0-image_211.png "title")

當網址被拖曳到工作列之後，你會發現該頁面頁籤會重新開啟成一個獨立的瀏覽器，而且圖示、上下頁的按鈕顏色會變的跟 Favicon 的顏色一模一樣喔，非常炫麗！

![alt](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a2f2e3eb9acb49973320-image_212.png "title")

如果只是這樣而已當然不值得一提，當你在圖示上方按下滑鼠右鍵還能看到一些 **工作清單** (Tasks) 或稱 **捷徑清單** (Jump Lists)，這些清單的項目名稱、超連結、圖示全都是開發人員可以自訂的喔！

![alt](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4e22e10eaf368681a9be-image_213.png "title")

想實驗的人，當然要先[下載安裝 IE9 Beta](https://support.microsoft.com/en-us/internet-explorer) 才能使用，安裝好的人直接到 [http://www.lativ.com.tw](http://www.lativ.com.tw) 就可以實驗看看了！安裝過程可參考《[\[IE9\]Internet Explorer 9 Beta 下載、安裝與使用心得](https://dotblogs.com.tw/chou/2010/09/15/17734)》文章說明。

接下來就是開發人員專區了：

要做到以上的效果，只要在網頁的 <head> … </head> 區塊加上以下 HTML 即可：

```xml
<link rel="shortcut icon" type="image/x-icon" 
  href="/favicon.ico" sizes="16x16 24x24 32x32 48x48 64x64" />
  
<link rel="icon" type="image/x-icon" 
  href="/favicon.ico" sizes="16x16 24x24 32x32 48x48 64x64" />

<meta name="application-name" content="lativ 國民服飾" />

<meta
  name="msapplication-window"
  content="width=device-width;height=device-height" />
  
<meta
  name="msapplication-tooltip"
  content="lativ 以天然材質、簡單與自由搭配、舒適的穿著為您打造自在的生活著。" />

<meta
  name="msapplication-task" 
  content="name=最新消息;action-uri=/page/news;icon-uri=/favicon.ico" />
<meta
  name="msapplication-task" 
  content="name=WOMEN;action-uri=/WOMEN;icon-uri=/favicon.ico" />
<meta
  name="msapplication-task" 
  content="name=MEN;action-uri=/MEN;icon-uri=/favicon.ico" />
<meta
  name="msapplication-task" 
  content="name=KIDS;action-uri=/KIDS;icon-uri=/favicon.ico" />
<meta
  name="msapplication-task" 
  content="name=NewStyle;action-uri=/Home/NewStyle;icon-uri=/favicon.ico" />
```

至於內容還需要我解釋嗎？應該非常直覺吧！

-   **application-name** 設定應用程式名稱（顯示在工作列的名稱）
-   **msapplication-window** 設定開啟後的視窗大小，可設定 width 與 height 指定固定大小，但若指定 **device-width** 與 **device-height** 的話就代表開啟時要以全螢幕開啟。
-   **msapplication-task** 用來設定 **工作清單** (Tasks) 或 **捷徑清單** (Jump Lists) 的項目。

至於其他可用的 Meta 屬性名稱可參考 [Getting Started with IE9: Pinned Applications and Jumplists](http://www.jonhartmann.com/index.cfm/2010/9/15/Getting-Started-with-IE9-Pinned-Applications-and-Jumplists) 文章或以下的參考連結。

注意：預設工作清單最多只會顯示 5 筆資料

不過，對此功能還是有點小小的抱怨，因為只要拖曳到工作列之後原本的頁面就會被關閉，並重新開啟一個新的視窗，那麼我原先的瀏覽記錄就會全部消失，無法回上一頁！

另外值得一提是，當我們把網址拖曳到任意目錄下，在 IE9 之前的版本都會是以 **\*.url** 網址捷徑的方式存在，但是到了 IE9 似乎已經無法拖曳 \*.url 網址捷徑出來了（ \*.url 可被所有瀏覽器認得 ），而改以另一種新的 **\*.website** 檔案類型儲存，目前這種檔案類型只有 IE9 才認得：

![alt](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/accf6faa58450ca7024a-SNAGHTML1a406aad.png "title")

若要讓 IE9 在拖曳連結時可以改用以往 **\*.url** 網址捷徑的方式，可以在拖曳網址之前先按下 Shift 按鍵，再用滑鼠拖曳到資料夾裡，這樣就能解決這個問題了！

即便缺點是有，但可將網站拖曳到工作列上還蠻酷的，我傳給幾個人看過，大家都覺得很炫！ ^\_^

**相關連結**

-   [How to enable IE9 pinning and JumpLists on your website](https://web.archive.org/web/20100919150010/http://blogs.msdn.com/b/thebeebs/archive/2010/09/16/how-to-add-ie9-beta-pinning-to-you-website.aspx)
-   [IE9 User? You'll Love ‘Pinning’ Your Blog](http://en.blog.wordpress.com/2010/09/17/ie9-user-youll-love-pinning-your-blog/)
-   [A Common mistake with IE9 Pinning](https://web.archive.org/web/20100921074550/http://blogs.msdn.com/b/thebeebs/archive/2010/09/18/a-common-mistake-with-ie9-pinning.aspx)
-   [Jon Hartmann: Getting Started with IE9: Pinned Applications and Jumplists](http://www.jonhartmann.com/index.cfm/2010/9/15/Getting-Started-with-IE9-Pinned-Applications-and-Jumplists)
-   [The Ultimate Guide (of Five Things) for New IE9 users Who Fear Change](http://www.hanselman.com/blog/TheUltimateGuideOfFiveThingsForNewIE9UsersWhoFearChange.aspx)
-   大遲到的 IE9 Beta 評測
-   [Internet Explorer 9 Beta 開發人員指南](http://msdn.microsoft.com/zh-tw/ie/ff468705.aspx)
-   !!! [Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9](http://msdn.microsoft.com/en-us/library/gg131029.aspx)
-   [IE9 power tips: the secrets of pinned site shortcuts](http://www.zdnet.com/blog/bott/ie9-power-tips-the-secrets-of-pinned-site-shortcuts/2475)