Hola a todos, en post anteriores vimos como podemos añadir el sitio al menú inicio y como añadir tareas al JumpList, hoy revisaremos como crear una categoría en el JumpList y como podemos añadirle ítems a dicha categoría.

Pero antes de iniciar a crear la categoría y añadir ítems algunas cosillas importantes:

  • Se puede añadir una categoría desde cualquier página del mismo sitio.
  • Solo es posible añadir una categoría al sitio
  • El límite de ítems que se pueden añadir a una categoría es de 20.
  • Los ítems de la categoría pueden ser eliminados por el usuario.

Ahora si manos a la obra:

  1. Crear la categoría: Para crear la categoría hacemos uso del método msSiteModeCreateJumpList(‘nombre_categoría’), este método como se puede observar recibe como parámetro un string, el cual será el nombre que se va a mostrar en el JumpList; sin embargo la categoría no será visible hasta que tenga al menos 1 ítem añadido. Para limpiar los datos de la categoría utilizamos el método window.external.msSiteModeClearJumplist();. Entonces para nuestro ejemplo definimos la siguiente función que recibe como parámetro el nombre que le queremos asignar a la categoría y finalmente esta es creada:
1: function CrearCategoria(nombre) { 2: try { 3: window.external.msSiteModeClearJumplist(); 4: window.external.msSiteModeCreateJumpList(nombre); 5: alert('Categoría creada, ahora eliga los items que desea tener en la categoria.'); 6: } 7: catch (ex) { 8: alert('No es posible crear la categoría.'); 9: } 10: }

Ahora vamos a tener una caja de texto y un botón que se encargará de llamar al función anterior, utilizando jQuery añadimos un manejador al evento click del botón, así que vamos a tener algo como:

1: $("#btnCrearCategoria").click(function () { 2: var nombre = $("#txtCategoria").val(); 3: CrearCategoria(nombre); 4: });
  1. Crear y mostrar ítems a una categoría: Para añadir algún ítem a una categoría personalizada se deben realizar dos pasos, el primero que es añadir el ítem y segundo que muestre los ítems. Entonces para crear un ítem disponemos del método msSiteModeAddJumpListItem(‘’,’’,’’); el cuál recibe tres parámetros que son el nombre del ítem, la url a la cuál será redirigido el usuario una vez seleccione un ítem y el tercer ítem la url del icono asociada al ítem. Entonces creamos tres botones para ir añadiendo ítems a la categoría creada:
1: 2: 3:

La idea es que al dar click en cada botón nos añada un ítem que tengan links a la dirección de mi blog, mi Facebook y mi TwitterRisa

Ahora creamos una función que será la encargada de agregar los ítems, dicha función va a recibir el nombre del link y la url:

1: function CrearItem(nombre, url) { 2: try { 3: window.external.msSiteModeAddJumpListItem(nombre, url, 'images/TaskRed.ico'); 4: } 5: catch (ex) { 6: alert('No es posible agregar el item ala categoria.'); 7: } 8: }

Y finalmente mediante jQuery capturamos el click de cada botón y hacemos el llamado de la función:

1: $("#btnBlog, #btnFacebook, #btnTwitter").click(function () { 2: var nombre = $(this).text(); 3: var url = $(this).val(); 4: CrearItem(nombre, url); 5: returnfalse; 6: })

Entonces una vez anclemos el sitio, creemos una categoría y añadamos los ítems se verá algo como:

Imagen1

Les dejo el código del ejemplo: Descarga del ejemplo !