Jquery Mobile

¿Que es? Mobile Framework usa jQuery. Multibrowser. Multiplataforma. Crear aplicaciones
web que se sienten tan cerca como las aplicaciones nativas.

Plataformas iOS, Android, Windows Mobile Blackberry, Symbian, webOS Firefox Mobile
(Fennec), Opera Mobile / Mini Meego, bada, Maemo... Phonegap!

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>

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>

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>

Formulario

http://codiqa.com/

http://jquerymobile.com/themeroll er/

Recursos

Jquery Mobile Gallery http://www.jqmgallery.com/

Test http://www.mozilla.org/en-US/mobile/

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/

Jquery Mobile

Jquery Mobile

Willy Aguirre

More Decks by Willy Aguirre

Other Decks in Technology

Featured

Transcript

¿Que es? Mobile Framework usa jQuery. Multibrowser. Multiplataforma. Crear aplicaciones

Plataformas iOS, Android, Windows Mobile Blackberry, Symbian, webOS Firefox Mobile

Elementos básicos de página <!doctype html> <html> <head> <title>Page Title</title>

2 Paginas <div data-role="page" id="page1"> <div data-role="header"> <h1>Page 1</h1> </div>

Fixed Footer Navigation <div data-role="footer" data-id="myfooter" data-position="fixed"> <div data-role="navbar"> <ul>

<a href="galeria.html" rel="external" data-transition="slide"></a>

Formulario

http://codiqa.com/

http://jquerymobile.com/themeroll er/

Recursos

Jquery Mobile Gallery http://www.jqmgallery.com/

Test http://www.mozilla.org/en-US/mobile/

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/