Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JQuery Mobile - Agile Open Lima IV

886 views

Published on

Presentacion de la sesion de JQuery Mobile del Agile Open Lima IV

Published in: Education
  • Be the first to comment

  • Be the first to like this

JQuery Mobile - Agile Open Lima IV

  1. 1. Andrés Deza V. http://twitter.com/advillacorta
  2. 2. <ul><ul><li>Sistema de Interfaz unificado. </li></ul></ul><ul><ul><li>Jquery y Jquery UI como base </li></ul></ul><ul><ul><li>Framework touch HTML5 optimizado. </li></ul></ul>
  3. 4. <ul><ul><li>Data Roles </li></ul></ul><ul><ul><li>Pages and Dialogs </li></ul></ul><ul><ul><li>Themes </li></ul></ul><ul><ul><li>Buttons (icon sets) </li></ul></ul><ul><ul><li>Toolbars (Header & Footer) </li></ul></ul><ul><ul><li>List View Control </li></ul></ul><ul><ul><li>Y mucho más… </li></ul></ul><ul><ul><li>http://jquerymobile.com </li></ul></ul>
  4. 5. <ul><li>page </li></ul><ul><li>header </li></ul><ul><li>footer </li></ul><ul><li>navbar </li></ul><ul><li>button </li></ul><ul><li>listview </li></ul><ul><li>fieldcontain </li></ul>
  5. 6. <ul><ul><li>Jquery Mobile viene con 5 temas predeterminados. </li></ul></ul><ul><ul><li>data-theme=a,b,c,d,e </li></ul></ul><ul><ul><li>Aplica a: </li></ul></ul><ul><ul><ul><li>Páginas </li></ul></ul></ul><ul><ul><ul><li>Botones </li></ul></ul></ul><ul><ul><ul><li>Toolbars </li></ul></ul></ul>
  6. 7. <ul><ul><li>Se puede crear un botón agregando data-role=”button” a una etiqueta botón </li></ul></ul><ul><ul><li>button tag, un tag, o input type=submit|button|reset|image </li></ul></ul><ul><ul><li>Se puede agregar un icono en el botón usando data-icon=” icon-name ” </li></ul></ul><ul><ul><li>Por defecto el icono va a la derecha pero se puede cambiar especificando data-iconpos. </li></ul></ul>
  7. 8. <ul><ul><li>Se puede crear una lista de botones </li></ul></ul><ul><ul><li>Por defecto la lista de botones no tienes un &quot;padding&quot; definido para incluirlo en la barra se debe agregar    class=&quot;ui-bar&quot; </li></ul></ul><ul><ul><li><div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;>Remove</a> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;plus&quot;>Add</a> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-u&quot;>Up</a> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-d&quot;>Down</a> </div> </li></ul></ul>
  8. 9. <ul><ul><li>List view más avanzados. </li></ul></ul>
  9. 10. http://code.google.com/p/training-samples

×