« Volver
in asp.net read.

[ASP.NET] IE9 + W7: Botones en Thumbnail.

Hola, bueno ya acercándonos al final de la serie de entradas sobre Internet Explorer 9 y Windows 7, en esta ocasión vamos a revisar como podemos agregar botones al thumbnail los cuales le permitirán al usuario interactuar con la aplicación son necesidad de tenerla como ventana activa.

Primero algunos puntos importantes:

  • Es posible tener botones diferentes para cada página de nuestro sitio.
  • Cada botón está asociado con un evento en la página.
  • El número máximo de botones permitidos es de siete (7).

Ahora para definir un botón hacemos uso de la siguiente función JavaScript, se lo debemos asignar a un objeto:

1: objeto = msSiteModeAddThumbBarButton(‘icono’,’tooltip’)

Como se observa para cada botón le especificamos el icono y el texto que se verá cuando el mouse este sobre el botón.

Y para mostrar los botones llamamos la siguiente función:

1: msSiteModeShowThumbBar();

Para capturar los eventos generados cuando se da click en alguno delos botones, adicionamos un escuchador de evento a la página y le asociamos una función:

1: document.addEventListener('msthumbnailclick',,false);

Después de conocer las funciones correspondientes para añadir y trabajar con los botones en el thumbnail, vamos a pasar a desarrollar un ejemplo:

  1. Creamos una función que nos añada tres botones:
1: function AñadirBotones() { 2: try { 3: btnEnviar = window.external.msSiteModeAddThumbBarButton('images/enviar.ico', 'Enviar'); 4: btnPausar = window.external.msSiteModeAddThumbBarButton('images/pausa.ico', 'Pausar'); 5: btnIniciar = window.external.msSiteModeAddThumbBarButton('images/play.ico', 'Iniciar'); 6: window.external.msSiteModeShowThumbBar(); 7: } 8: catch (ex) { 9: alert('No es posible añadir los botones.'); 10: } 11: }
  1. Creamos el escuchador en la página:
1: document.addEventListener('msthumbnailclick',ThumbnailClick,false);
  1. Definimos la función ThumbnailClick:
1: function ThumbnailClick(btn) { 2: if (btn.buttonID '1') 3: alert('Ha dado click en enviar'); 4: elseif (btn.buttonID '2') 5: alert('Ha dado click en pausar'); 6: elseif (btn.buttonID == '3') 7: alert('Ha dado click en iniciar'); 8: }

La función anterior recibe como parámetro el botón al cual se le dio click, y para verificar cual ha sido usamos la propiedad butttonID, por el momento solo vamos a mostrar un alert indicando el botón al cual se le dio click, y ya dependerá de las necesidades específicas la implementación de algo más complejo.

Así que nuestra aplicación se verá así:

Imagen2

Descarga el ejemplo! (el archivo se llama Botones_Thumbnail)

PD: Use la palabra escuchador porque no s eme ocurrió alguna otra (jajaja).

comments powered by Disqus