Udostępnij za pośrednictwem

IE9 Site Pinning tutorial – jump list och overlay

  • Artykuł

Med IE9 kan webbsidor pinnas fast på aktivitetsfältet i Windows 7 precis som vilken applikation som helst. Den fastpinnade webbsidan kan till exempel ha en anpassad jump list och notifiera om händelser genom att visa en overlay-ikon i aktivitetsfältet.

image

 

Så här skapar du en anpassad jump list för din webbsida och använder dig av overlay-ikoner:

Definera en favicon

Se till att ha en favicon som kan representera din fastpinnade webbsida på aktivitetsfältet. Tips: Ha en favicon i storlek 32x32 eller större för snyggast upplevelse för användare med högre DPI.

Specifera i <head> elementet var favicon.ico ligger någonstans:

<LINK rel=”shortcut icon” href=”/favicon.ico”>

image

 

Skapa en anpassad jump list med Tasks

Populära funktionaliteter eller kategorier på din webbsida kan läggas upp som Tasks i en jump list. De defineras med hjälp av HTML meta-taggar:

<META name="msapplication-task" content="name=Browse;action-uri=https://preview.channel9.msdn.com/Browse;icon-uri=/Search.ico">
<META name="msapplication-task" content="name=Learn;action-uri=https://preview.channel9.msdn.com/Learn;icon-uri=/Light.ico">
<META name="msapplication-task" content="name=Forums;action-uri=https://preview.channel9.msdn.com/Forums;icon-uri=/Discuss.ico">
<META name="msapplication-task" content="name=About;action-uri=https://preview.channel9.msdn.com/About;icon-uri=/Info.ico">

image 

 

Skapa en anpassad jump list med egna kategorier

Fler kategorier med dynamisk information kan läggas till i jump list och varje post blir pinnbar. Definera en ny kategori med hjälp av följande metoder:

//skapa kategori
window.external.msSiteModeCreateJumplist('Fresh Videos');

//skapa poster
window.external.msSiteModeAddJumpListItem('Mark Aggar: Energy Smart Software', 'https://preview.channel9.msdn.com/Blogs/Charles/Mark-Aggar-Windows-Power-Management-and-Energy-Smart-Software', '/Movie.ico');
window.external.msSiteModeAddJumpListItem('Aman Kansal: Inside Joulemeter', 'https://preview.channel9.msdn.com/Blogs/Charles/Aman-Kansal-Inside-Joulemeter', '/Movie.ico');

//visa listan
window.external.msSiteModeShowJumplist();

image

För att rensa listan kallar du på följande metod:

 window.external.msSiteModeClearJumplist();

 

Använd overlay-ikoner

För att uppmärksamma om en händelse eller uppdatering på din webbsida kan du använda dig av overlay-ikoner. (Observera att webbsidan måste vara öppen och vara fastpinnad för att overlay-ikonerna ska visas.)

//visa overlay
window.external.msSiteModeSetIconOverlay('/Alarme.ico', 'Overlay 1');

image

För att ta bort overlay-ikonen kallar du på följande metod:

 window.external.msSiteModeClearIconOverlay();

Fotnot: Ikonerna som jag har använt i ovanstående exempel är gjorda av Axialis Team .

Comments

  • Anonymous
    September 15, 2010
    Bra artikel, dock ett stavfel på favico link taggen: <LINK rel=”shourtcut icon”

  • Anonymous
    September 16, 2010
    Tack Jonas! Jag har rättat stavfelet nu.

  • Anonymous
    September 16, 2010
    En liten fråga om Tasks, jag har fattat att starturl måste matcha siten den ligger på men kan Tasks peka på vilken URL som helst eller måste man ligga på samma domän eller t.o.m subdomän? Sen borde du lägga till info om "application-name", "msapplication-starturl", "msapplication-window" och dom andra sakerna i API:t, för att knyta ihop säcken så att säga. =)

  • Anonymous
    September 16, 2010
    Hej Mats! Tasks kan peka på vilken URL som helst och är inte begränsad till något specifikt domän. Task 1 kan alltså peka till en sida som ligger på domän X och Task 2 till en sida som ligger på domän Y. Planen är att skriva en fortsättning på artikeln som tar upp det du nämner och till exempel också hur man lägger till knappar på en thumbnail preview. Stay tuned :)

  • Anonymous
    September 16, 2010
    Okej, tack för svaret. En sak som kan va bra att veta för andra är att META taggarna måste finnas på sidan som deffineras i starturl annars försvinner Tasks när man stänger ner IE. =)

  • Anonymous
    September 17, 2010
    Antalet "tasks" som visas tycks vara begränsat till fem st - stämmer det?

  • Anonymous
    September 17, 2010
    Mårten, ja det stämmer. Max antal tasks är fem. Kan tillägga att för varje kategori visas max 20 poster.