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

  分享到噗浪!

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-widthdevice-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 按鍵再用滑鼠拖曳到資料夾裡,這樣就能解決這個問題了!

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

相關連結

此文章由 will 發表於 2010/9/21 下午 04:27:00

永久連結 | 評論 (5) | 此文章的RSSRSS comment feed |

分類: Tips | Web

標籤: , , , ,

評論

九月 22. 2010 10:04

tphsu

Dear 保哥,
想請教您, 您取得 MCPD 的認證過程.
可否分享您的經驗, 諸如是去上課還是自修, 教材來源, 以及準備過程等等?
小弟寫軟體也有許多年了, 也想測試一下自己的實力, 如能獲得保哥您的寶貴心得, 相信對小弟一定會有非常大的幫助.
希望不會打擾到您.

謝謝. 祝

順心


TPHsu 敬上

tphsu Taiwan

九月 22. 2010 13:18

Will 保哥

TPHsu: 我都是自修,沒去外面上過課,看過的書非常多本,你如果要考證照,建議還是要去讀考證照的書,學習的東西比較全面,因為在實務上要玩過所有 .NET 的東西不太有機會,以下兩本書是基礎,一定要看的:

・Microsoft .NET Framework 2.0 應用程式開發基礎Ⅰ(I/O|集合與泛型|序列化|圖形|執行緒)
・Microsoft .NET Framework 2.0 應用程式開發基礎Ⅱ(組態設定|管理檢測|安全性|反映|郵件|全球化)

我去考試完全沒準備,也是抱持著測試自己的實力的心態去考的,而且我考的是 .NET 4 Beta Exam 連教材、推薦書籍、考古題都沒有,但現在應該有相關書籍了,如果你對考 MCPD 有興趣,建議你可以去考看看。 Smile

Will 保哥 Taiwan

十月 10. 2010 20:22

Coasta

学习了,我刚也给blog加上了这一功能
IE9的site pinning除了jumplist,还有Thumbnail Buttons,你会弄吗??

Coasta People's Republic of China

十月 11. 2010 11:13

Will 保哥

Coasta: 會的,請參考相關連結。 msdn.microsoft.com/en-us/library/gg131029.aspx

Will 保哥 Taiwan

十月 11. 2010 18:21

Coasta

感谢分享哦!

Coasta People's Republic of China

新增評論


( 您輸入的Email不會顯示於網站上 )

  Country flag

biuquote
  • 評論
  • 線上預覽
Loading