Morton 13 de agosto de 2012 a las 06.03
   Imprimir artículo
elWebmaster.com

Botones en jQuery Mobile – 1° parte


mobile, html, botones, jQuery, primera, parte

jquerywideEn este artículo hablaremos sobre botones en jQuery Mobile. Estos botones se renderean con etiquetas centradas, esquinas redondeadas y sombras por defecto.

Veamos cómo funciona:

Paso 1: Crea una página .html para probar.

Paso 2: Coloca el código de aquí abajo en esa página.

  1. <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.    <meta charset="utf-8" />
  6.    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  7.    <title></title>
  8.    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
  9.    <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script>
  10.    <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
  11.    <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. </body>
  15. </html>

Paso 3: Ahora coloca el código de aquí abajo en la sección body de la página HTML.

  1. <li>Botones con íconos</li>
  2.  
  3. <a href="javascript:void(0)" data-role="button" data-icon="delete">Delete</a>
  4. <a href="javascript:void(0)" data-role="button" data-icon="plus">Plus</a>
  5. <a href="javascript:void(0)" data-role="button" data-icon="minus">Minus</a>
  6. <a href="javascript:void(0)" data-role="button" data-icon="check">Check</a>
  7. <a href="javascript:void(0)" data-role="button" data-icon="grid">Grid</a>
  8. <a href="javascript:void(0)" data-role="button" data-icon="forward">Foward</a>
  9. <a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a> <a href="javascript:void(0)" data-role="button" data-icon="gear">Gear</a>
  10. <a href="javascript:void(0)" data-role="button" data-icon="arrow-l">Left Arrow</a>
  11. <a href="javascript:void(0)" data-role="button" data-icon="arrow-r">Right Arrow</a>
  12. <a href="javascript:void(0)" data-role="button" data-icon="arrow-u">Up Arrow</a> <a href="javascript:void(0)" data-role="button" data-icon="arrow-d">Down Arrow</a>
  13. <a href="javascript:void(0)" data-role="button" data-icon="home">Home</a>
  14. <a href="javascript:void(0)" data-role="button" data-icon="alert">Alert</a>
  15. <a href="javascript:void(0)" data-role="button" data-icon="star">Star</a>
  16. <a href="javascript:void(0)" data-role="button" data-icon="info">Info</a>
  17. <a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a>
  18. <a href="javascript:void(0)" data-role="button" data-icon="back">Back</a>

Así debería verse:

jquery-mobile-button-icons

Paso 4: Crea otra página .html y repite paso 2 para probar Botones sin texto con jQuery Mobile.

Paso 5: Coloca el código de aquí abajo dentro del tag body de la página html creada en el paso 5.

  1. <li>íconos sin texto</li>
  2.  
  3. <a href="javascript:void(0)" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
  4. <a href="javascript:void(0)" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a>
  5. <a href="javascript:void(0)" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a>
  6. <a href="javascript:void(0)" data-role="button" data-icon="check" data-iconpos="notext">Check</a>

Esto debería verse así:

jquery-mobile-button-with-no-text1

Esto es todo por esta vez. ¡Pero continuaremos la próxima semana!

Haz clic aquí para visitar la 2º parte del artículo >>

Fuente original del artículo: Dzone
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder