[ASP.NET] IE9 + W7: Iconos de notificación

Posted on


Hola, siguiendo con este ciclos de post sobre Internet Explorer 9 + Windows 7, vamos a revisar como añadir iconos de notificación en el icono de nuestro sitio en la barra de tareas.

Anteriormente vimos:

Los iconos de notificación son una excelente manera de informarle al usuario el resultado o el estado de la aplicación sin necesidad de tener activa la ventana de nuestra aplicación.

Para añadir un icono solo se debe utilizar la función msSiteModeSetIconOverlay(‘url_icono’,’tooltip’) y para remover los iconos solo es necesario llamar la función msSiteModeClearIconOverlay().

Ahora para nuestro ejemplo vamos a tener tres botones, los dos primeros establecerán como icono una carita feliz y una triste, y el tercer botón los eliminara:

   1:  <button id="btnIconoFeliz" value="feliz.icon" style="margin-right:20px;">Icono feliz</button>
   2:  <button id="btnIconoTriste" value="triste.ico" style="margin-right:20px;">Icono triste</button>
   3:  <button id="btnRemoverIconos" style="margin-right:20px;">Remover iconos</button>

Una vez que tenemos los botones definidos, vamos a crear dos funciones, la primera va a recibir el icono a utilizar y el texto del tooltip y lo establecerá y la segunda limpiara todos los iconos sobrepuestos:

   1:  function SetIcono(icono, texto) {
   2:      try {
   3:          window.external.msSiteModeSetIconOverlay('images/' + icono, texto);
   4:      } 
   5:      catch (ex) {
   6:          alert('No es posible establecer el icono.');
   7:      }
   8:  }

   1:  function LimpiarIconos() {
   2:      try {
   3:          window.external.msSiteModeClearIconOverlay();
   4:      }
   5:      catch (ex) {
   6:          alert('No es posible limpiar los iconos.');
   7:      }
   8:  }

y finalmente utilizando jQuery capturamos los eventos click de los botones y llamamos la función correspondiente:

   1:  $("#btnIconoFeliz, #btnIconoTriste").click(function () {
   2:      var icono = $(this).val();
   3:      var texto = $(this).text();
   4:      SetIcono(icono, texto);
   5:  });
   6:   
   7:  $("#btnRemoverIconos").click(function () {
   8:      LimpiarIconos();
   9:  })

Y finalmente una vez nuestra app este en la barra de tareas y establezcamos un determinado icono veremos algo como:

Imagen1

Como siempre les dejo el código con el ejemplo: Descarga el ejemplo !

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