Manual Jquery Mobile

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de jQuery Mobile

Manual de jQuery Mobile, el framework para el desarrollo compatible de sitios web orientados a dispositivos mviles, basado en el popular jQuery.
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez Dairo Galeano
Director de DesarrolloWeb.com http://www.desarrolloweb.com (3 captulos)
Desarrollador independiente (1 captulos)
Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

! "os manuales de DesarrolloWeb.com tienen el cop#right de sus autores. $o reproducir sin autorizaci%n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Introduccin a jQuery Mobile

Caractersticas de jQuery Mobile, el framework Javascript para desarrollo de aplicaciones web para mviles, basado en jQuery. jQuery Mobile Framework es un producto que sin duda va a dar mucho que hablar en los prximos aos. Estamos asistiendo a la revolucin de los dispositivos mviles de acceso a nternet y este !ramework" basado en el popular jQuery" se va a convertir en el mejor aliado para el desarrollo de sitios web orientados para al se#mento de consumidores web en movilidad. En esta introduccin a jQuery Mobile voy a o!recer las claves o caracter$sticas de este !ramework" de modo que las personas puedan saber qu% tipo de ayudas nos o!rece para el desarrollo y por qu% va a si#ni!icar una revolucin a la hora de crear aplicaciones web compatibles con la mayor$a de las plata!ormas mviles.
jQuery se reinventa a si mismo

Qui&'s recordemos el lema o slo#an de jQuery( )Write Less, Do More). *ues jQuery Mobile Framework es esa misma idea" pero elevado a la si#uiente potencia. *ara explicar esto quiero antes pre#untar a los lectores +*ara qu% sirve un !ramework, -upon#o que la mayor$a lo sabr' de sobra" pero comento b'sicamente estas dos situaciones( .. /o tener que lidiar con las particularidades de cada nave#ador. 0esarrollar una ve& con cdi#o jQuery y que se vea correctamente en todos los nave#adores del mercado. ncluso" cuando saquen otro nave#ador" o versiones nuevas de los existentes" que no ten#as que retocar tu cdi#o para adaptarlo tambi%n a ellos. 1. 2ambi%n sirve para escribir menos cdi#o !uente y hacer cosas m's espectaculares. 3hora +*or qu% jQuery Mobile es otra vuelta de tuerca, .. *orque con los dispositivos mviles se han multiplicado el nmero de navegadores y de plataformas . 2enemos muchos !abricantes" de tablets y smartphones y diversos dispositivos con caracter$sticas distintas" como tamaos de pantallas" sistemas operativos di!erentes y diversos nave#adores basados en cada uno de ellos. 4amos" que si antes con los nave#adores para *5s hab$a problemas de compatibilidad" cuando ten$amos apenas 6 sistemas operativos y 6 nave#adores populares" ahora con los mviles la cosa todav$a se hace m's complicada. 1. *orque el desarrollo de sitios web con jQuery Mobile es todav a m!s autom!tico de lo que era trabajar con jQuery. 5on mucho menos cdi#o haces muchas m's cosas. 5omo te puedes !i#urar" con los dispositivos mviles todav$a se hace m's necesario usar un !ramework" que te !acilite desarrollar una ve& y ejecutar de manera compatible en todos los dispositivos. 3dem's de ello" con jQuery Mobile reducir's dr'sticamente el tiempo de desarrollo de tu sitio web para dispositivos de movilidad.

Caractersticas de jQuery Mobile

7o primero que debe quedarnos claro para describir jQuery Mobile es que no se trata de un nuevo !ramework creado desde cero. En absoluto. *odemos entender a jQuery Mobile como un plu#in para jQuery puesto que es un producto que est' basado en el propio framewor" #avascript jQuery. *or tanto" aquellas personas que ya conocen jQuery no van a tener que aprender nada nuevo" sino aplicar sus conocimientos y desarrollar !'cilmente aplicaciones para mviles. Esto si#ni!ica una #ran ventaja" puesto que hay muchas personas que conocen jQuery y que van a poder pasarse sin pr'cticamente nin#8n problema al desarrollo para dispositivos. 7o se#undo que quiero sealar es que" si bien jQuery nos sirve para desarrollo de !uncionalidades 9avascript compatibles con todos los nave#adores" jQuery Mobile va un poco m's all'. /o se trata simplemente de una capa para reali&ar cdi#o 9avascript que !uncione en todos los nave#adores" sino un conjunto de herramientas $ue simplificar! el proceso de crear p!ginas para mviles" desde la escritura del propio cdi#o :2M7" la maquetacin con 5-- y la creacin de e!ectos din'micos con 9avascript. ;n momento( %como nos va a ayudar a hacer &'ML jQuery Mobile( /o es que vayas a escribir cdi#o :2M7 desde jQuery" sino que" al incluir jQuery Mobile tu cdi#o :2M7 b'sico ser' optimi&ado para reali&ar diversos comportamientos din'micos en los nave#adores mviles" de manera autom'tica. 3dem's" muchas cosas del propio !ramework las vas a poder con!i#urar directamente a trav%s de atributos :2M7. <ueno %) $u* hay de +,,( *ues tampoco es que ten#as que escribir tu cdi#o 5-- desde jQuery Mobile" sino que este !ramework dispondr' diversas herramientas 5--" tambi%n de manera autom'tica" que podr's utili&ar en tus desarrollos. *or poner dos ejemplos" con este !ramework tus componentes de !ormularios se estili&ar'n de manera autom'tica" sustituyendo los !eos elementos nativos de los nave#adores de dispositivos mviles. 3dem's" dispondr's de un pequeo !ramework 5-- para poder hacer cosas como la maquetacin a partir de una rejilla. 3parte de todo lo comentado hasta ahora" que opino es clave para entender bien qu% es jQuery Mobile Framework" aqu$ van otra serie de caracter$sticas r'pidas del producto( +reado sobre jQuery con ar$uitectura de jQuery-.( 7os propios creadores de jQuery usaron su experiencia para desarrollar el !ramework para mviles y adem's implementaron la arquitectura diseada para las librer$as de inter!aces de usuario jQuery; . *or tanto se trata de un producto muy bien pensando" en base a la experiencia de aos. /st! desarrollado para trabajar con &'ML0( de hecho" estamos obli#ados a hacer p'#inas :2M7= para aprovechar todas las caracter$sticas del !ramework. 1epleto de automatismos( -i ya era !'cil hacer 3jax en jQuery" todav$a es m's !'cil en jQueryMobile. 0e hecho" si el !ramework capta que puede hacer una conexin 3jax en lu#ar de una convencional" lo hace autom'tica por 3jax. > eso es solo un ejemplo" tambi%n son autom'ticas las transiciones entre p'#inas" la personali&acin del aspecto de la p'#ina" etc. 2reparado para dispositivos t!ctiles( 7os dispositivos t'ctiles tienen cambios en la #estin de eventos y jQuery Mobile nos !acilita la labor de adaptarnos a ellos. 2ersonali3acin de temas( #ual que ocurr$a con las jQuery; " el jQuery Mobile podemos ele#ir entre varios temas #r'!icos ya listos para aplicar al aspecto de nuestra p'#ina. 3dem's" podemos crear nuestros propios temas personali&ados.
Compatible con el mayor nmero de plata ormas

7os creadores del !ramework comentan entre sus caracter$sticas que se han es!or&ado para cubrir el mayor n8mero de plata!ormas de dispositivos mviles posible. 0icen que el tar#et que han buscado es mayor que el del resto de !rameworks disponibles en el mercado.
4ota5 3 decir verdad" no he comprobado hasta que punto la compatibilidad de jQuery Mobile sea mayor o menor que la de otros productos como -encha 2ouch. *ero si nos vamos a la p'#ina de -encha veremos que ellos comentan que el !ramework est' preparado para i?-" 3ndroid y <lack<erry" cuando jQuery Mobile alcan&a muchas otras plata!ormas.

En la si#uiente ima#en podemos ver los lo#os de los sistemas operativos que jQuery Mobile soporta.
/o obstante" cabe sealar existen diversos #rados de compatibilidad para cada sistema" o mejor dicho" para cada nave#ador dentro de cada !amilia de dispositivos. En la documentacin del !ramework" en la seccin de -upported *lat!ormsveremos que el #rado de compatibilidad est' dividido en tres niveles distintos" desde @radoA3 Bdonde est'n la mayor$a nave#adores para i?- y 3ndroid" as$ como <lack<erry" *alm Ceb?-" los nave#adores de ordenadores de escritorio" etc.D a @radoA< Bdonde encontramos a -ymbian" ?pera Mini =.E y F.E para i?- o <alckberry =.ED o @radoA5 Bcon el resto de los smartphones" entre los que se encuentra Cindows Mobile o <lackberry GD. En resumen" que se#8n apuntan en la documentacin" solo se ha dejado sin soporte deliberadamente en esta versin ..E del !ramework el sistema -amsun# <ada BEl sistema operativo propietario de -amsum# para smartphonesD" aunque dicen que probablemente !uncione relativamente bien incluso sin haberla probado" pues todav$a no hay dispositivos o emuladores. En los prximos art$culos de 0esarrolloCeb.com empe&aremos a desarrollar con jQuery Mobile" comen&ando por las explicaciones sobre cmo hacer una primera p'#ina b'sica. 0e momento os dejo un par de enlaces que puedan complementar esta in!ormacin( 5omo no" es imprescidible dar el enlace a este !ramework" para que pod'is ir conoci%ndolo( http(HHjquerymobile.com 3dem's" una re!erencia interesante a un sitio donde se puede ver una #aler$a de sitios creados con jQuery Mobile.
Introduccin a jQuery Mobile en vdeo

:emos reali&ado una retransmisin en directo que puede servir para poder tener una visin #eneral de jQuery Mobile y para dar los primeros pasos con este !ramework para el desarrollo de sitios para dispositivos mviles. En la introduccin se explican cosas importantes como qu% es jQuery Mobile" cmo insertarlo en una p'#ina web o qu% relacin tiene con el proyecto jQuery #lobal. 3dem's se comien&a a codear con diversos ejemplos en los que se puede apreciar la estructura de la p'#ina b'sica" la estructura multip'#ina y la personali&acin de elementos del :2M7 con distintos roles.
Artculo por
Miguel Angel Alvarez
Con iguraciones por de ecto de jQuery Mobile

Breve introduccin a las confi uraciones predeterminadas !ue vienen instaladas con jQuery Mobile y todo lo !ue ellas involucran. ;na de las #randes ventajas que tiene jQuery Mobile !ramework" es que se autoAinicia. Es el mismo framework quien se encar#a de crear cada uno de los widgets que nosotros le indiquemos a trav%s del atributo )dataArole). Esto es una #ran ventaja ante cualquier !ramework que ten#a como labor principal la de crear inter!aces de usuario" pues todo se hace casi de manera transparente para el desarrollador.

5omo te habr's percatado" a8n a estas instancias del Manual de jQuery Mobile no se ha visto ni una sola l$nea de 9avascript" pero lo mejor es que hemos lo#rado la constitucin de importantes y relevantes herramientas para cualquier aplicacin web mvil. -in embar#o" con lo anterior no pretendemos decir que jQuery Mobile es solo para crear wid#ets" sino que tiene muchos m's soportes. Es m's" podemos hacer al#unos trabajos de 393I con el !ramework" as$ como cualquier otro tipo de interaccin usuarioHsitio" de manera muy simple. :ablando un poco mas de 393I" creo que hemos comentado anteriormente que el propio !ramework tambi%n lo maneja de !orma autom'tica" haciendo incluso por nosotros tratamientos especiales !rente a errores" por ejemplo. En este sentido" si lle#a a producirse al#8n problema con una transaccin :22*" o cualquier otro protocolo" jQuery Mobile lo detectar'" enviando al usuario un )2oask) como aviso" con un mensaje del problema. 2ambi%n procesa los eventos relacionados con la car#a de los datos que se pueden reali&ar a trav%s de cualquier peticin que se ha#a al servidor" mostr'ndonos de la misma !orma un 2oask de de car#a.
4ota5 *ara aclarar dudas" quiero decir que un 2oask es como una especie de )alert)" que aparece encima de las aplicaciones" con la de!erencia de que %ste no usa botones" se oculta de !orma autom'tica" se usan en los dispositivos mviles y p'#inas web de !orma moment'nea.
Mencin de las opciones por de ecto de jQuery Mobile

En la documentacin o!icial de jQuery Mobile encontramos un texto que" en s$ntesis" dicta lo si#uiente( "Para comenzar, basta decir que cualquier modificacin que se quiera hacer sobre las configuraciones de jQuery Mobile se deben hacer envueltas dentro del evento "mobilinit", uesto que no se trabaja con el tradicional evento "ready" que se a lica al elemento document en otros royectos relacionados con jQuery! "sto se debe a que la auto# inicializacin de jQuery Mobile se lleva a cabo antes de ejecutarse el ultimo evento mencionado"! *ero en muchos de los casos es m's productivo no incluir las con!i#uraciones dentro del evento )mobileinit)" aunque as$ lo di#a la documentacin de jQuery Mobile. Esto es debido a que" en ocasiones" hemos probado a modi!icar las opciones" pero en realidad no se obtienen resultados visibles de ello" al#o que s$ se lo#ra haciendo las di!erentes con!i#uraciones !uera del evento )mobilinit) y dentro del JreadyK. 5uando hablamos de estas con!i#uraciones por de!ecto de jQuery Mobile" estamos hablando de una #ran lista" pero tambi%n debo decir que en este art$culo no las vamos a mencionar todas" pues al#unas son solo para casos demasiado especiales y donde qui&'s pocas aplicaciones realmente lo exijan.
Cambiar las transiciones por de ecto de p!ginas y di!logos

5uando nos movemos entre una p'#ina y otra en una aplicacin jQuery Mobile" nos damos cuenta de que por de!ecto hace el e!ecto de transicin tipo )pop)" pero como la cosa va sobre #ustos" en mi caso me #usta m's la transicin )!lip)" entonces ser$a demasiado pedir hacer un dataAtransition a cada uno de los enlaces. *ara eso disponemos de una opcin para cambiar las transiciones de todas las pa#inas al mismo tiempo" cosa que se consi#ue con el si#uiente cdi#o(
$.mobile.defaultPageTransition='flip';
5on esto todas nuestras p'#inas har'n la transicin !lip.

4ota5 Lecuerda que en el art$culo de la barras de nave#acin hablamos sobre las transiciones y explic'bamos que )!lip) no !unciona en todos los nave#adores.

2ambi%n existe una !orma muy parecida para cambiar las transiciones de los cuadros de di'lo#o" as$ tendremos una mejor animacin uni!icada no slo para las p'#inas" sino tambi%n para los cuadros de di'lo#o.
$.mobile.defaultDialogTransition='slideup';
Modi icar y Mostrar los "oas# relacionados con A$A%

