Uso de atributos de data con JQuery MobileNoticias 

Uso de atributos de data con JQuery Mobile

Uso de atributos de data con JQuery Mobile

 

Si bien nuestra página ha quedado lista para desplegarse en cualquier dispositivo móvil, el trabajo no ha terminado, existen otros factores a considerar para prepararla para un funcionamiento adecuado.

A lo largo de este manual haremos uso de varios atributos para marcar nuestros elementos de una manera que jQuery Mobile comprenda, a estos atributos se les da el tipo de data.

Los atributos de data es un concepto introducido por HTML5 para añadir valores complementarios al DOM de un elemento. Por ejemplo podemos tener un div contendor, al cual le queremos agregar una información mediante un atributo:

<div id=”principal” data-saludo=”hola”>Contenido</div>

 

Como puede deducirse el atributo “data-saludo” no existe dentro de las convenciones de HTML, nosotros lo inventamos para añadir un valor, y debido a que cuenta con el prefijo “data-” es totalmente válido. ¿Y de qué sirve esto? En este momento de nada, porque si vemos la página no notaremos cambio alguno, pero nos será de gran ayuda si en cierto momento necesitamos encasillar ciertos elementos.

jQuery Mobile hace uso de estos atributos tanto en el marcado para crear widgets, como para controlar el comportamiento de los elementos en el sitio. Una de las principales funciones de estos atributos es definir secciones, encabezados, contenido y pies de página, si tomamos como base nuestro código obtenemos lo siguiente:

<div data-role=”page”>

<div data-role=”header”>Hola!</div>

<div data-role=”content”>

<p>

Bienvenido a la primera página de la Uneweb.

Este es un sitio de prueba y en esta sección debería ir más contenido,

por el momento no tenemos más que decir.

</p>

</div>

<div data-role=”footer”>

<i>2016 &copy; Uneweb</i>

</div>

</div>

Como se puede apreciar, utilizamos el atributo “data-role” para definir cada parte del layout, quitamos el encabezado e hicimos uso de divs para dividir.

Este atributo en sí no significa nada para el navegador, pero jQuery Mobile se encarga de utilizarlo para saber como desplegar los elementos en el dispositivo móvil, de esa manera si tu abres la página en uno podrás notar la diferencia.

Ahora el encabezado y el pie de página contarán con un fondo negro, además el contenido se ve menos amontonado ya que se agrega espacio a los alrededores.

Este es el tema default de jQuery Mobile y lo verás repetidamente a lo largo de este curso, simplemente basto con agregar dichos atributos para poder aplicarlo.

 


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

 

Entradas relacionadas