Más contenido relacionado Similar a jQueryMobile (20) jQueryMobile8. ¿Vi por ahí otro jQAlgo? Mmmm… pero tiene algo que ver jQtouch con jQuery Mobile? 15. ¡Las personas no tienen por que preocuparse de compatibilidades de navegadores! 21. …y sobre el core de jQuery Móviles + Tablets UI Herramientas + utilidades 25. jQuery es: *Fácil de utilizar *POO JS Framework *Efectos dinámicos *AJAX *CSS *UI Y muchos, pero muchos Plug-Ins 26. Core de jQuery $() = La función jQuery Accesorios de objetos Trabajo con datos Interoperabilidad 28. Código básico jQuery <head> <title>Ejemplo jQuery</title> <script src="Js/jquery-1.6.2.js”></script> <script> $(document).ready(function(){ //Algún código a ejecutar }); </script> </head> 31. Parcelación de jQuery *Core de jQuery *Selectores de jQuery *Métodos “Attributes” *Métodos de CSS *Eventos en jQuery *Desarrollo de Plug-Ins *Efectos en jQuery *Otros: jQuery UI 39. Oye y… ¿tiene soporte para movimientos de tipo touch o mouse… o teclado? 41. ¿Y que hay de una aplicación nativa? ¿Podría utilizar jQuery Mobile para construir una aplicación nativa… y venderla enlosmarket? $_$ 64. Documento HTML5 ;) <!Doctypehtml> <html> <head> <meta charset=“utf-8”/> <title>Ejemplo jQuerymobile</title> </head> <body> </body> </html> 65. jQuery + mobile + temas CSS <!Doctypehtml> <html> <head> <meta charset=“utf-8”/> <title>Ejemplo jQuerymobile</title> <meta name=“viewport” content=“width=device-width minimum-scale=1 maximum-scale=1initial-scale=1”/> <linkrel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/ jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/ jquery.mobile-1.0b1.min.js"></script> </head> <body> </body> </html> 66. data-role = page <body> <div data-role=“page” > <!--/Contenido de la pagina jQuerymobile-- > </div><!--/Fin de la página --> </body> 68. Más data-role <body> <div data-role=“page” > <div data-role=“header” > </div> <div data-role=“content” > </div> <div data-role=“footer” > </div> </div> </body> 69. Contenido simple <body> <div data-role=“page” > <div data-role=“header” > <h1>Bienvenido!</h1> </div> <div data-role=“content” > <p>Hola mundo!</p> </div> <div data-role=“footer” > </div> </div> </body> 70. Lista básica <div data-role=“content” > <p>Hola mundo!</p> <ul> <li>Productos</li> <li>Servicios</li> <li>Acerca de nosotros</li> <li>Contacto</li> </ul> </div> 73. Agregamos un listview role <div data-role=“content” > <p>Hola mundo!</p> <uldata-role=“listview”> <li>Productos</li> <li>Servicios</li> <li>Acerca de nosotros</li> <li>Contacto</li> </ul> </div> 75. Agreguemos links a los ítems del listview role <div data-role=“content” > <p>Hola mundo!</p> <ul data-role=“listview”> <li><a href=“productos.html”></a>Productos</li> <li><a href=“servicios.html”></a>Servicios</li> <li><a href=“acercaDe.html”></a>Acerca de nosotros</li> <li><a href=“contacto.html”></a>Contacto</li> </ul> </div> 77. Let’splay!! Cambiemos los temas (CSS) <div data-role=“content” data-theme=“a”> <p>Hola mundo!</p> <ul data-role=“listview” data-inset=“true” data-theme=“b”> <li><a href=“productos.html”></a>Productos</li> <li><a href=“servicios.html”></a>Servicios</li> <li><a href=“acercaDe.html”></a>Acerca de nosotros</li> <li><a href=“contacto.html”></a>Contacto</li> </ul> </div> 79. ¿Y si le agregamos un par de botoncitos en el footer? 81. Agreguemos un par de botones al data-role:footer <div data-role=“footer” > <ahref="index.html" data-role="button" data-icon="delete">Eliminar</a> <ahref="index.html" data-role="button" data-icon="plus">Agregar</a> <ahref="index.html" data-role="button" data-icon="arrow-u">Subir</a> <ahref="index.html" data-role="button" data-icon="arrow-d">Bajar</a> </div> 82. Pueden ver el ejemplo en sus dispositivos móviles desde la siguiente URL: 86. Para mayor info de jQuery: www.jquery.com www.jqueryui.com http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/ http://www.desarrolloweb.com/manuales/manual-jquery.html 87. Más sobre jQuerymobile: www.jquerymobile.com http://buildmobile.com/hello-jquery -http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/ http://www.quirksmode.org/presentations/USTourApril11/huge.pdf http://oreilly.com/catalog/0636920020585 88. ¿Te interesa el desarrollo móvil? Participa de nuestras charlas en Imagemaker los días miércoles. Mayor información en: http://www.meetup.com/MobDev 89. GRACIAS POR SU AISTENCIA POR: FELIPE HERNÁNDEZ R. TWITTER:@FELIPEDEV