3nteriormente" en este art$culo mencion'bamos al#o sobre los 2oask y los trabajos que reali&aban en jQuery Mobile" pues ahora vamos a ver como modi!icamos el mensaje que traen por de!ecto. *ara el caso del mensaje de car#a necesitar$amos un cdi#o como el si#uiente.
$.mobile.loadingMessage = "Hemos modificado el mensaje del Loading";
3hora si lo que queremos es cambiar el mensaje que viene dentro del 2oask" que aparece cuando hay un error" necesitamos el si#uiente cdi#o(
$.mobile.pageLoad rrorMessage = '!ue"o mensaje';
2ambi%n se puede controlar la aparicin y desaparicin de los 2oask. 0i#amos que quiero que" al presionar un botn" apare&ca el mensaje de car#a. Entonces escribimos un cdi#o como este(
$.mobile.loadingMessage = "Hemos modificado el mensaje del Loading"; $.mobile.s#o$PageLoadingMsg%''&;
7ue#o para ocultar el 2oask lo hacemos con una sencilla l$nea de cdi#o como esta.
$.mobile.#idePageLoadingMsg%&;
Lecuerda que si quieres tener una re!erencia m's amplia de las con!i#uraciones por de!ecto en jQuery Mobile Framework" puedes visitar su documentacin" en la seccin de con!i#uraciones por de!ecto jquerymobile.comHdemosH..EHdocsHapiH#lobalcon!i#.html
&oniendo todo en un solo ejemplo

3hora vamos a compartir un cdi#o de ejemplo en donde se ilustra todo lo explicado en este art$culo(
'(D)*T+P #tml, '#tml lang="es", '#ead, 'title,*onfiguarciones por defecto'-title, 'meta c#arset="utf./" -, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 initial.scale=1" -, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, 'script,
$%document&.read3%function%&7 $.mobile.pageLoad rrorMessage = ' sta pagina no es8iste0 el mensaje de error #a sido cambiado'; $.mobile.fi8edToolbars.s#o$%true&; $.mobile.defaultDialogTransition='slideup'; $.mobile.defaultPageTransition='flip'; $%"9mostrar"&.clic2%function%e&7 $.mobile.loadingMessage = "Hemos modificado el mensaje del Loading"; $.mobile.s#o$PageLoadingMsg%''&; :&; $%"9ocultar"&.clic2%function%e&7 $.mobile.#idePageLoadingMsg%&; :&;


:&; '-script, '-#ead, 'bod3, 'di" data.role="page" id="#ome", 'di" data.role="#eader" data.position="fi8ed", '#1,*onfiguraciones'-#1, '-di", 'di" data.role="content", 'a 'a 'a 'a 'a #ref="9" id="mostrar" data.role="button",Mostrar Loading'-a, #ref="9" id="ocultar" data.role="button",)cultar Loading'-a, #ref="9pag;" data.role="button" ,Probar nue"a transicion de paginas'-a, #ref="9dialogo" data.role="button" data.rel="dialog",Probar nue"a transicion de Dialogos'-a, #ref="demo.#tml" data.role="button" ,<4ui #a3 un error0 la pagina del "inculo no e8iste'-a,
'-di", 'di" data.role="footer", '#=,*onfiguraciones'-#=, '-di", '-di", 'di" data.role="page" id="pag;", 'di" data.role="#eader" data.position="fi8ed", '#1,*onfiguraciones pagina ;'-#1, '-di", 'di" data.role="content", 'p, ste es una pagina 3 puedes "er 4ue #ace la transicion flip0 sin poner el data.transition en el anlace0 todas las paginas tendran la misma transicion'-p, 'a #ref="9#ome" data.role="button" data.icon="bac2",>egrsar'-a, '-di", 'di" data.role="footer", '#=,*onfiguraciones pagina ;'-#=, '-di", '-di", 'di" data.role="page" id="dialogo", 'di" data.role="#eader" data.position="fi8ed", '#1,*onfiguraciones'-#1, '-di", 'di" data.role="content", 'p, ste es un dialog 3 puedes "er 4ue #ace la transicion slideup0 sin poner el data.transition en el anlace0 todos los dialogos tendran la misma transicion'-p, 'a #ref="9#ome" data.role="button" data.icon="bac2",>egrsar'-a, '-di", '-di", '-bod3, '-#tml,
-in son observadores" se dar'n cuenta de que usamos una con!i#uracin no explicada.
$.mobile.fi8edToolbars.s#o$%true&;
5on %sta se lo#ra que todas las barras BheaderH !ooterD que ten#an el atributo dataApositionMK!ixedK" se !ijen de la misma !orma que lo hace la barra de @oo#le" donde podemos hacer scroll en la pa#ina y la barra tambi%n bajar'" posicion'ndose siempre en la parte superior de la ventana del documento.
Artculo por
Dairo Galeano
7

&!gina b!sica en jQuery Mobile 'rame(or#

Cmo es la estructura de la p" ina m"s b"sica !ue podramos #acer con el framework jQuery Mobile. En el anterior art$culo donde presentamos jQuery Mobile me cans% de decir lo sencillo que es desarrollar con este !ramework y cmo con poco cdi#o podemos hacer #randes cosas. Lealmente en este art$culo no vamos a explotar las enormes posibilidades que nos o!recen estas librer$as" puesto que vamos a hacer una p'#ina muy b'sica" pero al menos servir' para comen&ar a apreciar al#unas de sus caracter$sticas comentadas anteriormente. 3 continuacin vamos a reali&ar nuestra primera p'#ina b'sica" por un lado incluiremos los scripts para instalar el !ramework" y por otro veremos tambi%n cu'l es la estructura de cdi#o :2M7 que debemos implementar para crear esta primera p'#ina. 2odo esto nos servir' para apreciar como se puede hacer una p'#ina para mviles con estructura !undamental de cabecera" cuerpo y pie y cmo jQuery Mobile les coloca autom'ticamente unos estilos b'sicos.
Cdigo )"M* de la p!gina b!sica

En este primer ejercicio" en lu#ar de comentar paso a paso como construir la p'#ina" quiero mostrar directamente cu'l ser$a el cdi#o :2M7 necesario para crearla. Esto nos dar' una idea #lobal sobre esta estructura de documento y lue#o comentar% las distintas partes del cdi#o.
'(D)*T+P '#tml, '#ead, #tml,
'title,Probando j?uer3 Mobile'-title, 'meta c#arset="utf./", 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 initial.scale=1", 'lin2 rel="st3les#eet" #ref="#ttp@--code.j4uer3.com-mobile-1.5-j4uer3.mobile.1.5.min.css" -, 'script t3pe="te8t-ja"ascript" src="#ttp@--code.j4uer3.com-j4uer3.1.A.B.min.js",'-script, 'script t3pe="te8t-ja"ascript" src="#ttp@--code.j4uer3.com-mobile-1.5-j4uer3.mobile. 1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page", 'di" data.role="#eader", PCgina para mD"iles '-di", 'di" data.role="content", sta es la "ersiDn para mD"iles de mi sitio $eb '-di", 'di" data.role="footer", *ontacta 3 lo 4ue sea... '-di", '-di", '-bod3, '-#tml,
3 continuacin podemos ver" parte por parte" comentado todo el anterior cdi#o :2M7.
4ota5 5omo acabas de ver" la p'#ina b'sica de este !ramework para mviles incluye" no solo los scripts jQuery y el componente jQuery Mobile" con sus 5--" sino tambi%n un bloque de cdi#o :2M7 para crear las partes !undamentales de toda p'#ina jQuery Mobile. Esto es porque jQuery mobile" como ver's a lo lar#o de los si#uientes art$culos" no es solo un !ramework para crear dinamismos del lado del cliente Acomo podr$amos entender a jQueryA" sino todo un paquete de utilidades que van desde la maquetacin de contenidos para mviles" mejoras en la presentacin e inter!aces de usuario" hasta una serie de m%todos para reali&ar dinamismos e interaccin con el usuario.

+sto es )"M*,5omo se dijo en el art$culo anterior" jQuery Mobile !unciona con :2M7=. Es decir" para poder disponer de todas las !uncionalidades del !ramework debemos escribir cdi#o :2M7=. *or ello" podremos apreciar como se de!ine el doctype de :2M7= en la primera l$nea de cdi#o.
'(D)*T+P #tml,
4ota5 7os entendidos de :2M7= ver'n tambi%n que hemos de!inido una etiqueta ME23 para especi!icar el jue#o de caracteres ;2FAN" necesario en esta versin del len#uaje :2M7. Lecordar que se debe #uardar el archivo con ese !ormato" ;2FAN" con vuestro editor de texto para que todo vaya correctamente.
+ti.ueta M+"A /ie(port

