En 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.
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1"/>
- <title></title>
- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
- <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script>
- <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
- <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" />
- </head>
- <body>
- </body>
- </html>
Paso 3: Ahora coloca el código de aquà abajo en la sección body de la página HTML.
- <li>Botones con Ãconos</li>
- <a href="javascript:void(0)" data-role="button" data-icon="delete">Delete</a>
- <a href="javascript:void(0)" data-role="button" data-icon="plus">Plus</a>
- <a href="javascript:void(0)" data-role="button" data-icon="minus">Minus</a>
- <a href="javascript:void(0)" data-role="button" data-icon="check">Check</a>
- <a href="javascript:void(0)" data-role="button" data-icon="grid">Grid</a>
- <a href="javascript:void(0)" data-role="button" data-icon="forward">Foward</a>
- <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>
- <a href="javascript:void(0)" data-role="button" data-icon="arrow-l">Left Arrow</a>
- <a href="javascript:void(0)" data-role="button" data-icon="arrow-r">Right Arrow</a>
- <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>
- <a href="javascript:void(0)" data-role="button" data-icon="home">Home</a>
- <a href="javascript:void(0)" data-role="button" data-icon="alert">Alert</a>
- <a href="javascript:void(0)" data-role="button" data-icon="star">Star</a>
- <a href="javascript:void(0)" data-role="button" data-icon="info">Info</a>
- <a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a>
- <a href="javascript:void(0)" data-role="button" data-icon="back">Back</a>
Asà deberÃa verse:
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.
- <li>Ãconos sin texto</li>
- <a href="javascript:void(0)" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
- <a href="javascript:void(0)" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a>
- <a href="javascript:void(0)" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a>
- <a href="javascript:void(0)" data-role="button" data-icon="check" data-iconpos="notext">Check</a>
Esto deberÃa verse asÃ:
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
Comentarios recientes