[ASP.NET] IE9 + W7: Categorías Personalizadas

Posted on Actualizado enn


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:   });

2. 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(‘<nombreitem>’,’<url>’,’<iconoitem>’); 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:  <button id="btnBlog" value="https://julitogtu.wordpress.com">Blog</button>
   2:  <button id="btnFacebook" value="http://www.facebook.com/julitogtu">Facebook</button>
   3:  <button id="btnTwitter" value="http://twitter.com/julitogtu">Twitter</button>

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 Twitter Risa

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:      return false;
   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 !

3 comentarios sobre “[ASP.NET] IE9 + W7: Categorías Personalizadas

    Programación TIC escribió:
    08/09/2011 en 01:20

    Orales muy bien juliooo estan muy buenos estos ejemplos

    saludos

    […] [ASP.NET] IE9 + W7: Categorías Personalizadas […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s