HTML - Jump List Internet Explorer


Internet Explorer kent de mogelijkheid sinds versie 9 van de browser om een eigen Jump List samen te stellen voor bezoekers die gebruik maken van Windows 7 of hoger. Bezoekers met Internet Explorer kunnen deze website eenvoudig vastpinnen op hun taakbalk en deze daarna starten als een 'applicatie'. Na het met de rechtermuisknop klikken op het icoon komt de Jump List tevoorschijn. Bijvoorbeeld zoals hieronder.

Hier zie je dat WebSonic.nl is vastgezet op de taakbalk en zodra je met de rechtermuisknop op het icoon klikt komt de Jump List tevoorschijn met alle ingestelde links. Het vastzetten doe je door het tabblad te pakken met je muis en deze te slepen naar de taakbalk.

Jump List Internet Explorer 9

Zoals je ziet zijn er een aantal links in de Jump List opgenomen naar specifieke onderdelen op WebSonic.nl evenals een aantal links naar een aantal sociale netwerken zoals Twitter en Facebook. Elke link in het menu heeft daarbij een eigen icoon gekregen. Het maken van een Jump List zoals hierboven kan op de onderstaande manier. Zo bepaal je zelf welke links worden getoond op het moment dat een bezoeker je website vastzet op de taakbalk.

Menu maken

Het maken van een menu gaat met behulp van een aantal metatags die je in de <head> van de website plaatst. Hierin is de naam van het item opgenomen, de bijbehorende link en het pad naar het icoon. De eerste metatags die je hieronder ziet zijn algemene tags.

De eerste tag "application-name" bevat de titel van de snelkoppeling eenmaal op de taakbalk vastgezet. Gebruik je deze niet wordt de titel van de pagina in kwestie gebruikt. Eronder zie je de URL waarmee de applicatie opent, deze is niet direct noodzakelijk.

<meta name="application-name" content="WebSonic.nl" />
<meta name="msapplication-starturl" content="http://www.websonic.nl/" />


Dan ga je de links instellen. In de code hieronder zie je dat eerst de naam is opgegeven met daarna direct de URL waarnaar deze link verwijst. Dit hoeft niet altijd een link naar je eigen website te zijn, dit kan ook prima een link naar Twitter of een andere website zijn.

Als laatste wordt dan het pad naar het icoon (.ico) opgegeven. Zorg uiteraard wel dat het icoon op de website aanwezig is, gebruik eventueel als alternatief eerst het favicon.

<meta name="msapplication-task" content="name=[NAAM LINK];action-uri=http://www.websonic.nl/;icon-uri=/images/jumplist/icon.ico" />


Na het plaatsen van de bovenstaande regels dan zie je de onderstaande Jump List zodra je de website vastzet op de taakbalk. Op deze manier kun je eigen links toevoegen.

Jump List Internet Explorer 9

Aanvullende tags

Dan zijn er nog een aantal aanvullende tags om invloed uit te oefenen op de gemaakte snelkoppeling door de gebruiker. Deze zijn niet noodzakelijk om te gebruiken.

Afmetingen

Met de eerste metatag die je hieronder ziet bepaal je hoe groot het venster moet zijn zodra de gebruiker deze opent. In dit geval zal het venster openen op een grootte van 800 x 600.

<meta name="msapplication-window" content="width=800;height=600" />


Navigatie

Zodra een snelkoppeling is gemaakt zal Internet Explorer zelf bepalen op basis van het favicon welke kleur de navigatieknoppen moeten krijgen die bovenin het venster staan. In het geval van WebSonic.nl worden deze knoppen oranje zoals hieronder is te zien.

Jump List Internet Explorer 9

De kleur wordt dus automatisch ingesteld maar met onderstaande metatag kan deze kleur overschreven worden. Zodoende kun je ervoor kiezen om de knoppen rood of blauw te laten zijn. Gebruik hiervoor de 16 kleurnamen of een kleur gedefinieerd in je CSS bestand.

<meta name="msapplication-navbutton-color" content="red" />


Jump List Internet Explorer 9

Eigen categorie

Misschien viel het je op dat in de screenshot bovenaan deze pagina de links naar onderdelen van WebSonic.nl onder een kop 'WebSonic.nl' vallen en de links naar externe websites zoals Twitter onder de kop 'Taken' vallen. Als je op de bovenstaande manier beschreven links plaatst dan worden deze altijd onder de kop 'Taken' geplaatst.

Echter is het ook mogelijk om een eigen categorie te maken waardoor je een dergelijke onderverdeling kunt maken zoals in de screenshot bovenaan deze pagina. De andere links stel je dan in middels metatags en daarnaast gebruik je dan onderstaand script. Hieronder in de screenshot zie je een voorbeeld van een eigen ingestelde categorie.

Jump List Internet Explorer 9

Dit is te bereiken middels het plaatsen van een javascript code. Je ziet in feite dezelfde opstelling als met de metatags. Op de tweede regel stel je de naam in die je wilt tonen boven de links en direct eronder de links zelf. De code die gebruikt kan worden hieronder.

<script type="text/javascript">
function customJumplist() {
window.external.msSiteModeCreateJumplist('Eigen Categorie');
window.external.msSiteModeAddJumpListItem('[NAAM LINK]', 'http://www.websonic.nl/','/images/jumplist/news.ico'); }
customJumplist();
</script>

Knop voor gebruiker

Als laatste is het mogelijk om een link te plaatsen op je website zodat een gebruiker eenvoudig je website kan toevoegen aan het Menu Start van Windows. Plaats daarvoor onderstaande link. Helaas voegt de link je website niet toe aan de taakbalk.

<a onclick="window.external.msAddSiteMode();" href="#">Voeg WebSonic.nl toe</a>


Voeg WebSonic.nl toe aan het Menu Start