Jquery Mobile

Introducción a Jquery Mobile

Transcript

2. ¿Que es? Mobile Framework usa jQuery. Multibrowser. Multiplataforma. Crear aplicaciones web que se sienten tan cerca como las aplicaciones nativas.
3. Plataformas iOS, Android, Windows Mobile Blackberry, Symbian, webOS Firefox Mobile (Fennec), Opera Mobile / Mini Meego, bada, Maemo... Phonegap!
4. Elementos básicos de página <!doctype html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="jquery.mobile.css" /> <script src="jquery.js"></script> <script src="jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
6. 2 Paginas <div data-role="page" id="page1"> <div data-role="header"> <h1>Page 1</h1> </div> <div data-role="content"> <a href="#page2" data-role="button">Go to Page 2</a> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>Page 2</h1> </div> <div data-role="content"> <a href="#page1" data-role="button">Go to Page 1</a> </div> </div>
8. Fixed Footer Navigation <div data-role="footer" data-id="myfooter" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="footer.html" class="ui-btn-active">One</a></li> <li><a href="footer2.html">Two</a></li> <li><a href="footer3.html">Three</a></li> </ul> </div> </div> // Second page <div data-role="footer" data-id="myfooter" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="footer.html">One</a></li> <li><a href="footer2.html" class="ui-btn-active">Two</a></li> <li><a href="footer3.html">Three</a></li> </ul> </div> </div> // Third page <div data-role="footer" data-id="myfooter" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="footer.html">One</a></li> <li><a href="footer2.html">Two</a></li> <li><a href="footer3.html" class="ui-btn-active">Three</a></li> </ul> </div> </div>
10. <a href="galeria.html" rel="external" data-transition="slide"></a>
11. Formulario
12. http://codiqa.com/
13. http://jquerymobile.com/themeroll er/
14. Recursos
15. Jquery Mobile Gallery http://www.jqmgallery.com/
16. Test http://www.mozilla.org/en-US/mobile/
17. Sitios Recomendados http://detectmobilebrowsers.com/ http://net.tutsplus.com/tag/jquery-mobile/ http://revolucion.mobi/ http://www.ibm.com/developerworks/web/library/wa-jqmobile/ http://jquerymobile.com/