Creando un botón en jQuery Mobile
Un botón en jQuery Mobile se puede crear de tres maneras:
- Usando el elemento <input>
- Usando el elemento <button> con class = "ui-btn"
- Usando el elemento <a> con class = "ui-btn"
Usando <input>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Creación de Botones</h1>
</div>
<div data-role="main" class="ui-content">
<input type="button" value="Boton">
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</body>
</html>
Resultado:
Usando <button>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Creación de Botones</h1>
</div>
<div data-role="main" class="ui-content">
<button class="ui-btn">Boton</button>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</body>
</html>
Resultado:
Usando <a>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Creación de Botones</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#" class="ui-btn">Boton con etiqueta "a"</a>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</body>
</html>
Resultado:
Nota: Los botones de jQuery Mobile tienen un estilo automático, lo que los hace atractivos y utilizables tanto en dispositivos móviles como en computadoras de escritorio. Recomendamos que use el elemento <a> con class = "ui-btn" para vincular entre las páginas, y los elementos <input> o <button> para el envío del formulario.
Botones de navegación
Para enlazar entre páginas por botones, use el elemento <a> con class = "ui-btn":
Ejemplo:
Resultado:
Al clic en "Ir a pagina 2"
Resultado:
Nota: Si desea usar más de una clase, separe cada clase con un espacio, como: class = "ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
De manera predeterminada, los botones <input> tienen sombra y esquinas redondeadas. El elemento <a> y <button> no lo hace.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="paginauno">
<div data-role="header">
<h1>Botones</h1>
</div>
<div data-role="main" class="ui-content">
<p>Bienvenido!</p>
<a href="#paginados" class="ui-btn">Ir a pagina 2</a>
</div>
<div data-role="footer">
<h1>Pie de pagina 1</h1>
</div>
</div>
<div data-role="page" id="paginados">
<div data-role="header">
<h1>Botones</h1>
</div>
<div data-role="main" class="ui-content">
<p>Adios!</p>
<a href="#paginauno" class="ui-btn">Ir a pagina 1</a>
</div>
<div data-role="footer">
<h1>Pie de pagina 2</h1>
</div>
</div>
</body>
</html>
Botones agrupados
jQuery Mobile proporciona una manera fácil de agrupar botones.
Utilice el atributo data-role = "controlgroup" junto con data-type = "horizontal | vertical" en un elemento contenedor, para especificar si agrupar botones horizontal o verticalmente:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Grupo de botones</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="controlgroup" data-type="horizontal">
<p>Grupo Horizontal:</p>
<a href="#" class="ui-btn">Boton 1</a>
<a href="#" class="ui-btn">Boton 2</a>
<a href="#" class="ui-btn">Boton 3</a>
</div><br>
<div data-role="controlgroup" data-type="vertical">
<p>Grupo Vertical(default):</p>
<a href="#" class="ui-btn">Boton 1</a>
<a href="#" class="ui-btn">Boton 2</a>
<a href="#" class="ui-btn">Boton 3</a>
</div>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Botones hacia Atrás
Para crear un botón Atrás, use el atributo data-rel = "back" ( Nota: esto ignorará el valor href del ancla):
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Ejemplo de boton hacia atras</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#pagetwo" class="ui-btn">Ir a pagina 2</a>
</div>
<div data-role="footer">
<h1>Pie de pagina 1</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Regreso a pagina 1</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#" class="ui-btn" data-rel="back">Atras</a>
</div>
<div data-role="footer">
<h1>Pie de pagina 2</h1>
</div>
</div>
</body>
</html>
Resultado:
Al hacer Clic en botón "Ir a pagina 2"
Botones en línea
Por defecto, los botones ocupan todo el ancho de la pantalla. Si desea un botón que sea tan ancho como su contenido, o si desea que aparezcan dos o más botones uno al lado del otro, agregue la clase "ui-btn-inline":
Ejemplo:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Bienvenido</h1>
</div>
<div data-role="main" class="ui-content">
<p>Normal / Default button:</p>
<a href="#pagetwo" class="ui-btn">Ir a pagina 2</a>
<p>Inline button:</p>
<a href="#pagetwo" class="ui-btn ui-btn-inline">Ir a pagina 2</a>
</div>
<div data-role="footer">
<h1>Pie de pagina 1</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Bienvenido a pagina 2</h1>
</div>
<div data-role="main" class="ui-content">
<p>Botones en linea (aparecen lado a lado en toda la fila):</p>
<a href="#pageone" class="ui-btn ui-btn-inline">Ir a pagina 1</a>
<a href="#pageone" class="ui-btn ui-btn-inline">Ir a pagina 1</a>
<a href="#pageone" class="ui-btn ui-btn-inline">Ir a pagina 1</a>
</div>
<div data-role="footer">
<h1>Pie de pagina 2</h1>
</div>
</div>
Resultado:
Al hacer Clic en botón "Ir a pagina 2"
Más clases de CSS para botones de enlace
| Clase | Descripciónion | |
|---|---|---|
| ui-btn-b | Cambia el color del botón a un fondo negro con | |
| ui-corner-all | Añade esquinas redondeadas al botón. | |
| ui-mini | Hace el botón más pequeño | |
| ui-shadow | Añade sombras al botón. |
De manera predeterminada, los botones <input> tienen sombra y esquinas redondeadas. El elemento <a> y <button> no lo hace.
Uffffffffff, listo :)
No hay comentarios:
Publicar un comentario