El se#undo punto que nos salta a la vista es la etiqueta ME23 )viewport)" que sirve para decirle a jQuery que debe mostrar la p'#ina a escala ..
'meta name=""ie$port" content="$idt#=de"ice.$idt#0 initial.scale=1",
Esta etiqueta se debe indicar porque al#unos dispositivos reali&an un escalado autom'tico de la p'#ina para mostrarla a unas dimensiones que no tienen por qu% ser las deseadas. En al#unos casos se utili&a una anchura virtual de OEE p$xeles aproximadamente" con lo que nuestra p'#ina podr$a verse escalada. 5on esta etiqueta la anchura de la p'#ina ser' i#ual a la anchura de la pantalla del dispositivo. -in embar#o" esta de!inicin no entrar' en con!licto con la posibilidad de hacer &oom a la p'#ina" lo que es interesante desde el punto de vista de la accesibilidad. El 8nico problema de esta etiqueta es que en i?- no se actuali&a autom'ticamente la anchura de la p'#ina al cambiar la orientacin del dispositivo Bde hori&ontal para vertical o viceversaD" con lo que las dimensiones pueden no ajustarse a la pantalla cuando alteramos la posicin del mvil. -e#8n comentan en la documentacin" queda pendiente corre#ir este asunto en versiones venideras del !ramework.
Incluir los scripts del rame(or#

3 continuacin vemos todas las etiquetas para instalar jQuery Mobile en nuestra p'#ina. 5onsiste en un link a una hoja de estilos 5-- y la inclusin de los scripts 9avascript de jQuery y jQuery Mobile.
'lin2 rel="st3les#eet" #ref="#ttp@--code.j4uer3.com-mobile-1.5-j4uer3.mobile.1.5.min.css" -, 'script t3pe="te8t-ja"ascript" src="#ttp@--code.j4uer3.com-j4uer3.1.A.B.min.js",'-script, 'script t3pe="te8t-ja"ascript" src="#ttp@--code.j4uer3.com-mobile-1.5-j4uer3.mobile. 1.5.min.js",'-script, 4ota5 5omo se puede ver" estamos incluyendo la versin ..E del !ramework" pero qui&'s en el momento que leas este art$culo est%n en una release m's moderna" por lo que atento al copiar y pe#ar.
En la documentacin del !ramework nos recomiendan hacer los enlaces con los scripts alojados en el 50/ B5ontent 0elivery /etworkD de jQuery" para un mejor desempeo. *ero si lo pre!erimos tambi%n podemos tenerlos alojados en nuestro propio servidor.
De inir la estructura de p!gina y los data0role

3 continuacin podemos !ijarnos en el cuerpo de la p'#ina" dentro de la etiqueta <?0>. 4eremos que la p'#ina b'sica incluye diversas divisiones 0 4 con distintas utilidades" de!inidas por los atributos dataArole. Estas !orman la estructura de la p'#ina b'sica en jQuery Mobile. *ara comen&ar veremos que existe una divisin que en#loba toda la estructura de la p'#ina b'sica" con el dataA roleM)pa#e).
'di" data.role="page",

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0entro de esa divisin tendremos otros 0 4 con los tres roles !undamentales de toda p'#ina jQuery Mobile( cabecera" cuerpo y pie. 7a cabecera se indica con el dataAroleM)header).
'di" data.role="#eader",
El cuerpo de la p'#ina lo colocamos con un dataAroleM)content).

'di" data.role="content",
Finalmente" el pie de p'#ina se indica con un dataAroleM)!ooter).

'di" data.role="footer",
5on esto hemos terminado con la p'#ina b'sica. *odemos ver el ejemplo en !uncionamiento.
Conclusin
7o m's se#uro es que no te haya sorprendido mucho esta primera p'#ina jQuery Mobile. Lealmente no tiene nada en especial y ciertamente" si la vemos en un nave#ador" no observaremos nada que resulte espectacular. /o obstante" en el si#uiente art$culo que publicaremos en 0esarrolloCeb.com modi!icaremos esta p'#ina b'sica" para aprender cmo es la estructura de la p'#ina multip'#ina de jQuery Mobile" que ya nos permitir' mostrar al#unas de las caracter$sticas interesantes de este !ramework. /o obstante" quiero que se aprecie que jQuery Mobile ya nos ha alterado un poco el aspecto de nuestra p'#ina b'sica a partir de unos estilos en la cabecera y pie" que son meramente autom'ticos. /uevamente" os pido un poco de paciencia para conocer en detalle todas las bondades anunciadas de este !ramework en !uturos art$culos.
Artculo por
+structura multip!gina de jQuery Mobile

Cmo #acer una p" ina multip" ina, de modo !ue se puedan reunir varias p" inas en un arc#ivo $%M&, en jQuery Mobile 'ramework. 5ontinuamos dando nuestros primeros pasos para el desarrollo de p'#inas orientadas a dispositivos mviles con jQuery Mobile. En esta ocasin nos vamos a dedicar a la estructura de las p'#inas )multip'#ina)" lo que nos dar' ocasin de ver ya al#8n e!ectillo interesante en nuestro nave#ador. En el anterior art$culo del Manual de jQuery Mobile explicamos cu'l es la estructura de la p'#ina b'sica y ahora veremos que la multip'#ina no es m's que la unin de varias p'#inas b'sicas en un mismo archivo :2M7. Qui&'s al#una persona con conocimientos avan&ados de jQuery pueda estar decepcionada" al ver como en este manual de jQuery Mobile no hemos utili&ado todav$a nin#8n cdi#o 9avascript. -i es as$ lo siento" pero ya advierto que esta situacin va a mantenerse al menos durante bastantes art$culos m's. *ues" si bien es cierto que en esta ocasin vamos a poder ver en marcha e!ectos din'micos" no es necesario utili&ar 9avascript para nada" porque muchos de los comportamientos b'sicos de este !ramework se con!i#uran directamente sobre el cdi#o :2M7" por medio de diversos atributos con el pre!ijo )dataA). *ara hacer la p'#ina b'sica ya vimos que las divisiones ten$an un atributo )dataArole) para indicar la estructura de la p'#ina" con su cabecera" cuerpo y pie. 3hora veremos otros atributos parecidos para indicar otras cosas sobre las p'#inas que estamos desarrollando.

10
Multip!gina es la unin de varias p!ginas b!sicas

En el mismo cdi#o :2M7 podemos incluir varios bloques de p'#ina b'sica y tendremos un archivo :2M7 con diversas p'#inas que se conoce como Multip'#ina. *ero tranquilos" esto no quiere decir que en jQuery Mobile ten#amos que desarrollar siempre todas las p'#inas del sitio web en el mismo archivo :2M7" podemos or#ani&arlas si lo deseamos en archivos aparte" o hacer una me&cla entre p'#inas multip'#ina y p'#inas b'sicas en di!erentes archivos :2M7. 7a p'#ina b'sica vimos que inclu$a una serie de scripts 9avascript y estilos 5-- del !ramework" adem's de una declaracin ME23 para de!inir la escala o &oom con la que se deber$a presentar. 2odo eso permanece i#ual" lo 8nico que cambiar' ser' el cuerpo de la p'#ina" donde colocaremos varios bloques dataAroleM)pa#e). 4eamos una unin de varios bloques de p'#inas b'sicas.
'(.. P)>T<D< .., 'di" data.role="page" id="portada", 'di" data.role="#eader", '#1,Titular de pCgina portada'-#1, '-di", 'di" data.role="content", 'p,Eabrico guitarras de todos los colores'-p, 'p,Puedes "er 'a #ref="9galeria",mis guitarras'-a,'-p, 'p,Puedes 'a #ref="9comprar" data.rel="dialog",comprar una guitarra'-a,'-p, '-di", 'di" data.role="footer", Pie de pCgina '-di", '-di", '(.. -P)>T<D< .., '(.. F<L >G< .., 'di" data.role="page" id="galeria" data.title="FalerHa de guitarras", 'di" data.role="#eader", '#1,FalerHa de fotos de mis guitarras'-#1, '-di", 'di" data.role="content", 'p,Puedes "er todas mis guitarras'-p, 'p,'a #ref="9portada","ol"er'-a,'-p, '-di", 'di" data.role="footer", Pie de pCgina '-di", '-di", '(.. -F<L >G< .., '(.. *)MP><> .., 'di" data.role="page" id="comprar" data.title="*omprar guitarras", 'di" data.role="#eader", '#1,*omprar guitarras'-#1, '-di", 'di" data.role="content", 'p,Ier"icio temporalmente indisponible'-p, 'p,'a #ref="9portada","ol"er'-a,'-p, '-di", 'di" data.role="footer", Pie de pCgina '-di", '-di", '(.. -*)MP><> ..,
Este sitio estar$a !ormado por tres p'#inas distintas( )portada)" )#aleria) y )comprar). 3 pesar que est'n escritas en el mismo archivo :2M7" jQuery se encar#ar' de mostrarlas como si !ueran p'#inas independientes. 7a nave#acin entre ellas est' reali&ada por enlaces" como veremos a continuacin.

11
+nlaces entre las p!ginas de la estructura multip!gina

5ada una de las p'#inas b'sicas del esquema multip'#ina tienen un identi!icador" que se pone en el 0 4 principal de la p'#ina" el que tiene dataAroleM)pa#e). 4eamos a continuacin el cdi#o :2M7 de la divisin #eneral de la p'#ina de portada.
'di" data.role="page" id="portada",
5omo vemos" se le ha colocado idM)portada)" con lo que ya tiene un nombre asi#nado. 3hora" si queremos hacer enlaces diri#idos hacia esta portada" los creamos simplemente como si !ueran enlaces internos. *ara ello colocamos el hre!M)Pportada)" es decir" tal como se hace con los enlaces dentro de la misma p'#ina que conocemos del :2M7.
'a #ref="9portada",Gr a la portada'-a,
7o #enial de estos enlaces es que" para pasar de una p'#ina a otra" jQuery Mobile produce una transicin autom'tica" que hace que una p'#ina actual desapare&ca y entre la enla&ada con un e!ecto suavi&ado. M's adelante explicaremos cmo con!i#urar las transiciones entre p'#inas.
"tulos de las p!ginas

5omo todas las p'#inas de esta estructura multip'#ina est'n en el mismo archivo :2M7" ocurre que todas comparten un mismo 2 27E" que !ue indicado en el :E30 de la p'#ina. -in embar#o los desarrolladores probablemente querr'n que cada p'#ina ten#a un t$tulo independiente. *ara hacer posible ese caso de uso" jQuery Mobile dispone de un atributo dataAtitle que se coloca en el 0 4 principal de cada una de las p'#inas. En dataAtitle podemos indicar el t$tulo que tiene cada p'#ina del esquema de multip'#ina y jQuery Mobile se encar#ar' de actuali&arlo autom'ticamente cuando se nave#ue a esa p'#ina. *odemos ver el t$tulo de la subAp'#ina de #aler$a(
'di" data.role="page" id="galeria" data.title="FalerHa de guitarras",
3s$ vemos que" cuando el usuario pulse un enlace que le lleve a esta p'#ina" se cambiar' de manera autom'tica el titular de la ventana del nave#ador a lo indicado mediante dataAtitleM)@aler$a de #uitarras). En resumen. 7a primera de las p'#inas podr' tener el t$tulo que indiquemos en el 2 27E del documento :2M7" pero si queremos asi#nar otros t$tulos di!erentes a otras p'#inas de la estructura multip'#ina" deberemos hacerlo a trav%s de los atributos dataAtitle.
Atributos data0%
Quiero hacer una mencin aparte a estos atributos especiales de jQuery Mobile. 5omo has podido ver" al desarrollar para este !ramework se utili&an diversos atributos )dataAI)" como los mencionados dataArole o dataAtitle.
4ota5 ?tro ejemplo que hemos puesto en este art$culo de la estructura multip'#ina es dataArelM)dialo#)" que asi#nado a un enlace" provoca que la p'#ina que se est' enla&ando se muestre como si !uera un cuadro de di'lo#o. M's adelante veremos m's cosas acerca de los cuadros de di'lo#o" pero para que se identi!ique ese dataArelM)dialo#) pon#o aqu$ el cdi#o del enlace donde se ha colocado ese atributo.
'a #ref="9comprar" data.rel="dialog",comprar una guitarra'-a,
2odos estos atributos con pre!ijo dataA son per!ectamente v'lidos en la sintaxis :2M7=" ya que las especi!icaciones del len#uaje permiten cualquier n8mero de atributos que comiencen por la cadena )dataA). En :2M7= se utili&an para embeber datos de las aplicaciones web en las propias etiquetas del :2M7 y jQuery Mobile los utili&a" como has podido comprobar" para con!i#urar el !uncionamiento de las p'#inas desarrolladas con estas librer$as. M's adelante veremos otros usos de esta t%cnica para implementar diversos componentes de inter!aces de usuario" con!i#urar las transiciones entre p'#inas" el comportamiento de los enlaces" etc.

12
Conclusin
0e momento dejamos por aqu$ estas explicaciones" o!reciendo el enlace al ejemplo en marcha donde puedes ver la estructura multip'#ina. 5omo podr's comprobar al ver el ejemplo en marcha" se han reali&ado dos tipos de comportamientos din'micos. *rimero las transiciones entre p'#inas" con un e!ecto de desplamiento suavi&ado. 7ue#o el cambio autom'tico del 2 27E del documento" al pasar de una p'#ina a otra. Es simplemente una pequea muestra de las posibilidades del !ramework y de como" a partir de mero cdi#o :2M7" se pueden con!i#urar diversos dinamismos. /i hace !alta decir que" si no bas'semos nuestras aplicaciones en jQuery Mobile" reali&ar estos comportamientos din'micos exi#ir$a usar bastante 9avascript y lidiar con las particularidades de cada dispositivo y nave#ador.
Artculo por
Crear 1otones con jQuery Mobile

Crear botones con jQuery Mobile es muy sencillo y no re!uiere muc#o esfuer(o, sin embar o los resultados son e)citantes. 5omo venimos adelantando a lo lar#o de los anteriores art$culos del Manual de jQuery Mobile" este !ramework o!rece una amplia #ama de wid#ets o componentes de inter!a& #r'!ica de usuario B@; D. 0ichos componentes van m's all' de los convencionales o!recidos en :2M7 = y aunque es verdad que han tenido #randes mejoras con respecto a las versiones anteriores del len#uaje de la web" son todav$a sobrepasados en calidad y variedad por los que podemos crear a trav%s de jQuery Mobile. Es por ello que jQuery Mobile o!rece una alternativa muy divertida de enriquecer visualmente nuestras aplicaciones web para mviles" a trav%s de toda una cantidad de !ormas y e!ectos que vienen prediseados en el !ramework. 7o mejor es que podemos acceder a todo esto de manera muy !'cil" lo que nos permitir' crear con extraordinaria sencille& @; s visualmente m's atractivas. En este articulo" y en otros que publicaremos en breve" estudiaremos las !ormas en que se pueden crear" personali&ar y trabajar con componentes de inter!a& #ra!ica de usuario. 0e momento nos iniciaremos con la creacin de botones" que son unos de los elementos m's usados en cualquier aplicacin" ya sea para la web o para escritorio. 4eremos que jQuery Mobile nos o!rece una alternativa para crear botones de est%tica atractiva y !'cil de implementar en nuestros proyectos" aplicaciones web o sitios para mviles.
2n 1otn simple de jQuery Mobile

jQuery Mobile o!rece una manera simple de crear nuestros botones" a partir de una serie de propiedades o atributos que vienen predeterminados en el !ramework. 7o m's destacable es que" para lo#rar nuestro objetivo" solo necesitamos pocas l$neas de cdi#o y adem's" todo en :2M7.
4ota5 7a posibilidad de con!i#urar elementos de inter!a& #r'!ica a trav%s de :2M7 es una de las caracter$sticas de jQuery Mobile y es es una #ran di!erencia con respecto a las librer$as jQuery ; " donde requer$amos de 9avascript para crear y mostrar nuestros componentes de inter!a& #ra!ica de usuario o wid#ets. 3unque vale la pena decir que dichos scripts no eran muy di!$ciles de concebir o crear" pues todo lo que tiene que ver con jQuery est' diseado para !acilitarnos la vida.
-i recordamos un poco sobre lo que hemos aprendido en desarrolloweb.com sobre de jQuery ; para crear un botn lo" cual no era muy di!$cil" primero necesit'bamos un cdi#o :2M7 como el si#uiente(
'a #ref="9" id ="boton" , ste es m3 buttton simple j?JG'-a,
El cual es un simple enlace" el cual se re!erencia a trav%s del id botn" pero que jQuery ; con ayuda de al#o de javas-cript lo convert$a en un bonito botn" dicho script ser$a al#o como el si#uiente(
$%"9boton"&.button%&;

13
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3hora bien" en el caso de jQuery Mobile no se requiere crear scripts para implementar nuestros botones. Eso lo hacemos de !orma directa en nuestro documento o cdi#o :2M7. -e lo#ra con cdi#o como el si#uiente(
'a #ref="9" id ="boton" data.role="button" , ste es m3 buttton simple con j?M'-a,
5omo podemos ver !ue muy !'cil crear nuestro botn. -olo tuvimos que asi#narle el valor de button al atributo dataArole de nuestro enlace" al#o que podemos hacer sobre un botn creado a trav%s de la etiqueta input lo cual ser$a al#o como esto(
'input t3pe="button" data.role="button" "alue="Koton input"-,
Es decir que !'cilmente podemos hacerlo de !orma directa sobre nuestros submit para enviar !ormularios a un servidor" lo que nos ayudar$a a salir del cl'sico y convencional botn :2M7" eso lo lo#ramos con la si#uiente l$nea de cdi#o(
'input t3pe="submit" data.role="button" "alue="Koton input con t3pe submit"-,
Modi icar las propiedades por de ecto de los botones de jQuery Mobile
;na de las cosas que pasan con los botones es que" por de!ecto" ocupan todo el ancho de la pantalla" sin importar la resolucin de la misma" pero en ciertos momentos no queremos hacer eso. Existe una manera muy simple de crear botones que se ajusten a la tamao del texto que llevan dentro y al i#ual que en la creacin del botn por de!ecto" solo necesitamos modi!icar al#unos atributos en el mismo cdi#o :2M7. *odemos conse#uirlo con el si#uiente cdi#o(
'a #ref="9" data.role="button" data.inline="true" ,Tiene el mismo anc#o del te8to'-a,
5omo se puede observar solo tuvimos que modi!icar el atributo dataAinline y asi#narle el valor a true con el !in que el botn se limite al tamao del texto. ?tras de las cosas que se pueden hacer con los botones es cambiar sus colores" con el !in de no quedarnos con los que vienen de manera predeterminada. 5omo todo en jQuery Mobile" se hace de manera muy simple" r'pida ycon un #rado de e!iciencia muy alto. Es decir" que si lo que queremos es tener un boton con di!erentes colores" tendr$amos que escribir un atributo m's a nuestros botones" dicho cdi#o puede ser el si#uiente(
'a #ref="9" data.role="button" data.inline="true" data.t#eme="e" , ste boton es de otro color'-a,
7o que hicimos !ue a#re#ar el atributo dataAtheme al cual le damos el valor de e atribuy%ndole un tema nuevo a nuestro botn. 0ichos temas van de la a hasta la e. 5omo podemos hacernos a la idea" cada tema de tendr' unos colores di!erentes. *or ejemplo" si probamos el si#uiente cdi#o(
'input t3pe="submit" data.role="button" "alue="submit con otro color" data.t#eme="b"-,
?btenemos un botn con un muy atractivo color a&ul" el cual equivale al darle el valor de b al tributo dataAtheme. 2odo esto nos comprueba que hacer inter!aces #ra!icas de usuario que visualmente sean atractivas" es una tarea que se puede hacer en jQuery Mobile con cierto #rado de !acilidad. *ara mayor claridad le dejo un cdi#o de una p'#ina web la cual contiene todo lo explicado en este art$culo" con el cual espero que aclaren al#unas dudas que hayan quedado en el aire(
'(D)*T+P #tml, '#tml, '#ead, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,Kotones con j?uer3 Mobile'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page", 'di" data.role="#eader",'#1,Kotones'-#1,'-di", 'di" data.role="content", 'a #ref="9" id ="boton" data.role="button" , ste es m3 buttton'-a, 'input t3pe="button" data.role="button" "alue="Koton input"-, 'input t3pe="submit" data.role="button" "alue="Koton input con t3pe submit"-, 'a #ref="9" data.role="button" data.inline="true" ,Tine el mismo anc#o del te8to'-a,

14

'a #ref="9" data.role="button" data.inline="true" data.t#eme="e" , ste boton es de otro color'-a, 'input t3pe="submit" data.role="button" "alue="submit con otro color" data.t#eme="b"-, '-di", 'di" data.role="footer",'#=,Kotones'-#=, '-di", '-bod3, '-#tml,
2ambi%n podemos ver este cdi#o !uncionando en un ejemplo ya construido. Espero que se diviertan con jQuery MobileQQ 0e momento lo dejamos hasta una prxima ocasin" donde hablaremos de cmo hacer listas m's atractivas con este !ramework. /o olviden dejar comentarios y apuntes sobre este art$culo.
Artculo por
Dairo Galeano
Con jQuery Mobile las listas son mejores

Creacin de listas y los usos !ue le podemos dar en jQuery Mobile dentro de nuestras aplicaciones web mviles. 3 lo lar#o de diversos art$culos del Manual de jQuery Mobile venimos expresando las #randes ventajas que tiene usar este !ramework para crear aplicaciones" orientadas a dispositivos mviles" con una poderosa inter!a& #ra!ica de usuario B@; D. En el art$culo anterior pudimos ver un ejemplo de ello( 5rear botones con jQuery Mobile. 7a !orma de usar los wid#ets que vienen predeterminados en el !ramework es una tarea muy sencilla" pero obtenemos resultados impactantes" con los cuales podremos sorprender a nuestros ami#os. ;no de los componentes de inter!a& #r'!ica de usuario m's relevante" e!iciente y 8til en jQuery Mobile son las listas" ya que nos pueden servir como men8s de contextos" o cualquier otro uso que le podamos dar en nuestras aplicaciones web mviles. El l$mite est' en nuestra ima#inacin" pues todo en este !ramework se amolda de acuerdo con nuestras necesidades" o m's bien" las caracter$sticas especi!icas del dispositivo mvil que lo car#ue. 7le#ar' el momento en el que tendremos que mostrar un catalo#o de art$culos" o servicios de una empresa" o cualquier cosa similar. Esta es una tarea que podemos cumplir con los componentes o wid#ets listas" que creamos con jQuery Mobile. -i#uiendo el ejemplo del cat'lo#o de productos" podemos tener cada uno de los art$culos or#ani&ados en nuestras listas y al hacer clic" estar$amos viajando de !orma directa a una p'#ina" que nos mostrara toda la in!ormacin del elemento seleccionado.
+jemplo ilustrativo con listas

*ara este articulo donde estamos trabajando con listas vamos a crear un ejemplo bastante sencillo pero muy ilustrativo de las cosas que podemos hacer con dichos elementos. 5on esto obtendremos un hori&onte de ideas e ilustraciones de cosas 8tiles por hacer con las listas" que nos brinda jQuery Mobile /uestro ejemplo tendr' cuatro p'#inas web" incluidas dentro del mismo documento :2M7. En la primera crearemos de inmediato una lista" que nos servir' como ejemplo cl'sico e ilustrativo de este articulo. En la lista habr'n tres elementos con textos di!erentes" al hacer clic sobre uno estaremos viendo una pequea in!ormacin sobre aquello que se haya seleccionado. 7a in!ormacin de cada uno de los textos presentes en los elementos de la lista se alber#ar' en las tres p'#inas restantes. 3unque en nuestro ejemplo no ser'n productos" sino medios de transporte. nicialmente comen&aremos creando una lista sencilla con todas las con!i#uraciones predeterminadas por jQuery Mobile" ya sobre la marcha iremos con!i#ur'ndola para conse#uir mejores e!ectos visuales. *ara obtener una lista sencilla basta con un cdi#o como este(
'ul data.role="list"ie$" ,

15

'li,'a #ref="9coc#e" ,*oc#e'-a,'-li, 'li,'a #ref="9a"ion",<"iDn'-a,'-li, 'li,'a #ref="9aeroplano",<eroplano'-a,'-li, '-ul,
:asta aqu$ hemos conse#uido crear una lista sencilla" donde sus elementos servir'n como enlace para comunicarnos con otras tres p'#inas web. 5ada p'#ina esta relacionada de !orma directa con los elementos de la lista" es decir" que al dar clic sobre el elementos con texto de )5oche)" el nave#ador nos llevar' a una p'#ina que contiene in!ormacin acerca de los coches.
+nri.uecer visualmente las listas

3l i#ual que en el caso de los botones" podemos hacer ciertas modi!icaciones e ir a#re#ando atributos a las listas de !orma directa sobre las etiquetas :2M7. Esta posibilidad de con!i#urar los propios wid#ets en el cdi#o :2M7 !acilitar' mucho la vida" a la hora de crear nuestras aplicaciones con jQuery Mobile. Divisiones5 7o primero que vamos a hacer con las listas es crear unos divisores" que son otros elementos de la lista" pero que act8an de !orma di!erente. Rstos elementos son solo para orientar al usuario en la lista. En otras palabras" ellos act8an como una especie de objetos inhabilitados a los eventos que se puedan #enerar por el usuario" y por tanto" no reaccionaran al clic al doble o al teclado etc. En las listas se pueden a#re#ar o indexar divisores en cualquier lu#ar" al#o que es muy !recuente" pues aunque no respondan a nin#8n evento" ellos cumplen una tarea importante. -e trata de una !orma visual de mantener in!ormado al usuario que est' usando nuestra aplicacin web. 3 continuacin vamos a crear divisores en nuestra lista" estos nos servir'n para indicar los di!erentes tipos de medios de transporte" que en nuestro ejemplo son( 2ransporte terrestre y transporte a%reo" para que nuestro usuario sepa por donde va.
4ota5 *ara servir de ejemplo de uso de los divisores podemos pensar en otra cosa. ma#ina que tu lista tuviera productos comerciales. Entonces podr$as poner divisores con textos como( art$culos electrnicos y art$culos de alimentacin.
7a tarea con los divisores es muy sencilla y se consi#ue con un cdi#o como el si#uiente.
'ul data.role="list"ie$" , 'li data.role="list.di"ider",Medios de transporte terrestrses'-li, 'li,'a #ref="9coc#e" ,*oc#e'-a,'-li, 'li data.role="list.di"ider",Medios de transporte <Lreos'-li, 'li,'a #ref="9a"ion",<"iDn'-a,'-li, 'li,'a #ref="9aeroplano",<eroplano'-a,'-li, '-ul,
5omo pueden darse cuenta" es muy sencillo. -olo hay que a#re#ar dos elementos SliT en la posicin donde deseamos tener nuestros divisores" pero a estos elementos debemos asi#narle el atributo dataArole al cual le danos el valor de listA divider. 5on ese 8nico detalle es su!iciente para obtener un divisor en nuestras listas.
4ota5 En el cdi#o anterior los divisores se han identado a la derecha" pero eso simplemente es para que visualmente se puedan identi!icar mejor. -obra decir que en el cdi#o :2M7 estos san#rados no se tienen en cuenta por los nave#adores" aunque s$ nos sirven a los desarrolladores a leer mejor los cdi#os que creamos.
,angrado5 ?tro asunto que atae a las listas es que en su con!i#uracin por de!ecto no conservan un mar#en en la pa#ina. -i lo deseamos" podemos a#re#ar ese mar#en por medio de un nuevo atributo a nuestra lista" que se coloca de !orma directa en la etiqueta SulT del :2M7. Ese atributo es el dataAinset" el cual recibe un valor booleano" es decir" que si queremos producir el mar#en solo que darle valor de true al atributo. 5on esto obtendremos una lista que conservar' ciertos m'r#enes con respecto a la pa#ina" adem's de crearle un borde redondeado. 2odo eso se lo#ra con un cdi#o como este(
'ul data.role="list"ie$" data.inset="true",

16
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'emas gr!ficos de personali3acin5 7os componentes de inter!a& #ra!ica de usuario en jQuery Mobile comparten la #ran mayor$a de atributos" es decir" que a nuestra lista podemos modi!icar su dataAtheme con el !in de obtener una lista con color di!erente. Esto se consi#ue i#ual que se explic en los botones" con un cdi#o :2M7 como el si#uiente(
'ul data.role="list"ie$" data.inset="true" data.t#eme="b",
2ambi%n podemos hacer modi!icaciones en sus divisores a#re#ando un nuevo atributo en la etiqueta SulT. Es 8til hacer esto para que nuestros divisores se di!erencien de los dem's elementos" qued'ndonos un cdi#o como este(
'ul data.role="list"ie$" data.inset="true" data.t#eme="b" data.di"idert#eme="a",
5omo se puede observar" solo a#re#amos un nuevo atributo dataAdividertheme con el que se la da un tema a los divisores de la a lista" este es el )a)" con el conse#uimos un color ne#ro. El e!ecto es que los divisores aparecer'n con el color di!erente que asi#na jQuery Mobile por de!ecto.
Cdigo completo de uso de listas en jQuery Mobile

