Morton 24 de agosto de 2012 a las 09.18
   Imprimir artículo
elWebmaster.com

Botones en jQuery Mobile – 2° parte


jquerywideLa semana pasada, comenzamos a hablar sobre botones en jQuery Mobile, y cómo renderearlos con etiquetas centradas, esquinas redondeadas y sombras por defecto. En esta ocasión, te traemos la segunda parte con más ejemplos

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

Veamos cómo funciona:

Paso 6: Crea una nueva página .html y repite el proceso del paso 2 para probar botones Inline y agrupado de botones en jQuery Mobile.

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

  1. <li>Inline</li>
  2. <a href="javascript:void(0)" data-role="button" data-icon="delete" data-inline="true">Delete</a>
  3. <a href="javascript:void(0)" data-role="button" data-icon="plus" data-inline="true">Plus</a>
  4. <a href="javascript:void(0)" data-role="button" data-icon="minus" data-inline="true">Minus</a>
  5. <a href="javascript:void(0)" data-role="button" data-icon="check" data-inline="true">Check</a>
  6.  
  7. <li>Horizontal Grouping</li>
  8.  
  9. <div data-role="controlgroup" data-type="horizontal">
  10.    <a href="javascript:void(0)" data-role="button" data-inline="true">Button 1</a>
  11.    <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
  12.    <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
  13. </div>
  14.  
  15. <li>Normal Grouping</li>
  16.  
  17. <div data-role="controlgroup">
  18.    <a href="javascript:void(0)" data-role="button">Button 1</a>
  19.    <a href="javascript:void(0)" data-role="button">Button 2</a>
  20.    <a href="javascript:void(0)" data-role="button">Button 2</a>
  21. </div>

Al probarlo, éste es el resultado:

jquery-mobile-button-inline-and-button-grouping

Paso 8: Crea una nueva página .html y repite el proceso del paso 2 para probar botones sin sombras, botones sin bordes y posición del ícono en jQuery Mobile.

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

  1. <li>No Shadow</li>
  2.  
  3. <a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="delete" data-inline="true">Delete</a>
  4. <a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="plus" data-inline="true">Plus</a>
  5.  
  6. <li>No Corners</li>
  7.  
  8. <a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="minus" data-inline="true">Minus</a>
  9. <a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="check" data-inline="true">Check</a>
  10.  
  11. <li>Icon Position</li>
  12.  
  13. <a href="javascript:void(0)" data-role="button" data-iconpos="right" data-icon="grid" data-inline="true">Grid</a>    
  14. <a href="javascript:void(0)" data-role="button" data-iconpos="left" data-icon="forward" data-inline="true">Foward</a>
  15. <a href="javascript:void(0)" data-role="button" data-iconpos="bottom" data-icon="refresh" data-inline="true">Refresh</a>
  16. <a href="javascript:void(0)" data-role="button" data-iconpos="top" data-icon="gear" data-inline="true">Gear</a>

Prueba la aplicación y obtendrás esto:

jquery-mobile-buttons-with-shadow-no-corners-icon-position

Esto es todo. ¡Esperamos que les haya sido de utilidad!

Haz clic aquí para visitar la 1º 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

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