Posts Tagged ‘jQuery’

interface: widgets para jQuery

agosto 30, 2007

Estoy haciendo un sitio institucional estático para un vivero, muy básico. Puro HTML y trabajo en javascript.

La diseñadora gráfica armó un esquema muy lindo, aunque que muy “à la Flash”. Así que estoy haciendo magia con CSS y javascript para que quede lindo como en el bosquejo que me mandaron.

El problema era un ScrollBar no estándar muy bonito que por más que se presione al CSS, se ponía poco menos que imposible.

Había que apelar a algún widget en javascript y encontré el Slider de la biblioteca Interface para jQuery.

La única observación es que no funciona en Internet Explorer con jQuery 1.1.3 o 1.1.4, pero funciona de pelos con jQuery 1.1.2 que es la que podés descargar del sitio de Interface.

El problema era que en total toda la biblioteca pesa 80KB + 21KB de jQuery es pesadito. Interface también ofrece una solución para esto: se puede seleccionar los widgets que queremos y nos genera la biblioteca con lo que usás y nada más. Para el Slider necesitaba Drag&Drop y el propio Slider, peso del interface personalizado: 24KB + 21KB de jQuery.

Con eso conseguí el bloquecito de texto, y me quedó bastante bien el layout.

¡Hasta la próxima!

Anuncios

jQuery

julio 27, 2007

jQuery es una biblioteca javascript. Su slogan es “Escribí menos, hacé más”. La idea es escribir JavaScript de una manera intuitiva.

Ahí me sonó la alarma: ¿escribir JavaScript de una manera intuitiva? ¡Ni loco! Bastante me tomó aprender a garabatear js para andar cambiando a esta altura del partido. Pero seguí, porque me llamaba la atención. Además porque tenía que usarlo con SPIP.

¿En qué consiste entonces esa manera intuitiva?

jQuery nos propone acceder a los elementos mediante consultas al DOM y devolviéndonos un objeto adaptador.

¿Por qué usar esta forma?

La manera de seleccionar los objetos es muy flexible. Se basa en tres formatos, 2 de los cuales son estándar: CSS, XPath y uno propietario (y bastante intuitivo). Se pueden ver acá

A su vez los objetos adaptadores son muy flexibles. Nos permiten manejar los atributos, los eventos, los adyacentes y padres en el DOM, algunos efectos visuales y ajax. Todo esto está muy bien documentado en docs.jquery.com.

¿Cómo empiezo?

Primero hay que bajar la biblioteca. La incluimos en nuestra página mediante:

<script type="text/javascript" src="jquery.js" mce_src="jquery.js">
<script>//mi c&oacute;digo fuente</script>

Una de las primeras cosas que debemos hacer es ejecutar código cuando la estructura del documento está cargada. Esto lo hacíamos con window.onload = function() { … }. Pero había que esperar a que carguen las imágenes. jQuery soluciona esto mediante método $().ready().

$(document).ready(function() { ... })

¿Qué es $()?

Es la consulta propiamente dicha y nos retorna el objeto adaptador. Se le puede pasar un cadena con la consulta, un elemento del DOM o incluso una cadena html que nos genera elementos html en el aire.

Otra propiedad interesante es que los métodos del objeto adapta retornan el mismo objeto (salvo aquellos donde lo que se retorna es un valor, como se verás más abajo). Esto permite encadenar varias acciones sobre los objetos reduciendo las líneas de código.

Para cerrar vamos a mostrar un pequeño ejemplo. Tenemos una lista de títulos y textos descriptivos. Esto podrían ser feeds de un blog. Queremos listar los títulos y ver solo la descripción cuando alguno en particular nos interese.

<ul>
	<li><span>titulo 1</span>
    
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 1
    <a href="#" mce_href="#">mostrar</a></li>
	<li><span>titulo 2</span>
   
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 2
    <a href="#" mce_href="#">mostrar</a></li>
	<li><span>titulo 3</span>
   
Este es el texto de   la descripci&Atilde;&sup3;n colapsable n&Atilde;&ordm;mero 3
    <a href="#" mce_href="#">mostrar</a></li>
</ul>

El script quedaría de la siguiente forma:

<script>$(document).ready(function(){ //Las etiquetas a que sean contenidas por una etiqueta li $("li > a").click(function() {  //si tienen por rótulo "ocultar"  if ($(this).html()=="ocultar")  {   //ocultan el elemento previo   $(this).html("mostrar").prev().hide("slow");   }  else  {   //sino muestran el elemento previo   $(this).html("ocultar").prev().show("slow");  } 

  return false; }); 

}); 

</script>

De esta manera tenemos descripciones colapsables con pocas líneas. La mitad del espacio son comentarios y llaves para hacer legible el código.

¿Bastante intuitivo, no?

Quería hacer una mención respecto a $(). En otro post dije que las funciones en JavaScript son objetos de tipo Function. Este es un caso. Se puede ver bien en el código como se usa esta función objeto y como final jQuery se puede usar con otras bibliotecas y frameworks JavaScript.

Esto se hace invocando al método $noConflict() del objeto jQuery. De esta manera $() queda libre (por ejemplo para prototype) y con invocar jQuery en vez de $() tenemos la misma funcionalidad.

Con eso ya hay para divertirse. ¡Hasta la próxima!