*ues bien" espero que hayan comprendido la importancia de las listas. 3hora" para mayor claridad de todo lo explicado vamos a compartir el cdi#o completo con todo lo que hemos tratado en este art$culo. 2ambi%n usaremos aspectos vistos en la seccin de 5rear botones con jQuery Mobile" al i#ual que otros temas que se han tratado previamente en este manual.
'(D)*T+P #tml, '#tml, '#ead, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,Liastas con j?uer3 Mobile'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'scriptsrc="j4uer3.1.6.1.min.js",'-script, 'scriptsrc="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page" id="inicio", 'di" data.role="#eader",'#1,Listas'-#1,'-di", 'di" data.role="content", 'ul data.role="list"ie$" , 'li,'a #ref="9coc#e" ,*oc#e'-a,'-li, 'li,'a #ref="9a"ion",<"iDn'-a,'-li, 'li,'a #ref="9aeroplano",<eroplano'-a,'-li, '-ul, 'ul data.role="list"ie$" data.inset="true" data.t#eme="b" data.di"idert#eme="a", 'li data.role="list.di"ider",Medios de transporte terrestrses'-li, 'li,'a #ref="9coc#e" ,*oc#e'-a,'-li, 'li data.role="list.di"ider",Medios de transporte <ereos'-li, 'li,'a #ref="9a"ion",<"iDn'-a,'-li, 'li,'a #ref="9aeroplano",<eroplano'-a,'-li, '-ul, '-di", 'di" data.role="footer",'#=,Listas'-#=, '-di", '-di", 'di" data.role="page" id="coc#e", 'di" data.role="#eader",'#1,*oc#es'-#1,'-di", 'di" data.role="content", Los coc#es son un medio de transporte terrestre'br, 'a #ref="9inicio"data.role="button" data.t#eme="b" data.inline="true",Gnicio'-a, '-di", 'di" data.role="footer", '#=,Los coc#es'-#=, '-di", '-di", 'di" data.role="page" id="a"ion", 'di" data.role="#eader",'#1,<"iones'-#1,'-di",

17

'di" data.role="content", Los a"iones son un medio de transporte aereo'br, 'a #ref="9inicio"data.role="button" data.t#eme="e" data.inline="true",Gnicio'-a, '-di", 'di" data.role="footer", '#=,<"iones'-#=, '-di", '-di", 'di" data.role="page" id="aeroplano", 'di" data.role="#eader",'#1,<eroplanos'-#1,'-di", 'di" data.role="content", Los aeroplanos son un medio de transporte aereo0 menor 4ue los a"iones'br, 'a #ref="9inicio"data.role="button" data.t#eme="d" data.inline="true",Gnicio'-a, '-di", 'di" data.role="footer", '#=,<eroplanos'-#=, '-di", '-di", '-bod3, '-#tml,
Espero puedan comprender todo el cdi#o anterior. Lecomiendo leer otros art$culos previos del manual si es que tienes al#una duda sobre asuntos como el sistema multipa#inas de jQuery Mobile. 3ntes de acabar" quiero que se aprecie tambi%n que las tres p'#inas que contienen la in!ormacin de los medios de transporte Bcoche" avin" aeroplanoD" tienen una !orma de retorno al inicio. -on enlaces convertidos en botones" si no sabes cmo crear botones con jQuery Mobile revisa el art$culo publicado anteriormente. 2ambi%n puede ver el ejemplo en !uncionamientos en una p'#ina aparte. 5on esto les dejo hasta la prxima entre#a. 5omo siempre" es todo un placer poder compartir in!ormacin con ustedes. /os vernos pronto y no olvides dejar tus cometarios o dudas.
Artculo por
Dairo Galeano
*os cuadros de di!logo son di erentes en jQuery Mobile

Cmo crear cuadros de di"lo o con jQuery Mobile. *iversos usos y confi uraciones !ue convierten a los cuadros de di"lo o una poderosa #erramienta. ;no de los componentes de inter!a& #ra!ica de usuario m's utili&ado por los desarrolladores son" sin lu#ar a dudas" los cuadros de di'lo#o. ncluso sin importar el entorno en que se ejecute la aplicacin" ya sea web" de escritorio o para dispositivos mviles" e independientemente del objetivo para el que est' destinada. -u importancia se debe a su capacidad de in!ormar al usuario y de servir a la ve& para tomar sencillas decisiones que a!ectan al !lujo de la aplicacin. ?tro detalle importante es que la in!ormacin de los cuadros de di'lo#o se trata de manera di!erente a cualquier otro tipo de componente de inter!a& #ra!ica de usuario" pues siempre obli#an a los usuarios a dar" al menos" una ojeada r'pida a la in!ormacin. 2$picos cuadros de di'lo#o sirven para arrojar pistas de cmo trabajar con las aplicaciones" otros son advertencias y el m's com8n es el de alerta.
4ota5 7as alertas son muy usadas en los entornos web. 2anto es as$ que por lo #eneral" cu'ndo uno lee un manual de 9avascript" lo primero que se ensea es a poner el tradicional )hola mundo) en un mensaje de alerta de nuestro nave#ador. *ara comprobarlo basta hacer memoria y recordar los primeros art$culos que se vieron en 0esarrolloCeb.com en los manuales de 9avascript o en el manual de jQuery.
7as alertas" o cualquier cuadro de dialo#o que creemos en jQuery Mobile" se construye con una sencille& sorprendente. 3dem's son altamente vers'tiles" ya que nos permiten hacer muchas cosas" y cuando di#o que muchas es porque los di'lo#os parecen no tener l$mites" viajando mas all' de una simple alert" con!irm0ialo#" o

18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com input0ialo#. 7a ra&n por la que un cuadro de dialo#o en jQuery Mobile parece no tener l$mites es porque realmente son como una p'#ina web completa" ya sea de las m8ltiples en nuestro documento :2M7 o separada en un archivo aparte. @racias al hecho de ser una p'#ina independiente" podremos hacer multitud de cosas como a#re#arle im'#enes" crear !ormularios" anexarle botones" a#re#ar videos" o todo lo que soporte una p'#ina web corriente. 5on esto se puede entender el sin !in de aplicaciones y posibilidades que los cuadros de di'lo#o pueden tener en jQuery Mobile. *ero claro" tampoco podemos abusar de ellos" recordemos que aun si#uen siendo cuadros de di'lo#o.
Convertir una p!gina (eb en cuadro de dialogo

*ara que una p'#ina se comporte como un cuadro de dialo#o no debemos hacer nada sobre ella" sino que debemos construirla tal cual como se ha venido haciendo en todo el tutorial. 7o que hace que se convierta en un di'lo#o" es un atributo que se a#re#a en el enlace que nos lleva a la p'#ina. 0e modo que" la labor de presentar esa p'#ina como un di'lo#o" la reali&a el propio !ramework y con una implementacin muy simple. El v$nculo tambi%n puede ser un botn" si lo pre!erimos antes que un enlace corriente. En cualquier caso nos llevar' hacia la p'#ina que se comporta como caja de di'lo#o" ya est% dentro del mismo documento :2M7 o !uera de %l. El atributo en concreto que debemos colocar en los enlaces diri#idos a p'#inas que queremos que se comporten como cuadros de di'lo#o es dataArelM)dialo#). 7ue#o veremos ejemplos completos" pero antes quiero aclarar un asunto que !ue motivo de duda entre un #rupo de personas a las que explicaba el !uncionamiento de los di'lo#os en jQuery Mobile( +Qu% hace di!erente a un cuadro de di'lo#o de otro tipo de p'#ina" si solo es una p'#ina normal con un enlace al que hemos colocado un atributo especial, -$ tiene di!erencias y notables" comen&ando por que las p'#inas que son cuadros de di'lo#os no se #uardan en el historial del nave#ador" es decir" que no podremos re#resar a ellas con el botn atr's y por tanto solo tendremos acceso si presionamos el enlace que nos lleva hasta la pa#ina. ?tra di!erencia es que el !ramework se encar#a de poner en el header de la pa#ina un icono de cierre al dialo#o. ?tro detalle visual atractivo que se produce es que la inter!a& #r'!ica del cuadro de di'lo#o aparece !lotando" permaneciendo el documento anterior con el !ondo oscuro. *ero bien" ahora veamos un completo ejemplo de la creacin de un primer cuadro de di'lo#o" a trav%s de un cdi#o cuya sencille& se apreciar'. 2endremos una p'#ina normal y en ella un botn" el cual abrir' el cuadro de dialo#o" que ser' como una especia de alerta. 0icho botn se consi#ue con un :2M7 como el si#uiente.
'a #ref="9dialogo" data.role="button" data.inline="true" data.rel="dialog" data.t#eme="b",<brir dialogo'-a,
4ota5 4uelvo a insistir en que debemos !ijarnos en el atributo dataArel" al cual se le asi#na el valor de )dialo#). 2odo lo dem's que necesitas saber para entender ese cdi#o ya ha sido explicado en art$culos anteriores" como 5rear botones con jQuery Mobile. 3simismo" tambi%n debes haber aprendido el manejo del sistema multiApa#inas" que o!rece el !ramework.
5on un botn como el que creamos en el cdi#o anterior" ya estar$amos haciendo de la pa#ina con id )dialo#o) un cuadro de di'lo#o. -in embar#o" tambi%n debemos crear un mecanismo de re#reso ya que" a di!erencia de las cajas de alerta convencionales que se crean con 9avascript" %stos no permanecen en la p'#ina que los invoca. 0ebes tener en cuenta que cuando se va a un cuadro de di'lo#o se viaja a trav%s del enlace a una nueva p'#ina" a pesar que jQuery Mobile produ&ca una visuali&acin di!erente. *ara re#resar nuevamente a la pa#ina" podrimos a#re#ar el si#uiente cdi#o en la pa#ina con id de )dialo#o).
'a #ref="9aja" data.role="button" data.rel="bac2",<ceptar'-a,
5omo se verse" en este caso tambi%n es un botn" con la di!erencia que esta ve& su atributo dataArel tiene el valor de )back). 5on esto no tenemos la necesidad de asi#nar la direccin al enlace hacia la p'#ina inicial. ncluso si le damos una direccin di!erente a la p'#ina de inicio" jQuery Mobile nos devolver' a la pa#ina que invoc el dialo#o.

19
Asignar temas gr! icos a las cajas de di!logo

?tra de las cosas que podemos hacer con los cuadros de di'lo#o es combinar sus temas" con lo que obtendremos variedad de tipos de alerta. *or ejemplo" podr$amos poner el botn de un color" el encabe&ado de otro y el contenido de otro. -olo tendr$amos que asi#narle temas di!erentes a cada uno de los objetos o elementos mencionados. *ara ver todo esto vamos a crear un se#undo cuadro de dialo#o" que ser' llamado a trav%s de otro botn que construiremos con un :2M7 como este.
'a #ref="9dialogo;" data.role="button" data.inline="true" data.rel="dialog" data.t#eme="c",<brir dialogo configurado'-a,
>a solo bastar$a crear otra p'#ina web e identi!icarla como idM)dialo#o1)" en esta podr$amos por ejemplo hacer lo si#uiente.
'di" data.role="page" id="dialogo;", 'di" data.role="#eader" data.t#eme="b",'#1,dialogo con colores configurados'-#1,'-di", 'di" data.role="content" data.t#eme="a", ste es un cuadro de dialogo configurado 4ue esta dentro del mismo HTML del enlace 'a #ref="9" data.role="button" data.t#eme="e" data.rel="bac2",<ceptar'-a, '-di",
5omo puedes observar solo tenemos que asi#narle el atributo dataAtheme" con di!erentes valores" sobre la etiqueta :2M7 que crea el objeto. 0e esa !orma podemos obtener pa#inas y en este caso de cuadros de di'lo#o m's variados en color.
+jemplo completo de creacin de cuadros de di!logo en jQuery Mobile

*ues bien solo nos resta atar cabos sueltos en el tema de los di'lo#os y para eso les dejo el cdi#o del ejemplo que hemos visto en este articulo.
'(D)*T+P #tml, '#tml, '#ead, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,*uadros de dialogos con j?uer3 Mobile'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page" id="inicio", 'di" data.role="#eader",'#1,Trabajando con dialogos'-#1,'-di", 'di" data.role="content", Presiona el boton para abrir un cuadro de dialogo 'a #ref="9dialogo" data.role="button" data.inline="true" data.rel="dialog" data.t#eme="b",<brir dialogo'-a,'-br, Presiona el boton para abrir un cuadro de dialogo con colores configurados 'a #ref="9dialogo;" data.role="button" data.inline="true" data.rel="dialog" data.t#eme="c",<brir dialogo configurado'-a, '-di", 'di" data.role="footer",'#=,*uadros de dialogos'-#=,'-di", '-di", 'di" data.role="page" id="dialogo", 'di" data.role="#eader" ,'#1,dialogo de ejemplo'-#1,'-di", 'di" data.role="content", ste es un cuadro de dialogo sencillo 4ue esta dentro del mismo HTML del enlace 'a #ref="9" data.role="button" data.rel="bac2",<ceptar'-a, '-di", '-di", 'di" data.role="page"id="dialogo;", 'di" data.role="#eader" data.t#eme="b",'#1,dialogo con colores configurados'-#1,'-di", 'di" data.role="content" data.t#eme="a", ste es un cuadro de dialogo configurado 4ue esta dentro del mismo HTML del enlace 'a #ref="9" data.role="button" data.t#eme="e" data.rel="bac2",<ceptar'-a,

20

'-di", '-bod3, '-#tml,
-era hasta una prxima" esperamos veros pronto y recuerda que puedes ver el ejemplo en !uncionamiento en una p'#ina aparte.
Artculo por
Dairo Galeano
Iconos con jQuery Mobile

+ara facilitar la creacin de interfaces r"ficas, jQuery Mobile incluye una ran ama de iconos predise,ados, !ue podemos incluir en las p" inas muy f"cilmente. 3 lo lar#o del Manual de jQuery Mobile hemos visto que las capacidades de este !ramework son realmente sorprendentes. En art$culos anteriores se han dado a conocer al#unas de las bondades de estas librer$as para el desarrollo de sitios web para dispositivos mviles. :emos relatado el uso de diversos componentes de inter!a& #r'!ica de usuario" pero tambi%n existen otros modos interesantes de enriquecer visualmente nuestros wid#ets. En este art$culo exploraremos una de las !ormas que o!rece jQuery Mobile para mejorar el diseo de las aplicaciones" de una manera sencilla" a trav%s de iconos que vienen prediseados dentro del mismo !ramework. El uso de estos elementos es al#o que nos !acilita mucho la vida a la hora de desarrollar sitios web" pues podemos hacer inter!aces visualmente m's atractivas.
Agregar iconos a los componentes de inter az gra ica de usuario

5omo hemos tratado de demostrar en art$culos anteriores" jQuery Mobile o!rece muchas utilidades" y lo hace de una manera muy !'cil. Es el caso de los iconos. *ara hacer uso de ellos no es necesario de #randes con!i#uraciones o l$neas de cdi#o 9avascript solo un poco mas de :2M7. *ues bien arranquemos con los iconos. ma#inen que tienen" un botn que nos env$a a la p'#ina inicial de nuestra aplicacin web. Este botn se podr$a hacer m's atractivo y visual si ponemos un icono que represente el !in o el uso que tiene. +5u'l seria ese icono, +0nde conse#uimos ese icono, 7as dos pre#untas o dudas las resuelve jQuery Mobile de manera sencilla. *rimero el icono seria una casa que representa el home. *or supuesto" este icono viene incorporado dentro del !ramework. Lespondiendo a la se#unda pre#unta" para hacer que nuestro botn ten#a el icono de la casa" solo se necesita el si#uiente cdi#o(
'a #ref="9" data.role="button" data.icon="#ome" , Gnicio'-a,
-olo hay que a#re#ar un nuevo atributo dataAicon y asi#narle el valor de )home). 5on esto conse#uimos que nuestro botn ten#a un pequeo icono de una casa. *ero eso no es todo" jQuery Mobile dispone de iconos en varios colores y utili&ar' aquel que mejor se vea con el tema #r'!ico que est%s utili&ando en tu aplicacin. -upon#amos que tu botn tiene el tema )a)" con el que conse#uimos que elementos como botones sean de color ne#ro. En ese caso el icono ser' de color blanco" para que resalte. 3hora si tienes el tema )c)" que es un color con tono muy bajo" el !ramework le asi#nar' a nuestro botn un icono m's oscuro" siempre acorde al color del tema.

21
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com jQuery Mobile cuenta con una lar#a lista de iconos. 2odos se indican a trav%s de distintos valores del atributo dataAicon. 3l#unos ejemplos son los si#uientes( 6lecha hacia la i3$uierda( dataAiconM)arrowAl) 6lecha hacia la derecha5 dataAiconM)arrowAr) 6lecha hacia arriba5 dataAiconM)arrowAu) 6lecha hacia abajo5 dataAiconM)arrowAd) /liminar5 dataAiconM)delete) Mas5 dataAiconM)plus) Menos5 dataAiconM)minus)
4ota5 Esta es solo una lista parcial" por mencionar al#unos ejemplos. -i quieres saber la lista completa te invito a verla en la documentacin o!icial de jQuery Mobile.
&osicin de los iconos

*or de!ecto jQuery Mobile" mostrara los iconos en la parte i&quierda del botn" pero esa con!i#uracin tambi%n se puede alterar a trav%s de un atributo en el cdi#o :2M7. *odemos observar el si#uiente ta#(
'a #ref="9" data.role="button" data.icon="plus" data.iconpos="bottom", Gnicio '-a,
5omo se puede ver" ahora usamos otro icono" con nombre )plus)" adem's en el cdi#o :2M7 a#re#amos el atributo dataAiconposM)bottom)" para poner el icono bajo el texto. Este atributo puede recibir los si#uientes valores para posicionar el icono( )top)" )le!t)" )ri#ht) y )bottom). -obra la explicacin de los resultados que obtendremos con cada uno de ellos. 3dem's de los valores mencionados anteriormente" el atributo dataAiconApos puede recibir un quinto valor" el cual es( )notext)" con el que eliminamos el texto de nuestro botn y solo aparecer' el icono que le hayamos asi#nado. 3hora crearemos un botn que solo tendr' nuestro icono" es decir" no aparecer' el texto. 7o a#re#aremos dentro del header" con el !in de obtener un botn parecido al de la documentacin de jQuery Mobile" al#o que conse#uimos con el si#uiente cdi#o(
'a #ref="9" data.role="button" data.icon="#ome" data.iconpos="note8t" class="ui.btn. rig#t",Gnicio'-a,
5omo pueden ver" no solo lo dejamos sin texto" tambi%n le asi#namos la clase 5-- )uiAbtnAri#ht) con el !in de que apare&ca a la derecha del header. 2odo esto viene prediseado en el !ramework" solo debemos usarlo" a trav%s del :2M7.
Dnde situar los arc3ivos de los iconos jQuery Mobile

7os iconos son archivos #r'!icos y por tanto" para que se vean en tu sitio web" tendr'n que estar en al#8n lu#ar accesible por el nave#ador. En principio esa locali&acin puede variar" atendiendo a dos posibles usos del !ramework. .. -i estas trabajando con jQuery Mobile dentro de tu mismo servidor o de !orma local Bes decir" entraste a su web http(HHjquerymobile.com" bajaste el &ip del !ramework para incluirlo en tus p'#inasD" ver's que dentro de la descar#a hay una carpeta llamada )ima#es)" la cual debes incluir dentro del directorio de tu servidor donde has colocado el estilo 5-- de jQuery Mobile. BEl archivo de hojas de estilo de jQuery Mobile se llama al#o como jquery.mobileA..E.min.cssD. 1. -i estas trabajado con el 50/ de jQuery Mobile" es decir" est's incluyendo tanto los estilos como los scripts 9avascript a partir de la ruta absoluta del propio dominio del !ramework" no necesitas incluir las im'#enes en nin#8n lu#ar. Es decir" los iconos se acceder'n directamente desde el servidor de jQuery Mobile y por tanto no necesitas copiarlos en tu espacio de hostin#.

22
&oniendo todo junto

*ara !acilitar un poco las cosas voy a dejar un cdi#o :2M7" con una pa#ina web de ejemplo donde se usa todo lo explicado en este articulo. 0ebo mencionar que esta web" no hace nada especial solo demuestra el !uncionamiento de los icono y todo lo expuesto en el presente articulo.
'(D)*T+P #tml, '#tml lang="es", '#ead, 'meta c#arset="utf./"-, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,Gconos con j?uer3 Mobile'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page", 'di" data.role="#eader" data.t#eme="b", 'a #ref="9" data.role="button" data.icon="#ome" data.iconpos="note8t" class="ui.btn. rig#t",Gnicio'-a, '#1,Jso de iconos con j?uer3 Mobile'-#1, '-di", 'di" data.role="content" data.t#eme="c", 'a #ref="9" data.role="button" data.icon="#ome" ,Gnicio'-a, 'a #ref="9" data.role="button" data.icon="plus" data.iconpos="bottom",Gnicio'-a, '-di", 'di" data.role="footer" data.t#eme="b", '#=,Jso de iconos con j?uer3 Mobile'-#=, '-di", '-di", '-bod3, '-#tml,
El ejemplo en marcha se puede ver en una p'#ina aparte. *ara terminar te invito a modi!icar el cdi#o y obtener di!erentes posiciones de los iconos" adem's de probar otras im'#enes de las que o!rece el !ramework.
Artculo por
Dairo Galeano
*as barras de navegacin y transiciones en jQuery Mobile

-rtculo dedicado a las barras de nave acin, !ue conse uimos con el role navbar, y las transiciones entre p" inas en jQuery Mobile. ;na de las cosas que particularmente m's me han #ustado de jQuery Mobile son las barras de nave#acin" por ser extremadamente pr'cticas. -irven precisamente para lo que su nombre indica" nave#ar" pero lo hacen de una manera ma#istral. *oseen un aspecto muy vistoso" adem's de ciertas propiedades que podremos ajustar con el !in de hacerlas m's potentes. *ara explicar las barras de nave#acin vamos a reali&ar al#o parecido al ejemplo desarrollado en el art$culo donde hablamos sobre las listas" donde ten$amos cuatro p'#inas dentro del mismo documento :2M7. 7a primera es una p'#ina inicial y las otras tres sirven para mostrar la in!ormacin adicional a la pa#ina. En este caso vamos a hacer el ejemplo de una p'#ina que hable sobre jQuery" otra p'#ina que hable de jQuery ; y una 8ltima sobre jQuery Mobile. 7a p'#ina inicial tendr' solo una introduccin y la barra de nave#acin para ir a las otras. 3dem's" para completar el art$culo" veremos tambi%n al#unas cosas interesantes de la con!i#uracin de jQuery al respecto de las transiciones.

23
Agregando las barras de navegacin

