JMiur [E]

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.

6 comentarios:

Unknown  

Qué bonito efecto produce, pero ya sabes 'nada de conflictos, peleas' ;) :)

Responder
La Trucoteca  

¡Hola JMiur!
Lo primero felicitarte por la tremenda página que tienes, eres un auténtico maestro :)
Este truco está chulísimo, lástima que tenga que coincidir con lo que dice Graciela...
Bueno, queríamos consultarte un pequño problemilla que nos ha surgido estos días en el blog ;)
Todo empezó (creemos que empezó) tras pasar de un dominio gratuito nuestro blog, a uno propio (.com). Vimos que en IE, tras efectuar el cambio en el panel de Blogger, gran parte de la interfaz de la página empezó a fallar:
El tamaño de la letra se veía (sigue viéndose) bastante pequeña, lo que ha producido que algunos elementos queden bastante perjudicados, pero ahí no acaba la cosa…
También habíamos agregado unos cartoncitos a los lados del blog, que ahora ya no se ven.
No sé si podrías recomendarnos algo o alguna solución, ya que eres todo un experto en asuntos de blogger ;) , hemos pensado que quizás se deba al tema del dominio... (¿?)
Por cierto, en Mozilla Firefox, Safari y Google Chrome no hay ningún problema, por lo que no logramos entenderlo, y como IE es el navegador que más se utiliza, supone un gran problema….

P.D. Tampoco estamos muy seguros de que en Internet Explorer se vea mal, al menos es lo que nos sale, y lo que nos han dicho algunas personas :(

En fin, ya sabes que en nuestro blog estamos para lo que te haga falta :D.

Un saludo y ¡feliz 2010!
- Javier y German.-

Responder
JMiur  

Efecto interensate, ¿verdad? No sé si será útil pero, es divertido :D

Responder
Joan Irazu  

me hace util en mi blog, lo probare :D

Responder
Analía Alvado  

JMiur, cuando descargo las librerías después no puedo abrirlas con ninguno de los programas que tengo… Pregunto: ¿está en algún lado visible así la copio en un bloc de notas y la pego dónde decís?

Estoy frustrada, un manto de piedad, please!!

Otra preguntonta: ¿ la librería de JQuery dónde queda??? (Acordate que mi cerebro atrasa)

Responder
JMiur  

La trucoteca:
El tema de las fuentes es porque no hay tamaños definidos, al parecer, se usan porcentajes y ese porcentaje, debería tener algún valor base. En general los veo definidos como font-size:100% lo uqe deja al navegador decidir cuál es el valor base y eso variara. Lo mejor es usar valores en pixeles ya que es la única unidad que tiene relación con la pantalla y por lo tanto, siempre será igual en cualquier navegador. De todos modos, siempre habrá una pequeña diferencia porque los navegadores renderizan las fuentes de distinta forma.

Se ven muchas definiciones duplicadas, revisa eso porque tal vez, cambias una y luego está repetida en otro lado con lo cual, no hay cambios.

En IE7 e IE8 no veo problemas serios salvo eso de los tamaños de los textos que se resuelve estableciendo un valor y el fondo del body que en este momento no se muestra, en todo caso, puede ponerse la imagen en:
#outer-wrapper {}

No es un problema de dominios, eso no afecta salvo en el caso de ciertos scripts si son alojados en Google Sites o imágenes alojadas en Blogger que tienen un tamaño máximo accesible.

Ahora bie, si se trata de versiones anteriores de IE, ahí ya nada puede hacerse o no tiene sentido hacerlo. Sólo recomendar que siempre actualicen el navegador a la última versión disponible.

No sé si hay algún otro detalle concreto que vean mal.

Analía:
Los archivos JS pueden abrirse con el block de notas, no sé si es eso lo que querés hacer.

Hecho eso, se copia y pega en la plantilla, por ejemplo, como cualquier otro script, usando CDATA para evitar lios.

JQuery puede ser cargado como Prototype, usando las librerias de Google y así es mas sencillo y te evitas el tener que guardarlas. Eso si. no pueden usarse ambas juntas, siempre hay que usar una sola de ellas:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" />

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR