Contenu connexe Similaire à Intro jQuery Mobile (20) Plus de Felipe Hernández Rivas (7) Intro jQuery Mobile2. ACERCA DEL AUTOR
Desarrollador de aplicaciones
móviles en ImageMaker
Miembro del consejo de
ancianos del Encuentro Linux
Organizador de
www.MeetUp.com/MobDev
@FELIPEDEV
Profesor Taller de aplicaciones
móviles en Instituto CIISA
Miembro de FW Adamantio
http://developer.adamantio.org/
Seven
16. Psst! No todos usan iPhone o Android
Seven
http://www.flickr.com/photos/kalexanderson
18. if( == )
mySelf.quick();
Seven
60. Documento HTML5 :)
<!Doctype html>
<html>
! <head>
! ! <meta charset=“utf-8”/>!
! ! <title>Ejemplo jQuery mobile</title>
! </head>
! <body>
! </body>
</html>
Seven
61. jQuery + Mobile + Css
<!Doctype html>
<html>
! <head>
! ! <meta charset=“utf-8”/>!
! ! <title>Ejemplo jQuery mobile</title>
! ! <meta name=“viewport” content=“width=device-width
! ! minimum-scale=1 maximum-scale=1 initial-scale=1”/>!
! ! <link rel="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>
Seven
62. data-role = page
<body>
! <div data-role=“page” >!
! ! <!--/Contenido de la pagina jQuery mobile-- >
! </div><!--/Fin de la página -->
</body>
Seven
63. page
Header
Content
Footer
Seven
64. Mas Data-Role
<body>
! <div data-role=“page” >
! ! <div data-role=“header” >!
! ! </div>
! ! <div data-role=“content” >
! ! </div>
! ! <div data-role=“footer” >!
! ! </div>! !
! </div>
</body>
Seven
65. 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>
Seven
66. 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>
Seven
69. Data-role=ListView
<div data-role=“content” >
! ! ! <p>Hola mundo!</p>
! ! ! <ul data-role=“listview”>
! ! ! ! <li>Productos</li>
! ! ! ! <li>Servicios</li>
! ! ! ! <li>Acerca de nosotros</li>
! ! ! ! <li>Contacto</li>
! ! ! </ul>
</div>
Seven
71. Agragando links
<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>
Seven
74. Cambiemos los temas
<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>
Seven
78. data-role=”footer”
<div data-role=“footer” >
<a href="index.html" data-role="button" data-icon="delete">Eliminar</a>
<a href="index.html" data-role="button" data-icon="plus">Agregar</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Subir</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Bajar</a>
</div>
Seven
82. Mayor información
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
Seven
Notes de l'éditeur \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n