7as barras de nave#acin son al#o parecidas a las pestaas" por eso lo ideal es ponerlas en el encabe&ado Belemento con dataAroleM)header)D" o en el pie de la p'#ina Belemento con dataAroleM)!ooter)D. Esto no es estrictamente necesario" pero hace que nuestra aplicacin est% mejor or#ani&ada. En el caso del ejemplo de este art$culo" pondremos la barra de nave#acin en el pie de la p'#ina" al#o que se lo#ra con el si#uiente cdi#o(
'di" data.role="na"bar", 'ul, 'li,'a #ref="9j4" ,j?uer3'-a,'-li, 'li,'a #ref="9j4ui" ,j?uer3 JG'-a,'-li, 'li,'a #ref="9j4m",j?uer3 Mobile'-a,'-li, '-ul, '-di",
5omo debemos saber" si hemos se#uido la marcha del Manual de jQuery Mobile" a todo lo que tiene que ver con los wid#ets del !ramework" debemos a#re#arle el atributo dataArole. En este caso recibe el valor de )navbar). 3dem's" como se aprecia en el cdi#o anterior" tenemos que crear una estructura en :2M7" con un un elemento 0 4" dentro del cual debe estar contenida una lista BElemento ;7D. *ero atencin porque esta lista no or#ani&ar' sus elementos uno debajo del otro" sino uno a continuacin del otro" es decir" crea una barra hori&ontal. En este momento" tal ve& al#unos lectores se preocupen por el espacio" en caso de que" al expandirse de !orma hori&ontal" no quepan todos los elementos en las a menudo estrechas pantallas de los dispositivos. El problema lo resuelve jQuery Mobile de !orma muy e!iciente" ya que cada uno de los elementos tiene el mismo ancho" es decir que si tenemos dos elementos" cada uno tendr'" la mitad del ancho de la barra" y si son tres entonces cada uno ser' de un ancho i#ual a un tercio de la barra. 3un hay m's" pues si la pantalla es muy pequea" o son muchos elementos" entonces mostrar$a la barra en varias l$neas" pasando de una !ila de elementos a una rejilla o tabla.
Agregando temas
3 lo lar#o del Manual de jQuery Mobile" hemos visto que para a#re#ar temas a cualquiera de los wid#ets" presentes en el !ramework" solo debemos colocar el atributo dataAtheme. -in embar#o" en las barras de nave#acin no !unciona as$. Es decir" si en nuestro elemento 0 4 hacemos esto" no se provocar' nin#8n cambio. En cambio" si queremos que todos los elementos de la barra de nave#acin se vean di!erentes al que jQuery Mobile le asi#na por de!ecto" debemos a#re#ar el dataAtheme en el elemento que contiene a nuestra barra" que en este caso es el pie de la p'#ina. -i hacemos lo que se explicaba anteriormente terminar$amos por construir un pie de p'#ina como el si#uiente.
'di" data.role="footer" data.position="fi8ed" data.t#eme="b", 'di" data.role="na"bar", 'ul, 'li,'a #ref="9j4" data.icon="star",j?uer3'-a,'-li, 'li,'a #ref="9j4ui" data.icon="plus", j?uer3 JG '-a,'-li, 'li,'a #ref="9j4m" data.icon="grid", j?uer3 Mobile '-a,'-li, '-ul, '-di", '(.. -na"bar .., '-di", '(.. -footer ..,
5omo puedes ver adem's de a#re#ar el tema )b) al pie de la p'#ina" con el que obtenemos el color a&ul" tambi%n le puse un icono a cada uno de los elementos que componen la barra de nave#acin. -i no sabes cmo trabajar con iconos" revisa el art$culo anterior del manual de jQuery Mobile donde nos dedicamos a explicar el tema de los iconos y sus con!i#uraciones. *ero cabe resaltar que a cada uno de los elementos" puedes asi#narle un tema di!erente. 2al ve& quieras que al#uno resalte" como por ejemplo el que tiene el texto jQuery Mobile" al#o que conse#uimos con un cdi#o como el si#uiente.
'li,'a #ref="9 j4m" data.icon="grid" data.t#eme="e" data.transition="flip", j?uer3 Mobile '-a,'-li,
3hora hemos a#re#ado un dataAtheme a un solo elemento" pero qui&'s les llame la atencin" el atributo dataAtransition. 5on esa con!i#uracin lo#ramos que al pasar de una p'#ina a otra se modi!ique la transicin normal que hace jQuery Mobile.

24
"ransiciones entre p!ginas con jQuery Mobile

jQuery Mobile cuando se pasa de una p'#ina a otra" tanto si son archivos di!erentes como si son p'#inas en el mismo documento :2M7 con la estructura multip'#ina" se produce una transicin autom'tica. Este asunto ya se hab$a comentado anteriormente en otros art$culos de 0esarrolloCeb.com" pero para los que no lo sepan todav$a" se trata de un e!ecto especial bastante atractivo" que mediante una animacin suavi&ada" nos intercambia la p'#ina que estamos visuali&ando. 7a transicin por de!ecto se puede cambiar por medio de atributos :2M7 de una manera muy sencilla. El atributo dataAtransition" con el cual modi!icamos las transiciones entre las pa#inas" o cuadros de di'lo#o" puede recibir los si#uientes valores( -lide( la que se asi#na por de!ecto. dataAtransitionM)slide) -lide ;p( 7a p'#ina se perder' por la parte superior. dataAtransitionM)slideup) -lide 0own( 7a p'#ina se perder' por la parte in!erior. dataAtransitionM)slidedown) *op( 7a p'#ina aparece de improvisto. dataAtransitionM)pop) Fade( :ace un e!ecto de !undido. dataAtransitionM)pop) Flip( 7a p'#ina hace un bonito e!ecto 60. transitionM)!lip)
4ota5 7a transicin !lip no !unciona muy bien en nave#adores Fire!ox e ntenet Explorer. -i quieres ver el e!ecto debes probarlo en @oo#le 5hrome o -a!ari" tambi%n es di!erente el e!ecto que se #enera en los dispositivos 3ndroid 1.1" donde hemos probado el e!ecto y no es el resultado que se obtienen en dispositivos con i?- G.x. En i?- =.I !unciona per!ecto tambi%n.
+jemplo de navegacin en una p!gina (eb

*ara mayor comprensin dejaremos el cdi#o del ejemplo mencionado en este art$culo. *or ahorrar un poco de espacio solo he colocado el cdi#o de las dos primeras p'#inas. 2endremos una barra de nave#acin en la p'#ina inicial. 0ebo mencionar que la p'#ina no cumple #randes tareas !uncionales" pero ilustra el uso de las barras de nave#acin" adem's de las transiciones de p'#inas. '(D)*T+P #tml,
'#tml, '#ead, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title, Karras de !a"egacion'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page" id="inicio", 'di" data.role="#eader" data.position="fi8ed", '#1,j?uer3'-#1, '-di",'(.. -#aeder .., 'di" data.role="content", 'p,!a"ega a tra"Ls de esta aplicaciDn de DesarrolloMeb.com para conocer algo sobre j?uer3'-p, '-di",'(.. -content .., 'di" data.role="footer" data.position="fi8ed" data.t#eme="b", 'di" data.role="na"bar", 'ul, 'li,'a #ref="9j4" data.icon="star" data.transition="pop",j?uer3'-a,'-li, 'li,'a #ref="9j4ui" data.icon="plus" data.transition="slideup", j?uer3 JG '-a,'-li, 'li,'a #ref="9j4m" data.icon="grid" data.t#eme="e" data.transition="flip", j?uer3 Mobile '-a,'-li, '-ul, '-di",'(.. -na"bar .., '-di",'(.. -footer .., '-di",'(.. -page .., 'di" data.role="page" id="j4m", 'di" data.role="#eader" data.position="fi8ed", '#1,j?uer3 Mobile'-#1,'a #ref="9inicio" data.role="button" data.icon="#ome" data. iconpos="note8t" class="ui.btn.rig#t",Gnicio'-a,

25

'-di",'(.. -#aeder .., 'di" data.role="content", 'p,Lectura inicial de la $eb oficial de j?uer3 Mobile@'-br, 'span class="ui.btn.acti"e", j?uer3 Mobile@ frame$or2 para mD"iles.'-span, '-p, 'img st3le="$idt#@=5N;" src="#ttp@--upload.$i2imedia.org-$i2ipedia-commons-O-O=-P4uer3. mobile.logo.png"-, '-di",'(.. -content .., 'di" data.role="footer" data.position="fi8ed" data.t#eme="b", '#=,j?uer3 Mobile'-#=, '-di",'(.. -footer .., '-di",'(.. -page .., '-bod3, '-#tml,
5on todo esto hemos aprendido dos tpicos de jQuery Mobile. *or un lado las mencionadas barras de nave#acin" pero tambi%n hemos dado un primer repaso a las transiciones entre p'#inas. /os vemos en una prxima" recuerda dejar tus comentarios y apuntes. 0e tarea te queda hacer las dos p'#inas restantes" o bien puedes verlas ya reali&adas en el ejemplo completo en una p'#ina aparte.
Artculo por
Dairo Galeano
+lemento 4lider de jQuery Mobile

Con jQuery Mobile obtenemos ele antes sliders e interruptores, con los !ue podemos enri!uecer visualmente nuestras aplicaciones mviles. :asta ahora en el Manual de jQuery Mobile hemos aprendido a implementar variados componentes de inter!a& de usuario" que se pueden crear a trav%s del atributo dataArole. 5omo se habr' podido comprobar" a partir de diversos atributos con el pre!ino )dataA) se pueden optimi&ar elementos :2M7 sencillos" y mediante jQuery Mobile convertirlos en ele#antes wid#ets. 7o mejor es que todo se reali&a de una !orma automati&ada y sin necesidad de pro#ramacin. 5omo todos sabemos" tambi%n :2M7 posee de diversos componentes de inter!a& #r'!ica de usuario" que por lo #eneral vienen incluidos dentro de los !ormularios. 3dem's" ahora" con la versin cinco del len#uaje de la web" disponemos de al#unos elementos de !ormulario adicionales" que en #eneral extienden los /*;2 de toda la vida. -e trata de una nueva #ama de types di!erentes" es decir" diversos tipos de campos /*;2" y dentro de %stos" aparecen los sliders. 7os sliders son una inter!a& #r'!ica de usuario que nos permiten por medio de un elemento desli&able" ajustar un valor entre un ran#o. 3hora bien" qui&'s muchos de vosotros os pre#untar%is +-i podemos crear sliders con :2M7=" para que necesitamos a jQuery Mobile, -i bien con :2M7 = se pueden crear sliders" estos cuentan con la !orma o apariencia convencional" as$ que si lo que queremos es romper un poco el esquema debemos recurrir a jQuery Mobile" para la creacin de sliders m's so!isticados" con nuevas !uncionalidades y capacidades de personali&acin. *or si esto te parece poco" qui&'s acabe de convencerte esta posibilidad" de expandir los elementos slider" si sabes que realmente no necesitas con!i#urar practivamente nada en jQuery Mobile" ya que la !iloso!$a del !ramework es reali&ar m's cosas con menos es!uer&o.
Modos de creacin de los sliders con jQuery Mobile

*ara la creacin de sliders con jQuery Mobile" disponemos de opciones" con una estructura muy sencilla" adem's de otras opciones de con!i#uracin visual. 3rranquemos con la creacin m's sencilla" en donde solo debemos crear elementos /*;2" ya que jQuery Mobile se encar#ar' de aplicarles el tema #r'!ico correspondiente" dependiendo del valor que posea su atributo type. 3s$" para crear un slider solo debemos escribir el si#uiente cdi#o.
'label for="slider",Ilider Iimple@ '-label,

26

'input t3pe="range" name="slider" id="slider" ma8="155" min="1" "alue=";O" -,
5omo puedes ver" es solo un elemento /*;2 Bya que el label realmente no !orma parte del slider" simplemente coloca un texto al ladoD. -er' jQuery Mobile el que se tome el trabajo de a#re#ar el 5-- correspondiente para que !uncione de manera e!iciente.
4ota5 *ara quienes no est'n relacionados con este nuevo /*;2 de :2M7=" cabe comentar que las nuevas especi!icaciones del len#uaje de la web contienen .6 nuevos tipos de campos /*;2. 5ada uno de estos nuevos /*;2 son importantes sobre todo" para dispositivos t'ctiles" ya que dependiendo del tipo de input aparecer' un teclado virtual acorde para rellenar el campo. *odremos encontrar" entre otros" campos espec$!icos para(
nput typeMKtelK( Formato para n8meros de tel%!onos. nput typeMKsearchK( Formato para campos de b8squeda. nput typeMKurlK( Formato para escribir direcciones web. nput typeMKnumberK( Formato para escribir valores num%ricos. nput typeMKemailK( Formato para direcciones de email. nput typeMKran#eK( 5on este trabajamos en el presente articulo. nput typeMKdatetimeK( Util para !echas y horas.
*ara vuestra in!ormacin" estamos preparando documentacin sobre este asunto que pronto aparecer' en 0esarrolloCeb.com.
7a etiqueta :2M7" como has visto" no tiene cdi#o 9avascript por nin#una parte. Es decir" jQuery Mobile lo implementa todo sin que debas preocuparte de nada. -in embar#o" debes tener en cuenta que el slider se cree a partir de un elemento /*;2" pues" de no hacer esto" el !uncionamiento del slider no estar$a #aranti&ado. 7as otras opciones que tenemos a disposicin de los sliders est'n relacionadas con los aspectos visuales del wid#et. 5omo ya podemos saber" disponemos del atributo dataAtheme para modi!icar el color de los componentes. 3dicionalmente" los slider cuentan tambi%n con dataAtrackAtheme. 3s$ que si lo que queremos es un slider con variedad de colores tanto en el control que se desli&a como en la ruta por donde pasa el control" necesitar$amos un cdi#o como el si#uiente(
'label for="slider1",Ilider Iimple con temas@ '-label, 'input t3pe="range" name="slider1" id="slider1" ma8="155" min="1" "alue="B5" data.t#eme="b" data. trac2.t#eme="a"-,
5omo se puede notar ahora hemos cambiado los atributos antes mencionados" lo cual no requiere mayor explicacin si has se#uido el Manual de jQuery Mobile hasta este punto.
)acer botones de opciones binarias o interruptores

Existen unos componentes de inter!a& #r'!ica que son parecidos a los slider" pero que solo tienen dos estados. -e denominan interruptores y qui&'s podamos haberlos visto en !uncionamiento en aplicaciones para dispositivos mviles. 5on un interruptor tenemos dos opciones( los podemos activar o desactivar. 5on ello podemos con!i#urar al#una !uncin en el dispositivo o en la aplicacin web que estemos desarrollando. /ormalmente un slider lo crearemos a partir de una etiqueta /*;2" tal como se explic hace unos instantes. /o obstante" cuando se trata de crear interruptores" se utili&a un elemento -E7E52" aunque el valor de dataAroler continua

27
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com siendo )slider). 4eamos un cdi#o de ejemplo con el cual podemos crear uno de estos interruptores.
'select name="slider" id="flip1" data.role="slider", 'option "alue="off",)ff'-option, 'option "alue="on",)n'-option, '-select,
5omo se puede ver" es un elemento -E7E52 con el atributo dataArole" al cual asi#namos el valor )slider). 3dem's" cabe !ijarse tambi%n en los dos elementos ?*2 ?/" que expresan los distintos estados del interruptor. *ara indicar a jQuery Mobile cuando est' encendido y cuando est' apa#ado debemos con!i#urar los value de los ?*2 ?/. *uedes ver en el cdi#o de ejemplo los valores en el atributo value" )o!!) en el primero y )on) en el se#undo.
4ota5 -i haces m's ?*2 ?/ de los debidos" jQuery Mobile creara el slider de todas !ormas" pero no ser' nada a#radable el resultado" obtendr's las tres opciones" pero enredadas. 0e i#ual !orma" si no le das por ejemplo el valor al atributo value de la opcin de encendido" el interruptor no !uncionar'.
3 la hora de crea un interruptor tambi%n lo puedes personali&ar" con los temas que disponemos en el !ramework. *ara esta tarea disponemos del atributo dataAtheme" dejando a 9Query Mobile !ramework la tarea de hacer la combinacin de temas entre las dos opciones.
Conclusin
5on el !in de obtener componentes mas vistosos y uni!ormes" ser' el propio !ramework quien se encar#ue que la con!i#uracin visual de cada uno de los elementos /*;2 que se implementen en modo de slider. *or tanto" nuestra tarea de codi!icacin se queda en m's bien poco. /o obstante" como de costumbre" dejamos el cdi#o de un ejemplo completo" con todo lo explicado en este articulo.
'(D)*T+P #tml, '#tml lang="es", '#ead, 'meta c#arset="utf./", 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,Iliders con j?uer3 Mobile'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script t3pe="te8t-ja"ascript" src="j4uer3.1.6.1.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page", 'di" data.role="#eader", '#1,Iliders'-#1, '-di", 'di" data.role="content", 'di" data.role="content", 'form action="9" met#od="get", 'di" data.role="fieldcontain", 'label for="slider",Ilider Iimple@ '-label, 'input t3pe="range" name="slider" id="slider" ma8="155" min="1" "alue=";O" -, 'br, 'label for="slider1",Ilider Iimple con temas@ '-label, 'input t3pe="range" name="slider1" id="slider1" ma8="155" min="1" "alue="B5" data.t#eme="b" data.trac2.t#eme="a"-, 'br, 'label for="flip1",Ieleccionar una de dos opciones'-label, 'select name="slider" id="flip1" data.role="slider", 'option "alue="off",)ff'-option, 'option "alue="o",)n'-option, '-select, '-di", '-form, '-di", 'di" data.role="footer", '#=,Iliders'-#=, '-di",

28

'-di", '-di", '-bod3, '-#tml,
Lecuerda que tambi%n puedes ver el ejemplo en una p'#ina aparte" para comprobar su !uncionamiento. :asta una prxima entre#a.
Artculo por
Dairo Galeano
+lementos Collapsible de jQuery Mobile

.no de los wid ets e)traordinariamente atractivos !ue podemos encontrar en jQuery Mobile son los collapsible. %e e)plicamos cmo funcionan. 7os elementos 5ollapsible de jQuery Mobile" son wid#ets bastante 8tiles" aunque al#unos no sepan cmo usarlos. Es por ello que voy a comentar por brindar una breve explicacin sobre este componente de inter!a& #r'!ica de usuario. ;n collapsible" es un elemento que posee una barra con un t$tulo" que va a responder a eventos del usuario. 3s$" cuando se ha#a clic o tab Aen caso de los eventos touchA" este abrir' o cerrar' un panel con cualquier contenido que se haya puesto all$. En el caso del 5ollapsible que se #enera con jQuery Mobile" adem's de crear la barra" pone el icono de mas )V) cuando el panel est' cerrado Bes decir" dataAiconM)plus)D" y el menos BdataAiconM)minus)D cuando el contenido esta abierto. 2odo esto lo hace jQuery Mobile de !orma autom'tica" limpia y r'pida. 0ebes tener en cuenta que la palabra collapsible en espaol si#ni!ica desple#able" pero para no llevarnos a en#ao con los cl'sicos elementos de !ormulario desple#ables" en este art$culo usaremos el t%rmino en in#l%s.
Creacin simple de elementos Collapsible

7os elementos 5ollapsible" requieren cierta con!i#uracin" o m's bien ciertos requisitos de elementos :2M7. 5uando se crea el 5ollapsible" con un esquema de etiquetas :2M7 bien construido" nos ase#uramos que jQuery Mobile ha#a su tarea de !orma e!iciente. *ara comen&ar" necesitamos un elemento 0 4" que debe tener" como muchos otros wid#ets vistos en el manual de jQuery Mobile" el atributo dataArolecon el valor )collapsible).
4ota5 3dem's existen otros requerimientos" que explicaremos despu%s de ver el si#uiente cdi#o
3 continuacin podemos ver cmo se crea un elemento collapsible.

'di" data.role="collapsible", '#=, lemento *ollapsible simple'-#=, 'p, ste es el contenido del collapsible el cual podemos ocultar'-p, '-di",
5omo puedes observar en el cdi#o anterior" dentro del elemento 0 4 debemos hacer un encabe&ado" que ser' el t$tulo del collapasible. 3 continuacin hacemos un p'rra!o dentro del 0 4" el cual es el contenido del elemento" donde podemos insertar cualquier etiqueta :2M7 como contenido. *or de!ecto" el collapasible aparece reco#ido" pero si se requiere podemos con!i#urar el wid#et para que apare&ca abierto al car#ar la p'#ina. *ara ello solo hay que a#re#ar el atributo dataAcollapsed" que recibe un valor booleano. 7a !orma de usarlo es muy simple y se puede apreciar en el si#uiente cdi#o.
'di" data.role="collapsible" data.collapsed="false", '#=, lemento *ollapsible abierto'-#=, 'p, ste es el contenido del collapsible el cual podemos ocultar'-p,

29

'a #ref="9" data.role="button" data.inline="true",#ola'-a, '-di",
5on esto estamos creando un collapsible que al car#ar la p'#ina est' abierto. 3dem's quise a#re#ar un botn" al#o que ya hemos aprendidos en art$culos pasados del manual de jQuery Mobile" para ilustrar que podemos meter cualquier elemento dentro de este wid#et. *or ri&ar el ri&o" podr$amos insertar hasta otro collapsible dentro del primero.
"emas gr! icos en collapsible

3 lo lar#o del manual de jQuery Mobile" se ha podido apreciar el uso de los temas prediseados en el !ramework" que permiten aportar mayor variedad est%tica a los componentes de inter!a& #r'!ica. En los temas podemos colocar diversos colores y e!ectos. Levisa el manual para encontrar m's in!ormacin sobre los temas" porque de momento en este art$culo solo veremos lo relevante al wid#et. 3dicionalmente al atributo dataAtheme" los collapsible" tienen otro atributo para trabajar su con!i#uracin visual. -e trata de dataAcontentAtheme" con el que podemos asi#nar un tema di!erente al contenido del elemento. Es decir" mientras el encabe&ado o la barra donde est' el t$tulo" tendr' asi#nado el tema que modi!icamos con dataAtheme" podremos asi#nar por separado un tema al cuerpo con dataAcontentAtheme. Este interesante detalle lo podemos ver con el si#uiente cdi#o.
'di" data.role="collapsible" data.t#eme="a" data.content.t#eme="e", '#=, ncabeQado con tema <'-#=, 'p, !ota@l contenido tiene el tema e'-p, 'di" data.role="collapsible" data.content.t#eme="a", '#=,*ollapsible dentro de otro'-#=, 'p, n este caso "emos 4ue este esta dentro de otro'-p, '-di", '-di",
5omo se puede apreciar" tambi%n est' inmerso un collapsible" cada uno puede tener sus temas di!erentes" aunque tambi%n se puede trabajar con el tema que tiene el collapsible padre.
Crear un acorden con collapsible

?tro de los atractivos que tiene el elemento collapsible" es el hecho de poder convertirlo en un acorden. -e trata de un componente donde podemos encontrar varios paneles unidos y relacionados entre s$" de modo que al abrirse uno" todos los dem's se cerrar'n. En un acorden se mantendr' visible solo uno de los elementos que lo compone. Este wid#et" o componente de inter!a& #r'!ica de usuario" se encuentra disponible en jQuery; " pero cabe aclarar que la !orma de creacin de jQuery Mobile es di!erente. En este caso se simpli!ica todo" adem's de autoAiniciali&ar" cada uno de los wid#ets que se han creado con dataArole. -i#uiendo el camino de jQuery Mobile !ramework" es importante decir que para la creacin de acordeones disponemos de un valor ,collapsibleAset, que se le puede dar a un 0 4 con el atributo dataArole. Esto se ve re!lejado en el si#uiente cdi#o.
'di" data.role="collapsible.set" , '-di",
0entro de este elemento 0 4 a#re#amos todos los collapsibles que deseemos" haciendo que cada uno se comporte como un elemento del acorden. 5omo puedes ima#inar" a los acordeones tambi%n se les puede aplicar temas #r'!icos con dataAtheme o dataAcontentAtheme" para que cada uno de sus elementos ten#a el mismo color. 3unque tambi%n puedes asi#nar un tema di!erente a cada uno de los elementos. *ara mayor claridad de todo lo explicado en este art$culo veamos el cdi#o completo de una pequea aplicacin web mvil que ilustra el uso de collapsible.
'(D)*T+P #tml, '#tml lang="es", '#ead, 'meta c#arset="utf./"-, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,*ollapsible con j?uer3 Mobile'-title,

30

'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page", 'di" data.role="#eader" data.t#eme="b", '#1, lementos *ollaspsible'-#1, '-di", 'di" data.role="content", 'di" data.role="collapsible", '#=, lemento *ollapsible simple'-#=, 'p, ste es el contenido del collapsible el cual podemos ocultar'-p, '-di", 'di" data.role="collapsible" data.collapsed="false", '#=, lemento *ollapsible abierto'-#=, 'p, ste es el contenido del collapsible el cual podemos ocultar'-p, 'a #ref="9" data.role="button" data.inline="true",#ola'-a, '-di", 'di" data.role="collapsible" data.t#eme="a" data.content.t#eme="e", '#=, ncabeQado con tema <'-#=, 'p, l contenido tiene el tema e'-p, 'di" data.role="collapsible" data.content.t#eme="a", '#=,*ollapsible dentro de otro'-#=, 'p, n este caso "emos 4ue este esta dentro de otro'-p, '-di", '-di", 'di" data.role="collapsible.set" data.t#eme="e" data.content.t#eme="a", 'di" data.role="collapsible", '#=,Primer elemento del acordeon'-#=, 'p,<#ora estamos "iendo el lemento tres del acordeon'-p, '-di", 'di" data.role="collapsible" , '#=,Iegundo elemento del acordeon'-#=, 'p,<#ora estamos "iendo el lemento tres del acordeon'-p, '-di", 'di" data.role="collapsible" data.t#eme="a" data.content.t#eme="b", '#=,Tercer elemento del acordeon con tema diferente'-#=, 'p,<#ora estamos "iendo el lemento tres del acordeon tambien tiene contenido con otro tema'-p, '-di", '-di", '-di", 'di" data.role="footer", '#=, lementos *ollaspsible'-#=, '-di", '-di", '-bod3, '-#tml,
Lecuerda que tambi%n puedes ver un ejemplo en !uncionamiento en una p'#ina aparte.
Artculo por
Dairo Galeano

31
)acer columnas y grillas con jQuery Mobile

Creacin de documentos web con rillas o contenidos dispuestos en columnas mediante jQuery Mobile. 2odas las aplicaciones de jQuery Mobile est'n diseadas para trabajar en resoluciones de pantallas variadas. *or esta ra&n" cuando creamos una lista" esta ocupa toda la pantalla" a menos que nosotros la cambiemos. -in embar#o" en al#unos momentos" tal ve& deseemos dividir los contenidos en columnas. 5omo bien sabemos" con 5-- podemos implementar esa divisin en columnas" pero como la labor de jQuery Mobile es ahorrarnos trabajo" las disearemos de una manera m's sencilla #racias a %l. 3s$ que" si lo que tenemos pensado es hacer una aplicacin web para dispositivos mviles en donde su contenido est% dividido en columnas" jQuery Mobile te ayudar' de manera muy e!iciente. En este art$culo del Manual de jQuery Mobile exploraremos la creacin de columnas" mediante la #rilla que nos o!rece el framework para maquetar contenidos.
Creacin de columnas en una aplicacin jQuery Mobile

ma#ina que un d$a tienes la necesidad de hacer unas columnas en tu aplicacin web mvil" como en los peridicos. -i deseas recurrir a la ayuda que te brinda jQuery Mobile" podr's dividir esos contenidos en dos" tres y hasta Wcinco columnasQ ?bviamente" en al#unos tipos de aplicaciones y dispositivos" la usabilidad no saldr' bene!iciada al utili&ar hasta = columnas" pero al menos lo permite el !ramework. ?tro aspecto interesante es que no tienes que dividir en columnas toda la p'#ina web" sino simplemente al#unas secciones de ella. *ero dej%monos de hablar y veamos ya mismo el cdi#o para crear dos columnas en nuestra p'#ina web mvil.
'di" class="ui.grid.a", 'di" class="ui.bloc2.a",'strong, sta es la columna numero 1'-strong, amoldarC a la mitad de pagina.'-di", 'di" class="ui.bloc2.b",'strong, sta es la columna numero ;'-strong, amoldarC a la otra mitad de pagina.'-di", '-di",'(.. -grid.a .., l te8to 4ue se ecriba a4uH se l te8to 4ue se ecriba a4uH se
7o primero que hacemos es crear un elemento 0 4" que tendr' como clase 5--" )uiA#ridAa). 5on tal clase le indicamos al !ramework que justo all$ inicia nuestra #rilla" que en este caso es de dos columnas. 5omo dije anteriormente no solo pueden tener dos columnas" pues podremos crear #rilla que ten#an hasta cinco. *ara especi!icar las columnas que deseamos implementar est'n las si#uientes clases. *ara #rillas con dos columnas le asi#namos la clase( uiA#ridAa. *ara #rillas con tres columnas le asi#namos la clase( uiA#ridAb. *ara #rillas con cuatro columnas le asi#namos la clase( uiA#ridAc. *ara #rillas con cinco columnas le asi#namos la clase( uiA#ridAd.
;na ve& establecida la #rilla" debemos proceder con la creacin de los bloques" uno por columna. En el cdi#o anterior son dos bloques" cuya creacin se lo#ra tambi%n con la asi#nacin de clases 5--. 5omo se habr' podido observar" asi#namos al primer elemento 0 4 la clase )uiAblockAa)" mientras el se#undo tiene )uiAblockAb). 3l i#ual que con las #rillas" lo bloques van aumentando de acuerdo con el n8mero que hayamos establecido en la #rilla. -olo debemos cambiar la 8ltima letra. *ara crear el primer bloque usamos la clase uiAblocAa. *ara crear el se#undo bloque usamos la clase uiAblocAb. *ara crear el tercer bloque usamos la clase uiAblocAc. *ara crear el cuarto bloque usamos la clase uiAblocAd. *ara crear el quinto bloque usamos la clase uiAblocAe.
5ada uno de los bloques" tiene el mismo ancho" al#o parecido a lo que pasa con las barras de nave#acin explicadas en un art$culo anterior del manual de jQuery Mobile. 3s$ que si tenemos cinco columnas" cada uno de los bloques" tendr' el 1EX de ancho del documento web o elemento contenedor de la #rilla.

32
)acer Grillas con temas

:asta este punto del manual de jQuery Mobile" ya debes saber que para a#re#ar temas" a cualquier wid#et del !ramework" debemos a#re#ar el atributo dataAtheme. -in embar#o" esto no es as$ con las #rillas" b'sicamente porque %stas no son widgets. 0ebemos hacer un cdi#o como el si#uiente" que se debe escribir incluso antes de crear los bloques.
'di" class="ui.grid.a", 'di" class="ui.bar ui.bar.e, *on ello logramos 4ue todos los blo4ues de nuestra grilla tengan colores uniformes. Iin embargo R?uL pasa en el momento en 4ue deseemos tener blo4ues con colores diferentesS pues bien0 en este caso debemos #acer lo mismo0 un nue"o elemento DGT0 con las clases0 ui.bar0 para indicar 4ue es una barra0 3 ui.bar.b0 la cual asigna color al blo4ue o la grilla. n este caso el cDdigo 4ue obtendremos serC el siguiente@ 'di" class="ui.grid.a", 'di" class="ui.bloc2.a" , 'di" class="ui.bar ui.bar.e", 'strong, sta es la columna numero 1'-strong,*on color amarillo '-di", '-di", 'di" class="ui.bloc2.b", 'di" class="ui.bar ui.bar.b", 'strong, sta es la columna numero ;'-strong, *on color aQul '-di", '-di", '-di",'(.. -grid.a ..,
3hora obtenemos dos columnas" la primera tiene un color amarillo" asi#nado por el tema )e)" mientras que la se#unda tiene es a&ul" al tener asi#nado el tema )e).
4ota5 7as clases para darle color a las columnas y #rillas" tambi%n se pueden poner en elemento div" que tienen las clases )uiAdridAa) o )uiAblocAa)" pero la documentacin de jQuery Mobile no lo recomienda.
Crear mltiples 'ilas

5on lo que hemos hecho hasta ahora solo hemos creado columnas. *ara que estas columnas se conviertan en #rillas" debemos tener m's de una !ila" de lo contrario solo tendremos columnas. *ara crear el aspecto de una #rilla hacemos el si#uiente cdi#o(
'di" class="ui.grid.a", 'di" class="ui.bloc2.a" , 'di" class="ui.bar ui.bar.e", 'strong, sta es la columna numero 1'-strong, de pagina. '-di", '-di", 'di" class="ui.bloc2.b", 'di" class="ui.bar ui.bar.a", 'strong, sta es la columna numero ;'-strong, mitad de pagina. '-di", '-di", 'di" class="ui.bloc2.a" , 'di" class="ui.bar ui.bar.c", 'strong, sta es la columna numero 1'-strong, de pagina. '-di", '-di", 'di" class="ui.bloc2.b", 'di" class="ui.bar ui.bar.b", 'strong, sta es la columna numero ;'-strong, mitad de pagina. '-di", '-di", '-di",'(.. -grid.a con dos filas..,
l te8to 4ue se ecriba a4ui se almodarC a la mitad
l te8to 4ue se ecriba a4ui se almodarC a la otra
l te8to 4ue se ecriba a4ui se almodarC a la mitad
l te8to 4ue se ecriba a4ui se almodarC a la otra

33
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com -lo debemos crear dos bloques mas" despu%s de los in$ciales" es decir" que si nuestra #rilla es de tres columnas" debemos crear seis bloques para obtener dos !ilas. *ara mayor claridad dejo un cdi#o de ejemplo con todo lo visto en el presente art$culo.
'(D)*T+P #tml, '#tml, '#ead, 'meta name=""ie$port" content="$idt#=de"ice.$idt#0 minimum.scale=10 ma8imum.scale=1", 'title,*ulumnas con P?M'-title, 'lin2 rel="st3les#eet" #ref="j4uer3.mobile.1.5.min.css" -, 'script src="j4uer3.1.6.1.min.js",'-script, 'script src="j4uer3.mobile.1.5.min.js",'-script, '-#ead, 'bod3, 'di" data.role="page" id="inicio", 'di" data.role="#eader" data.position="fi8ed", '#1,*olumnas'-#1, '-di",'(.. -#eader .., 'di" data.role="content" , 'span class="ui.btn.acti"e",Dos columnas simples'-span, 'di" class="ui.grid.a", 'di" class="ui.bloc2.a" , 'di" class="ui.bar ui.bar.e", 'strong, sta es la columna numero 1'-strong, l te8to 4ue se ecriba a4ui se almodarC a la mitad de pagina. '-di", '-di", 'di" class="ui.bloc2.b", 'di" class="ui.bar ui.bar.b", 'strong, sta es la columna numero ;'-strong, l te8to 4ue se ecriba a4ui se almodarC a la otra mitad de pagina. '-di", '-di", '-di",'(.. -grid.a .., 'br, 'span class="ui.btn.acti"e",Dos columnas simples con dos filas'-span, 'di" class="ui.grid.a", 'di" class="ui.bloc2.a" , 'di" class="ui.bar ui.bar.e", 'strong, sta es la columna numero 1'-strong, mitad de pagina. '-di", '-di", 'di" class="ui.bloc2.b", 'di" class="ui.bar ui.bar.a", 'strong, sta es la columna numero ;'-strong, otra mitad de pagina. '-di", '-di", 'di" class="ui.bloc2.a" , 'di" class="ui.bar ui.bar.c", 'strong, sta es la columna numero 1'-strong, mitad de pagina. '-di", '-di", 'di" class="ui.bloc2.b", 'di" class="ui.bar ui.bar.b", 'strong, sta es la columna numero ;'-strong, otra mitad de pagina. '-di", '-di", '-di",'(.. -grid.a con dos filas..,
l te8to 4ue se ecriba a4ui se almodarC a la

34
'-di",'(.. -content .., 'di" data.role="footer" data.position="fi8ed", '#=,Frillas'-#=, '-di",'(.. -footer .., '-di",'(.. -page .., '-bod3, '-#tml,
2ambi%n puedes ver el ejemplo en marcha en una p'#ina aparte" donde podr's apreciar las tres columnas tambi%n" adem's de las tres !ilas" cdi#o que no dejo completo" para no redundar mucho" as$ que si lo quieres puedes ver el cdi#o !uente del ejemplo.
Artculo por
Dairo Galeano
Crear temas personalizados para tus aplicaciones jQuery Mobile

/l e!uipo de jQuery Mobile, pone a disposicin una #erramienta con la cual, podemos crear temas personali(ados para las aplicaciones basadas en el framework. Qui&'s al#unos de vosotros ya esteis pensando que todas las aplicaciones jQuery Mobile disponen de muy pocos temas de personali&acin visual para los widgets. Esto lo podr$a pensar al#uien con experiencia en otras herramientas del equipo de jQuery" que recordar' la #ran variedad de temas que nos brindaba jQuery ; . -in embar#o" a lo lar#o del Manual de jQuery Mobile" hemos repetido en numerosas ocasiones que este framework para desarrollo de aplicaciones para mviles slo contaba con cinco temas prede!inidos. 7a ventaja con jQuery Mobile es que los cinco temas vienen inmersos dentro de un mismo archivo 5--" una misma hoja de estilos que incluimos una 8nica ve& al insertar el !ramework en el :E30 de la p'#ina. -in embar#o" se recordar' que en jQuery ; cada tema era un archivo 5-- di!erente. /o obstante" podemos a!irmar que cinco look$feels en el archivo 5-- b'sico de jQuery Mobile no cubren toda la necesidad que desarrolladores y diseadores mas exi#entes puedan tener. 2al ve&" a vosotros no os #uste tanto el color a&ul como a mi" pre!irais el verde o el rojo" pero nin#uno de estos dos colores est'n presentes en los temas que vienen prediseados en el !ramework. *ara quienes est%n pensando que para crear temas personali&ados para nuestras aplicaciones jQuery Mobile" necesitamos #randes conocimientos en 55-6" quiero decirles que se equivocan. /o se requiere hacer nada de cdi#o y todo es mas !'cil de lo que parece. 3dem's" como veremos a continuacin" a #olpe de ratn obtenemos unos excelentes resultados" a los que nos tiene muy acostumbrados el !ramework. Es decir" siempre se trata de crear #randes cosas con mucha !acilidad" o m's bien" con extraordinaria simplicidad.
Creando el nuevo tema en jQuery Mobile

5omo dec$a anteriormente" no necesitamos #randes conocimientos en 5--6 para crear nuestros propios temas para aplicaciones jQuery Mobile. *ara eso" en la misma p'#ina o!icial del !ramework" disponemos de una herramienta online" llamada 2hemeLoller. 5on esta herramienta tenemos a la mano una !orma !'cil de crear nuestros propios temas. -e encuentra disponible en la si#uiente direccin web( jquerymobile.comHthemeroller nicialmente 2hemeLoller nos da la bienvenida a trav%s de un mensaje de dialo#o. *onen a nuestra disposicin una barra lateral" donde podemos ver cada una de las propiedades #lobales del nuevo tema" adem's de ver las modi!icaciones que podemos hacer a temas por separados" dependiendo de su valor en letras.

35
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com *ara arrancar" tenemos tres temas que van de la 3 a la 5" pero podemos ir a#re#ando m's se#8n nuestras necesidades. 3s$ que si quieres crear una aplicacin muy variada en colores" puedes hacer temas hasta lle#ar a letra Y. En las opciones que tenemos para las con!i#uraciones #lobales podemos hacer cambios como( 5ambiar el tipo de la !uente 5ambiar el radio de los bordes Modi!icar el color de los iconos y muchas otras cosas...
>a solo es cuestin de qu% necedades ten#as o la !orma en que quieras que se vean tus aplicaciones. 0espu%s" puedes ir modi!icando uno a uno los temas" dentro de los cuales ya encontramos con!i#uraciones m's particulares. En el centro de la p'#ina contamos con un visuali&ador de cada uno de los temas" donde podemos ver en tiempo real los cambios que estamos creando en nuestro tema actual. Rsto nos ayuda a orientarnos sobre los resultados !inales que obtendremos" mostr'ndonos di!erentes wid#ets que maneja el !ramework" como listas" botones" barras entre otros.
Creando nuestro tema personalizado

5omo comentaba anteriormente" en el !ramework no vienen incluidos wid#ets de color rojo ni verdes" as$ que vamos a darles esos colores con el !in de obtener una variedad de temas m's amplios. *ara tal motivo vamos a trabajar partiendo como base de los temas que vienen incluidos dentro de jQuery Mobile. -i ya ha visitado la aplicacin 2hemeLoller" te dar's cuenta de que inicialmente no nos o!rece los temas incorporados en el !ramework" as$ que lo primero que hay que hacer es incorporar dichos temas. 7o#ramos eso dando clic en la opcin )import)" donde obtendremos un di'lo#o en el cual podemos esco#er la opcin )import de!ault theme). 0e !orma autom'tica aparece en el te%tarea todo el cdi#o 5-- que incorpora jQuery Mobile" por 8ltimo" al dar clic en )import) del dialo#o" visuali&aremos cada uno de los temas presentes en el !ramework. En mi caso particular" lo que hice !ue modi!icar los temas 0 y 5 que vienen en el !ramework" cada tema de !orma individual tiene las si#uientes secciones para ser modi!icadas( :eaderH Foteer <ar 5ontentH <ody <utton( /ormal <utton( :over <utton( *ressed
5omo veis" las secciones son muy ilustrativas y no se requieren #randes con!i#uraciones" pues todo est' servido para hacerlo de manera #r'!ica" manejando los colores a trav%s de paletas donde podemos seleccionarlos y muchas otras cosas que convierten a 2hemeLoller en una herramienta muy 8til. *ara solucionar el problema antes planteado de la ausencia de colores como el rojo o el verde" debemos simplemente crear un tema personali&adom donde incluimos esos colores" adem's de a#re#ar un sexto tema.
Agregando el nuevo tema a mis aplicaciones

;na ve& hemos hecho las modi!icaciones y temas que necesitamos para nuestras nuevas aplicaciones" procedemos a descar#ar el tema que estamos creando con 2hemeLoller" haciendo clic 0ownload 2heme. En el di'lo#o te dice la !orma en que debes incluir tu estilo creado" adem's de darle un nombre. *uedes copiar el cdi#o que aparece en el di'lo#o de descar#a" para incluir tu tema. 5laro" que tambi%n debes cambiar el nombre que aparece all$ BmyAcustomAtheme.cssD" por el nombre que t8 le has asi#nado. 3l descomprimir el archivo .&ip del tema que creamos con 2hemeLoller" podemos ver que viene incluido un ejemplo" donde ya se est' trabajando con nuestro tema. *odemos observar que parte de la cabecera de ese documento :2M7 est' compuesto de la si#uiente !orma.

36

'lin2 rel="st3les#eet" #ref="t#emes-tema.personaliQado.min.css" -, 'lin2 rel="st3les#eet" #ref="#ttp@--code.j4uer3.com-mobile-1.1.5-j4uer3.mobile.structure. 1.1.5.min.css" -, 'script src="#ttp@--code.j4uer3.com-j4uer3.1.6.1.min.js",'-script, 'script src="#ttp@--code.j4uer3.com-mobile-1.1.5-j4uer3.mobile.1.1.5.min.js",'-script,
En este caso" estamos usando para el tema modi!icado el nombre )temaApersonali&ado)" en su versin comprimida" pues en la carpeta de themes dentro del .&ip encontramos dos archivos 5-- para el mismo tema. ?tro caso particular es que no se usa el archivo )jquery.mobileA..E.min.css)" sino uno con un nombre )jquery.mobile.structureA..E.min.css). Este archivo es muy importante" pues al no incluirlo no !uncionar' el ejemplo. Ese archivo tambi%n se descar#a junto con el .&ip que obtenemos al descar#ar jQuery Mobile" as$ que puedes tambi%n ponerlo a trabajar de !orma local" sin necesidad de usar el 50/. *ara terminar nos #ustar$a deciros que un buen diseo con 2hemeLoller depende del empeo" por eso te invitamos a trabajar con %l" para obtener aplicaciones jQuery Mobile m's personali&adas.
Artculo por
Dairo Galeano

37

Manual Jquery Mobile

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Jquery Mobile

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Manual de jQuery Mobile

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (3 captulos)

Desarrollador independiente (1 captulos)

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a jQuery Mobile

jQuery se reinventa a si mismo

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Caractersticas de jQuery Mobile

Compatible con el mayor nmero de plata ormas

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a jQuery Mobile en vdeo

Miguel Angel Alvarez

Con iguraciones por de ecto de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Mencin de las opciones por de ecto de jQuery Mobile

Cambiar las transiciones por de ecto de p!ginas y di!logos

5on esto todas nuestras p'#inas har'n la transicin !lip.

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Modi icar y Mostrar los "oas# relacionados con A$A%

&oniendo todo en un solo ejemplo

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

&!gina b!sica en jQuery Mobile 'rame(or#

Cdigo )"M* de la p!gina b!sica

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

+ti.ueta M+"A /ie(port

Incluir los scripts del rame(or#

De inir la estructura de p!gina y los data0role

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

El cuerpo de la p'#ina lo colocamos con un dataAroleM)content).

Finalmente" el pie de p'#ina se indica con un dataAroleM)!ooter).

Miguel Angel Alvarez

+structura multip!gina de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Multip!gina es la unin de varias p!ginas b!sicas

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

+nlaces entre las p!ginas de la estructura multip!gina

"tulos de las p!ginas

'a #ref="9comprar" data.rel="dialog",comprar una guitarra'-a,

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Crear 1otones con jQuery Mobile

2n 1otn simple de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Con jQuery Mobile las listas son mejores

+jemplo ilustrativo con listas

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

+nri.uecer visualmente las listas