Creando ThumbBar Buttons de IE9

Este artículo forma parte de una serie sobre Intrnet Explorer para explicar el nuevo modo de anclado.

Los ThumbBar Buttons son botones que permiten a los usuarios interactuar con las aplicaciones sin necesidad de abrir la ventana de la propia aplicación. Cada botón representa un comando que puede ser ejecutado en la página web mientras que esta se encuentra minimizada. Puedes añadir un máximo de 7 ThumbBar Buttons, los cuales puedes crear, mostrar, esconder, habilitar o deshabilitar, o hasta cambiar su imagen por otra.

El máximo de botones que se podrán visualizar a la vez son 7 debido a las dimensiones de la ventana de pre visualización. Una recomendación sería ordenar estos iconos según su importancia.

Ejemplos de aplicaciones que utilizan está funcionalidad en Windows 7 son la mayoría de reproductores, donde aparecen las típicas acciones de reproducir, pausar, detener o hasta añadir a favoritos.

Para añadir un botón simplemente tendremos que utilizar el método:

btn1 = window.external.msSiteModeAddThumbBarButton(‘/images/Key.ico’, ‘Registro’);

Este método devolverá un identificador que utilizaremos para comprobar cuál de los botones ha sido pulsado. Para esto necesitaremos suscribirnos al evento ‘msthumbnailclick’ que nos informará de que un botón ha sido pulsado.

document.addEventListener(‘msthumbnailclick’, handler1, false);

Para que se actualice la ThumbBar con los botones que hemos creado llamaremos a la función:

window.external.msSiteModeShowThumbBar();

El código quedaría de la siguiente forma:

   1:  <body onload="onLoad()">

2:

   3:  <script type="text/javascript">

   4:  function onLoad() {

   5:  try {

   6:  if (window.external.msIsSiteMode()) {

7:

   8:          // ThumbBar Buttons

   9:                document.addEventListener('msthumbnailclick', handler1, false);

10:

  11:  btn1 = window.external.msSiteModeAddThumbBarButton('/images/Key.ico', 'Registro');

12:

  13:  btn2 = window.external.msSiteModeAddThumbBarButton('/images/Card2.ico', 'Top descargas');

14:

  15:  btn3 = window.external.msSiteModeAddThumbBarButton('/images/Cart2.ico', 'Top ventas');

16:

  17:  window.external.msSiteModeShowThumbBar();

18:

  19:                }

  20:             catch (ex) {

  21:                 // Site Mode not supported.

  22:                alert("Instala IE9.");

  23:         }

  24:  }

  25:  </script>

Será en el manejador del evento ‘msthumbnailclick’ donde ejecutaremos una acción u otra en la página que estamos visualizando según el identificador del botón pulsado.

   1:  function handler1(btn) {

   2:  if (btn.buttonID == btn1) {

   3:                document.location = "http://www.softonic.com/registro";

   4:  }

   5:             else if (btn.buttonID == btn2) {

   6:                 document.location = "http://www.softonic.com/windows/top-descargas";

   7:         }

   8:            else if (btn.buttonID == btn3) {

   9:                 document.location = "http://www.softonic.com/windows/top-ventas";

  10:         }

  11:  }

También tenemos la posibilidad de habilitar o deshabilitar, hacer visible o invisible de forma dinámica los ThumbBar Buttons que tenemos añadidos. Para hacer esta actualización utilizaremos el método:

window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);

Por último, tenemos la posibilidad de cambiar la apariencia de nuestro botones de forma dinámica. Para ello crearemos un nuevo estilo y se lo aplicaremos al botón que deseamos cambiar.

style1 = window.external.msSiteModeAddButtonStyle(btn1, ‘images/Alarme.ico’, ‘style1’);

window.external.msSiteModeShowButtonStyle(btn1, style1);

Si tenéis cualquier duda no os cortéis en preguntar.

Más información en:

– La web de MSDN

http://msdn.com/ie

– Ejemplos

http://www.softonic.com

http://www.amazon.com

http://www.facebook.com

– Más en http://www.beautyoftheweb.com/