Cómo crear jumplists para Internet Explorer 9 - parte 2

  • Article

En el post anterior de esta serie escribía sobre cómo crear jump lists para sitios web en Internet Explorer 9 y utilizamos etiquetas <meta> de HTML estándar. ¿Qué pasa cuándo necesitamos generar opciones para el jumplist de manera dinámica? Hay varios escenarios en los que podríamos necesitar crear opciones al vuelo, sobre todo en sitios que incluyen una opción de login con usuario y contraseña.

Siguiendo con el ejemplo del sitio de  Amazon del post anterior, si hacen login a Amazon.com con sus credenciales verán que el jump list cambia y ahora tiene más opciones:

Otra cosa que se puede notar es que además del grupo de "Tasks" hay un segundo grupo de acciones llamado "Amazon Favorites". Estas opciones del jump list se generan al vuelo de la siguiente manera utilizando un poco de JavaScript:

  1. Crear la categoría: lo primero que debemos hacer es crear la categoría donde se incluirán las nuevas opciones en el jump list utilizando el método msSiteModeCreateJumplist y es necesario crear una lista antes de utilizar cualquier otro método posterior. Para crear una lista llamada "Amazon Favorites" agregaremos el siguiente código de Javascript:

    window.external.msSiteModeCreateJumplist('Amazon Favorites');

  2. Agregar elementos: una vez creada la categoría, agregamos acciones con el método msSiteModeAddJumpListItem:

    window.external.msSiteModeAddJumpListItem('Elemento1', 'URI del elemento1', 'URI del icono para elemento1');

    De igual manera que usando la etiqueta <meta> aquí todos los atributos son obligatorios. En el caso del icono, el URI debe apuntar a un archivo .ico de 16 x 16 pixeles como mínimo. En el caso de Amazon.com, el primer elemento 'Amazon Wish List' de la categoría 'Amazon Favorites' se crea con la siguiente línea:

    window.external.msSiteModeAddJumpListItem ('Amazon Wish List' , 'https://www.amazon.com/wishlist?tag=amzn-ie9-jl-wl-20','https://www.amazon.com/favicon.ico');

    Cada categoría soporta hasta 20 elementos como máximo; si se agregan más los primeros serán eliminados automáticamente.

  3. Mostrar la lista: esta lista se encuentra en memoria lista para mostrarse cuando sea más conveniente, con la siguiente línea:

    window.external.msSiteModeShowJumplist();

    Windows actualizará automáticamente el jump list en memoria con las nuevas opciones.

  4. Borrar la lista: cuando los nuevos elementos hayan servido su propósito, es posible borrar una categoría completa con la siguiente línea de código:

    window.external.msSiteModeClearJumplist();

Si un usuario elimina manualmente un elemento de un jump list creado de esta manera (con clic derecho como se ve abajo):

es posible detectar esta acción utilizando cualquier de los siguientes métodos:

document.addEventListener('mssitemodejumplistitemremoved', removed, false);
document.attachEvent('onmssitemodejumplistitemremoved', removed);

que hará una invocación a la siguiente función con el URI de la opción eliminada como parámetro:

function removed(URI) { … }

Cualquier página en el mismo dominio en el que fueron creadas las nuevas categorías y opciones en el jump list puede realizar modificaciones al mismo en cualquier momento.