data-role es un atributo que indica el tipo y la función del elemento que es agregado al documento HTML,
es decir a partir de este atributo se puede interactuar con los distintos valores que Jquery Mobile proveé
para consolidar la estructura y contenido de la aplicación.
Valores de estructura ...
- data-role="page" -> Alberga entre sus etiquetas una página, al documento se le pueden agregar tantas páginas como se quiera.
- data-role="header" -> Alberga el título de la página agregando etiquetas H1-H6.
- data-role="content" -> Alberga el contenido principal de la página.
- data-role="footer" -> Alberga el pie de la página.
<!DOCTYPE html> <html> <head> <title>Primera página con Jquery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1> Primera página con Jquery Mobile</h1> </div> <div data-role="content"> <h3> Aquí van el contenido principal de la página.</h3> <ul> <li>data-role="page" -> Es una página en el documento, se le pueden agregar tantas páginas como se necesite.</li> <li>data-role="header" -> Alberga el título de la página agregando etiquetas H1-H6.</li> <li>data-role="content" -> Alberga el contenido principal de la página.</li> <li>data-role="footer" -> Alberga el pie de página.</li> </ul> </div> <div data-role="footer"> <h1> PIE DE PÁGINA</h1> </div> </div> </body> </html>
1 comentario:
Precisamente es con esta tecnología que trabaja Dreamweaver para hacer páginas móviles, hice esta:
http://radiojuticalpa.net/VRZRJMobile/index.html
Publicar un comentario