The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

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

📅 2010/09/21 16:27 📁 Tips, Web

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

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

alt

alt

alt

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

alt

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

alt

想實驗的人，當然要先下載安裝 IE9 Beta 才能使用，安裝好的人直接到 http://www.lativ.com.tw 就可以實驗看看了！安裝過程可參考《[IE9]Internet Explorer 9 Beta 下載、安裝與使用心得》文章說明。

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

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

<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 文章或以下的參考連結。

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

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

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

alt

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

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

相關連結

留言評論