Roundabout con JQuery

Roundabout es un script para JQuery que permite crear listas interactivas.

Podemos usarlo tanto para textos como para imágenes. Aún más, en la página del desarrollador hay una serie de ejemplos más sofisticados, un reloj o una pequeña animación.

Lo elemental es simple; basta tener la librería de JQuery, descargar el script roundabout-1.0.min y poner ambos antesde de </head>, por ejemplo, así:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
&lgt;script type="text/javascript" src="URL_jquery.roundabout.1.0.min.js"></script>

Debajo, un poco de CSS:

<style type='text/css'>
  .roundabout-holder { /* es el rectangulo dentro el cual se moveran */
    height: 5em;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .roundabout-moveable-item { /* cada uno de los items a mover */
    background-color: #ABC;
    border: 2px solid #345;
    color: #FFF;
    cursor: pointer;
    height: 4em;
    text-align: center;
    width: 4em;
  }
  .roundabout-in-focus {
    cursor: auto;
  }
</style>

Faltaría el HTML que ponemos donde nos guste y que sólo es una lista con un ID único:

<ul id="nombreExclusivo">
  <li> ... el contenido ...</li>
  <li> ... el contenido ...</li>
  <li> ... el contenido ...</li>
</ul>

Lo ponemos a funcionar llamando a la función:

<script type="text/javascript">
// <![CDATA[
  $(document).ready(function() {
    $('ul#nombreExclusivo').roundabout();
  });
// ]]>
</script>

Y como podemos tener varios en una misma página, como cada uno tiene un nombre diferente, basta agregarlos; por ejemplo, así:

$(document).ready(function() {
  $('ul#unNombre').roundabout();
  $('ul#otroNombre').roundabout();
  $('ul#ultimoNombre').roundabout();
});

El script tiene muchas alternativas para ser personalizarlo y acepta una serie de técnicas avanzadas que pueden ser vistas en la página del desarrolaldor o bien en una página con demos.