nov 28 2009

Roller

tatai

Esta semana Mario y yo, continuado con el desarrollo y evolución de OpenNUS hemos implementado un sistema de avisos en el Page Builder que llegue directamente desde los gadgets. Al final adoptamos la solución de ir mostrandolos al estilo tagline.

En base a esta idea, se me ocurrió desarrollar esta pequeña y sencilla clase en Mootools que realice este comportamiento pero realizando el efecto de un banner rotativo o roller. De esta forma podremos mostrar por ejemplo una serie de mensajes que se irán turnando de forma constante de modo que podamos ver un cierto número a la vez.

Su uso es bastante sencillo. Tan sólo necesitamos un elemento padre que contenga una serie de hijos que son los que mostraremos. El caso más sencillo es tener un <ul> como padre y varios <li> como hijos.

<ul id="roller">
  <li>Mensaje 1</li>
  <li>Mensaje 2</li>
  <li>Mensaje 3</li>
</ul>

Con esta llamada, conseguiremos que se genere el Roller y comience a funcionar.

new Roller($('roller')).startRoll();

Hay más ejemplos en la demo.