Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

jueves, 12 de enero de 2012

Primeros pasos en jQuery Mobile: creando un menú lateral "ajustable"

A los programadores web: por si aún no lo sabíais, hace relativamente poco tiempo (noviembre de 2011) que ha salido la versión de la librería jQuery para móviles, jQuery Mobile.

En el proyecto y en la librería en general se nota la fuerte base que creó en su día John Resig, aunque tiene algun pequeño... "problemilla". La librería funciona así: tu escribes el código html con indicaciones para el motor js, y luego en el navegador se borra todo el contenido visual y javascript lo "renderiza" de nuevo, en versión móvil.

Esto es a veces algo lento, pero los resultados visuales son mucho más que aceptables. El tema visual está muy bien conseguido y sus formas recuerdan bastante al tema de las aplicaciones para iOS.

Poco después de enterarme de la noticia de la salida de la versión final me propuse investigar un poco en el framework y en su funcionamiento, pero nada más allá de un par de páginas básicas. Hace una semana más o menos, he empezado a crear el diseño móvil para la web matriceriaymoldes.es, y para hacerme el trabajo más fácil hasta he creado un par de clases en PHP para crear el código repetitivo de cada página más rápido.

Ayer me fijé en una cosa muy interesante en la documentación de jQuery Mobile. Probad a hacer lo siguiente: abrid la página y luego cambiad el tamaño de la ventana a aproximadamente 3 o 4 pulgadas (la pantalla de un móvil táctil o iPod). Que ha pasado? El menú lateral se ha colocado automáticamente en primera posición.

Esta idea me gustó mucho y me propuse implementarla en mi diseño. Pero en la documentación no se explica cómo hacerlo, y mirar el código sólo te sirve para ver que las dos "columnas" están dentro de divs con las clases css .content-secondary y .content-primary, respectivamente. Probé con el diseño local y nada, no funcionó.

Revisando los archivos .js del código fuente, ha habido uno que me ha llamado la atención. Contenía una función que era llamada al cambiar el tamaño de la ventana. He modificado un poco el código y ha quedado así:


function setPositions(){
var winwidth = $( window ).width()

if( winwidth >= 750 ){
$('.content-secondary').css({'float':'left','width':'35%'});
$('.content-primary').css({'margin-left':'37%'});
}
else{
$('.content-secondary').css({'float':'none','width':'100%'});
$('.content-primary').css({'margin-left':'0px'});
}
}


$(function(){
setPositions();
$( window ).bind( "throttledresize", setPositions );
$( window ).bind( "pageinit", setPositions );
});

Voilà, ha funcionado a la primera. Espero que os sea útil!

Un saludo ;)

Related Posts Plugin for WordPress, Blogger...