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: <buttonid="btnIconoFeliz"value="feliz.icon"style="margin-right:20px;">Icono felizbutton> 2: <buttonid="btnIconoTriste"value="triste.ico"style="margin-right:20px;">Icono tristebutton> 3: <buttonid="btnRemoverIconos"style="margin-right:20px;">Remover iconosbutton>

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 !