jQuery Mobile - Guía rápida
JQuery Mobile es un marco de interfaz de usuario, que se basa en jQuery Core y se utiliza para desarrollar sitios web o aplicaciones receptivos que son accesibles en dispositivos móviles, tabletas y computadoras de escritorio. Utiliza las funciones de jQuery y jQuery UI para proporcionar funciones de API para aplicaciones web móviles.
Fue desarrollado por el equipo del proyecto jQuery en el año 2010 y escrito en JavaScript.
¿Por qué utilizar jQuery Mobile?
Crea aplicaciones web que funcionarán de la misma manera en dispositivos móviles, tabletas y computadoras de escritorio.
Es compatible con otros frameworks como PhoneGap, Whitelight, etc.
Proporciona un conjunto de entradas de formulario y widgets de interfaz de usuario fáciles de tocar.
La mejora progresiva brinda una funcionalidad única a todas las plataformas móviles, tabletas y computadoras de escritorio y agrega cargas de página eficientes y un soporte más amplio para dispositivos.
Características de jQuery Mobile
Está construido sobre jQuery Core y el marco de interfaz de usuario "escribe menos, haz más".
Es un marco de código abierto, multiplataforma y compatible con varios navegadores.
Está escrito en JavaScript y utiliza funciones de jQuery y jQuery UI para crear sitios optimizados para dispositivos móviles.
Integra HTML5, CCS3, jQuery y jQuery UI en un marco para crear páginas con un mínimo de secuencias de comandos.
Incluye un sistema de navegación Ajax que utiliza transiciones de página animadas.
Ventajas de jQuery Mobile
Es fácil aprender y desarrollar aplicaciones si tiene conocimientos de HTML5, características de CSS3.
Es multiplataforma y compatible con varios navegadores, por lo que no tiene que preocuparse por escribir código diferente para la resolución de cada dispositivo.
Puede crear el tema personalizado usando ThemeRoller sin escribir la línea de código. Es compatible con todos los navegadores HTML5.
Utiliza HTML5 junto con JavaScript para facilitar el desarrollo de aplicaciones web.
Está construido de una manera que permite que el mismo código se escale automáticamente de la pantalla del móvil a la pantalla del escritorio.
Desventajas de jQuery Mobile
Hay opciones limitadas para los temas CSS, por lo que los sitios pueden verse similares a los creados por estos temas.
Las aplicaciones que se desarrollan con jQuery Mobile son más lentas en los móviles.
Lleva más tiempo cuando combina jQuery mobile con otros marcos móviles.
Difícil de proporcionar un diseño visual personalizado completo.
No se puede acceder a todas las funciones de un dispositivo mediante JavaScript en un navegador.
En este capítulo, discutiremos cómo instalar y configurar jQuery Mobile.
Descarga jQuery Mobile
Cuando abra el enlace jquerymobile.com/ , verá que hay dos opciones para descargar la biblioteca móvil jQuery.
Custom Download - Haga clic en este botón para descargar una versión personalizada de la biblioteca.
Latest Stable - Haga clic en este botón para obtener la versión estable y más reciente de la biblioteca móvil jQuery.
Descarga personalizada con Download Builder
Con Download Builder, puede crear una compilación personalizada que incluya solo las partes de la biblioteca que necesite. Cuando descargue esta nueva versión personalizada de jQuery Mobile, verá la siguiente pantalla.
Puede seleccionar las bibliotecas según sus necesidades y hacer clic en el Build My Download botón.
Descarga estable
Haga clic en el botón Estable , que conduce directamente a un archivo ZIP que contiene los archivos CSS y JQuery, para obtener la última versión de la biblioteca móvil jQuery. Extraiga el contenido del archivo ZIP en un directorio móvil de jQuery.
Esta versión contiene todos los archivos, incluidas todas las dependencias, una gran colección de demostraciones e incluso el conjunto de pruebas unitarias de la biblioteca. Esta versión es útil para comenzar.
Descargar la biblioteca jQuery desde CDN
Una CDN (Content Delivery Network) es una red de servidores diseñada para entregar archivos a los usuarios. Si usa un enlace CDN en su página web, traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si un visitante de su página web ya ha descargado una copia de jQuery mobile desde el mismo CDN, no tendrá que volver a descargarla. Puede incluir los siguientes archivos CDN en el documento HTML.
//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial. Usamos el servidor AMPPS (AMPPS es una pila WAMP, MAMP y LAMP de Apache, MySQL, MongoDB, PHP, Perl y Python) para ejecutar todos nuestros ejemplos.
Ejemplo
A continuación se muestra un ejemplo simple de jQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://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>Header Text</h1>
</div>
<div data-role = "main" class = "ui-content">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div data-role = "footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Los detalles del código anterior son:
Este código se especifica dentro del elemento head.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
La ventana gráfica se utiliza para especificar (por el navegador) mostrar el nivel y la dimensión de zoom de la página.
content = "width = device-width" se utiliza para establecer el ancho de píxel de la página o del dispositivo de pantalla.
initial-scale = 1 establece el nivel de zoom inicial, cuando la página se carga por primera vez.
Incluya las siguientes CDN
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
El contenido dentro de la etiqueta <body> es una página que se muestra en el navegador.
<div data-role = "page">
...
</div>
data-role = "header" crea el encabezado en la parte superior de la página.
data-role = "main" se utiliza para definir el contenido de la página.
data-role = "footer" crea el pie de página en la parte inferior de la página.
class = "ui-content" incluye relleno y margen dentro del contenido de la página.
Salida
Realicemos los siguientes pasos para ver cómo funciona el código anterior:
Guarde el código html anterior como simple_example.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/simple_example.html y se mostrará el siguiente resultado.
El usuario puede interactuar con las páginas de jQuery Mobile, que agrupa el contenido en vistas lógicas y vistas de página. La vista de página se puede animar usando transiciones de página. Se pueden crear varias páginas utilizando un documento HTML y, por lo tanto, no es necesario solicitar el contenido del servidor.
La siguiente tabla muestra los tipos de páginas en detalle.
No Señor. | Tipo y descripción |
---|---|
1 | Única página Se crea una sola página en un documento HTML utilizando una forma estándar de escribir una plantilla. |
2 | Plantilla de varias páginas Se pueden incluir varias páginas en un solo documento HTML, que se cargan juntas agregando varios divs con data-role = "page" . |
3 | Página de cuadros de diálogo Los cuadros de diálogo modales abren el contenido en una superposición interactiva sobre la página. |
Convenciones, no requisitos
Los elementos de atributo de rol de datos como el encabezado, pie de página, página y contenido se utilizan para proporcionar el formato y la estructura básicos de una página.
Para documentos de una sola página, el envoltorio de página que se requería para la inicialización automática se establece como opcional.
El elemento estructural se puede excluir de una página web con diseño personalizado.
Para administrar páginas, el marco inyecta el envoltorio de página cuando no está incluido en el marcado.
Precargar páginas
Incluyendo el atributo data-prefetch , podemos precargar páginas en el DOM en las plantillas de una sola página. Para más información haga clic aquí .
Caché DOM
Cuando la memoria del navegador se llena en DOM, ralentiza el navegador móvil o puede bloquearse debido a la carga de varias páginas. Hay un método simple para mantener el DOM ordenado:
Cuando una página se carga a través de ajax, indica eliminar la página del DOM cuando se redirige a otra página.
La página anterior que ha visitado se puede recuperar del caché cuando la vuelva a visitar.
En lugar de eliminar las páginas, puede decirle a jQuery mobile que lo mantenga en DOM usando la siguiente línea:
$.mobile.page.prototype.options.domCache = true;
Configure la opción domCache como verdadera en el complemento de la página para mantener todas las páginas en el DOM, que se visitó anteriormente.
pageContainerElement.page({ domCache: true });
jQuery Mobile proporciona un conjunto de iconos integrados, que se pueden usar con botones, botones de vista de lista que harán que los botones sean más atractivos.
La siguiente tabla enumera algunos de los iconos utilizados en el marco jQuery Mobile.
No Señor. | Área de iconos y descripción |
---|---|
1 | Conjunto de iconos Establece el icono en el botón. |
2 | Iconos de posicionamiento Especifica la posición del icono en el botón. |
3 | Solo icono Muestra solo un icono en el botón. |
4 | Sombra de icono Agrega una sombra de icono en su botón. |
5 | Eliminar círculo Elimina el círculo gris alrededor del icono. |
6 | Iconos en blanco o negro Cambia el color de los iconos a blanco o negro. |
7 | Combinando alt y nodisc Combina las clases alt y nodisc con el icono. |
Permite cambiar los valores de propiedad que ocurren durante una duración especificada y altera el comportamiento de un elemento de un estado a otro mediante la aplicación de diferentes estilos para cada estado.
La siguiente tabla enumera algunas de las transiciones de página utilizadas en el marco jQuery Mobile:
No Señor. | Transición y descripción | Para páginas | Para diálogos |
---|---|---|---|
1 | fade Puede hacer que los elementos aparezcan y desaparezcan de la visibilidad. |
Página de fundido | Diálogo de fundido |
2 | flip Voltea los elementos de atrás hacia adelante a la página siguiente. |
Voltear página | Diálogo Flip |
3 | pop Puede crear una ventana emergente. |
Página emergente | Diálogo Pop |
4 | flow Muestre la página siguiente manteniendo la página actual ausente. |
Página de flujo | Diálogo de flujo |
5 | slide Puede deslizar la página de derecha a izquierda. |
Página de diapositivas | Dialogo de diapositivas |
6 | slidefade Desliza la página de derecha a izquierda y se desvanece en la página siguiente. |
Página Slidefade | Diálogo Slidefade |
7 | slideup Desliza la página de abajo hacia arriba. |
Página deslizante | Diálogo deslizante |
8 | slidedown Desliza la página de arriba a abajo. |
Página deslizable | Diálogo deslizante |
9 | turn Puede pasar a la página siguiente. |
Pasar página | Diálogo de giro |
10 | none No puede utilizar ningún efecto de transición utilizando este atributo. |
Ninguna página | Diálogo Ninguno |
Establecer la transición y la configuración global
De forma predeterminada, las páginas tendrán fadetransición en el marco. Puede usar transiciones personalizadas agregando eldata-transitionatributo al enlace. Puede usar diferentes efectos de transición predeterminados para la página usandodefaultPageTransitionopción a nivel mundial. Para los diálogos, puede hacer uso dedefaultDialogTransition opción.
Transición alternativa
Todas las transiciones admiten transformaciones 3D excepto la transición de fundido. Los dispositivos que no admitan la transformación 3D, deberán hacer uso de la transición de desvanecimiento. Algunos navegadores no admiten transformaciones 3D para cada tipo de transición, por lo que puede utilizar elfade como alternativa de transición predeterminada.
Desplazamiento máximo para transiciones
Las transiciones se establecen en ninguna cuando se desplaza desde o hacia una página y la posición de desplazamiento será tres veces la altura de la pantalla del dispositivo. A veces, es posible que responda con lentitud o que el navegador se bloquee al hacer clic en cualquier elemento de navegación; así que para evitar esto estamos usando la posición de desplazamiento para la transición usandogetMaxScrollForTransition función.
Ancho máximo para transiciones
Puede deshabilitar la transición cuando el ancho de la ventana es mayor que el ancho del píxel. Puede configurar el ancho máximo para las transiciones usando el$.mobile.maxTransitionWidthopción global, que se establece en false de forma predeterminada. Toma valores como el ancho de píxel o el valor falso, y la transición se establecerá en ninguna si no es un valor falso cuando la ventana es mayor que el valor especificado.
Transición a la misma página
Puede agregar las transiciones a la página actual usando el allowSamePageTransition opción de widget de contenedor de página change() método.
Crear transiciones personalizadas
Puede crear las transiciones personalizadas en la página utilizando el $.mobile.transitionHandlers opción que amplía la selección de transiciones en el sitio web o la aplicación.
Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido.
La siguiente tabla muestra los tipos de cuadrículas en detalle.
No Señor. | Tipo y descripción |
---|---|
1 | Cuadrícula El sistema de cuadrícula móvil jQuery crea diseños de página a través de una serie de filas y columnas. |
2 | Botones en cuadrículas Colección de botón en formato grid en jQuery mobile. |
3 | Cuadrícula receptiva personalizada El estilo de cuadrícula básico se puede ampliar fácilmente al diseño adaptable personalizado mediante consultas de medios en CSS. |
Un widget es un pequeño dispositivo o control de su aplicación móvil jQuery. Los widgets pueden ser muy útiles ya que te permiten poner tus aplicaciones favoritas en tu pantalla de inicio para poder acceder a ellas rápidamente.
La siguiente tabla muestra los tipos de widgets en detalle.
No Señor. | Tipo y descripción |
---|---|
1 | Botones Especifica un botón en el que se puede hacer clic que incluye contenido como texto o imágenes. |
2 | Caja Las casillas de verificación se utilizan cuando se requiere seleccionar más de una opción. |
3 | Radiobox Los botones de opción se utilizan cuando hay muchas opciones, solo se requiere seleccionar una opción. |
4 | Selector de fechas Se centra en la entrada para abrir un calendario interactivo en una pequeña superposición. |
5 | Plegable Plegable le permite expandir o contraer el contenido cada vez que haga clic en él. Es muy útil para dispositivos móviles, que presenta un contenido breve. |
6 | Grupo de control Los grupos de control proporcionan un conjunto de botones para especificar un solo bloque que parece un componente de navegación. |
7 | Filtrable Al utilizar el atributo data-filter = "true" , puede filtrar los elementos secundarios de cualquier elemento. |
8 | Flipswitch Flip Switch le permite apagar / encender o verdadero / falso el interruptor haciendo clic en él para la entrada de estilo booleano. |
9 | Vista de la lista El propósito del componente listview es representar contenido complejo y personalizado en listas. |
10 | Cargador JQuery Mobile proporciona diferentes formas de cargar estados en un elemento. |
11 | Barra de navegación El widget de la barra de navegación es un conjunto de botones que lo vincula a otras páginas o secciones web. |
12 | Paneles Los paneles se utilizan para mostrar los componentes DOM en el cuadro. |
13 | Ventanas emergentes Popup es una interfaz de usuario que aparece dentro de una pequeña ventana para mostrar texto, imágenes y otro contenido. |
14 | Rangeslider El widget Rangeslider le proporciona un par de controles que le permiten seleccionar un rango de valores numéricos. |
15 | Seleccione el menú Un menú de selección proporciona varias opciones en forma de lista desplegable, desde donde un usuario puede seleccionar una o más opciones. |
dieciséis | Deslizador El control deslizante le permite elegir un valor deslizando el controlador del control deslizante. |
17 | Mesa jQuery Mobile usa la tabla para representar los datos en términos de filas y columnas, es decir, muestra los datos en formato tabular. |
18 | Pestañas El widget de pestañas es la extensión del widget de pestañas de jQuery ui, que acepta todos los métodos y opciones. |
19 | Entrada de texto La etiqueta <input> se usa para declarar un elemento de entrada, un control que permite al usuario ingresar datos. |
20 | Barra de herramientas El widget de barra de herramientas móvil de jQuery le permite crear encabezados y pies de página. |
jQuery Mobile permite crear páginas web dinámicas. Mediante el uso de eventos, puede configurar procesos controlados por eventos en los elementos, que se desencadenan por la interacción del usuario, como hacer clic con el mouse, pasar el mouse sobre un elemento, presionar una tecla en el teclado, etc.
La siguiente tabla enumera algunos de los eventos para los dispositivos móviles, que son compatibles con jQuery Mobile.
No Señor. | Descripción del evento |
---|---|
1 | Eventos de jQuery Mobile Responde a la interacción del usuario cuando el usuario hace clic en una página determinada o pasa el mouse sobre un elemento, etc. |
2 | Eventos de jQuery Touch Proporciona eventos táctiles cuando el usuario toca la pantalla. |
3 | Eventos de desplazamiento de jQuery Activa los eventos de desplazamiento cuando el usuario se desplaza hacia arriba y hacia abajo. |
4 | Evento de orientación de jQuery Activa el evento de orientación cuando el usuario gira el dispositivo vertical u horizontalmente. |
5 | Eventos de la página jQuery Proporciona los eventos de la página cuando el usuario oculta, crea, carga o descarga las páginas. |
La creación de formularios es fácil y muy flexible, que se construye con una combinación de botones y elementos de formulario estandarizados.
La siguiente tabla muestra los tipos de formulario en detalle.
No Señor. | Tipo y descripción |
---|---|
1 | Forma básica jQuery Mobile proporciona un sistema de diseño de formularios potente, fácil y versátil, que combina estilos de formulario, botón de entrada y compatibilidad con controles deslizantes. |
2 | Entradas de formulario La etiqueta <input> es un control que permite al usuario ingresar datos. |
3 | Seleccionar formulario En forma de opción, se proporciona una lista desplegable para el menú de selección. |
4 | Deslizadores de forma El control deslizante le permite elegir un valor deslizando el controlador del control deslizante. |
5 | Actualización e inicialización automática de elementos de formulario El método Refresh se usa para actualizar el nuevo estado del control de formulario por sí mismo y actualiza el control de formulario con JavaScript. |
Establece diferentes tipos de temas en los botones, barras de navegación, bloques, enlaces, etc. Puede configurar el tema mediante el atributo de tema de datos .
La siguiente tabla describe el uso de la funcionalidad del tema en diferentes áreas que es compatible con jQuery Mobile.
No Señor. | Funcionalidad y descripción |
---|---|
1 | Temas Proporciona dos tipos diferentes de temas, como el tema "a" y el tema "b", para personalizar el aspecto de la aplicación. |
2 | Tema de encabezado y pie de página en cuadros de diálogo Establece el tema del encabezado y pie de página en el cuadro de diálogo. |
3 | Botones temáticos, iconos y ventanas emergentes Especifica el tema de botones, iconos y ventanas emergentes. |
4 | Botones temáticos en encabezado y pie de página Muestra el tema de los botones en el encabezado y pie de página. |
5 | Barras de navegación temáticas Aplica el tema para las barras de navegación en el encabezado o pie de página. |
6 | Paneles temáticos Puede aplicar el tema para el panel. |
7 | Botón plegable de temática y botones divididos Muestra el tema de los botones plegables y divididos. |
8 | Listas temáticas y listas contraíbles Muestra el tema de listas y listas plegables. |
9 | Formularios plegables Puede aplicar el tema a los formularios. |
Clases CSS de jQuery
Puede usar diferentes tipos de clases CSS para diseñar los elementos como se describe en las secciones siguientes.
Clases globales
Las siguientes clases se pueden usar como clases globales en los widgets de jQuery Mobile:
No Señor. | Clase y descripción |
---|---|
1 | ui-corner-all Muestra los elementos con esquinas redondeadas. |
2 | ui-shadow Muestra la sombra de los elementos. |
3 | ui-overlay-shadow Muestra la sombra superpuesta para los elementos. |
4 | ui-mini Muestra los elementos más pequeños. |
Clases de botones
La siguiente tabla enumera las clases de botones que se utilizan con elementos de anclaje o botón:
No Señor. | Clase y descripción |
---|---|
1 | ui-btn Especifica que el elemento se diseñará como botón. |
2 | ui-btn-inline Muestra el botón como elemento en línea que ahorra el espacio necesario para la etiqueta. |
3 | ui-btn-icon-top Coloca el icono sobre el texto. |
4 | ui-btn-icon-right Coloca el icono a la derecha del texto. |
5 | ui-btn-icon-bottom Coloca el icono debajo del texto. |
6 | ui-btn-icon-left Coloca el icono a la izquierda del texto. |
7 | ui-btn-icon-notext Muestra el único icono. |
8 | ui-btn-a|b Muestra el color del botón ("a" será el color de fondo predeterminado, es decir, gris y "b" cambiará el color de fondo a negro). |
Clases de iconos
La siguiente tabla enumera las clases de iconos que se utilizan con elementos de anclaje o botón:
No Señor. | Clase y descripción |
---|---|
1 | ui-icon-action Muestra el icono de acción. |
2 | ui-icon-alert Muestra el signo de exclamación dentro de un triángulo. |
3 | ui-icon-arrow-d-l Especifica hacia abajo con la flecha izquierda. |
4 | ui-icon-arrow-d-r Especifica hacia abajo con la flecha derecha. |
5 | ui-icon-arrow-u-l Especifica hacia arriba con la flecha izquierda. |
6 | ui-icon-arrow-u-r Especifica hacia arriba con la flecha derecha. |
7 | ui-icon-arrow-l Especifica la flecha izquierda. |
8 | ui-icon-arrow-r Especifica la flecha derecha. |
9 | ui-icon-arrow-u Especifica la flecha hacia arriba. |
10 | ui-icon-arrow-d Especifica la flecha hacia abajo. |
11 | ui-icon-bars Muestra las 3 barras horizontales una encima de la otra. |
12 | ui-icon-bullets Muestra las 3 balas horizontales una encima de la otra. |
13 | ui-icon-carat-d Muestra el quilate hacia abajo. |
14 | ui-icon-carat-l Muestra el quilate a la izquierda. |
15 | ui-icon-carat-r Muestra el quilate a la derecha. |
dieciséis | ui-icon-carat-u Muestra el quilate para arriba. |
17 | ui-icon-check Muestra el icono de marca de verificación. |
18 | ui-icon-comment Especifica el comentario o mensaje. |
19 | ui-icon-forbidden Muestra el icono de prohibido. |
20 | ui-icon-forward Especifica el icono de reenvío. |
21 | ui-icon-navigation Especifica el icono de navegación. |
22 | ui-icon-recycle Muestra el icono de reciclaje. |
23 | ui-icon-refresh Muestra el icono de actualización. |
24 | ui-icon-tag Indica el icono de etiqueta. |
25 | ui-icon-video Indica el icono de video o cámara. |
Clases temáticas
Proporciona dos tipos diferentes de temas, como el tema "a" y el tema "b", para personalizar el aspecto de la aplicación. Puede crear sus propias clases temáticas agregando la letra de muestra (az). La siguiente tabla enumera las clases de temas que se especifican de la letra a la z.
No Señor. | Clase y descripción |
---|---|
1 | ui-bar-(a-z) Muestra el color de la barra, incluidos los encabezados, pies de página y otras barras de la página. |
2 | ui-body-(a-z) Muestra el color del bloque de contenido, incluida la vista de lista, ventanas emergentes, controles deslizantes, paneles, cargadores, etc. |
3 | ui-btn-(a-z) Muestra el color del botón. |
4 | ui-group-theme-(a-z) Muestra el color de los grupos de control, las vistas de lista y los conjuntos plegables. |
5 | ui-overlay-(a-z) Muestra el color de fondo de los contenedores de páginas, cuadros de diálogo y ventanas emergentes. |
6 | ui-page-theme-(a-z) Muestra el color de las páginas. |
Clases de cuadrícula
La siguiente tabla enumera las clases de cuadrícula que se utilizan con el mismo ancho, sin borde, fondo, margen o relleno.
No Señor. | Clase de cuadrícula | Columnas | Anchos de columna | Corresponde a |
---|---|---|---|---|
1 | ui-grid-solo | 1 | 100% | ui-block-a |
2 | ui-grid-a | 2 | 50% / 50% | ui-bloque-a | b |
3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-bloque-a | b | c |
4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloque-a | b | c | d |
5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloque-a | b | c | d | e |
Botón
Especifica un botón en el que se puede hacer clic que incluye contenido como texto o imágenes utilizando la clase ui-btn . Está en desuso en la versión 1.4. Utilice el atributo ui-btn en lugar de utilizar el atributo data-role = "button" .
La siguiente tabla enumera los elementos de botón utilizados con el atributo de datos.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-corners Define si el botón debe contener esquinas redondeadas o no. |
verdadero | falso |
2 | data-icon Define el icono del botón. |
El valor predeterminado es sin icono |
3 | data-iconpos Define la posición del icono. |
izquierda | derecha | arriba | fondo |
4 | data-iconshadow Define si el icono del botón debe contener sombra o no. |
verdadero | falso |
5 | data-inline Define si el botón debe estar en línea o no. |
verdadero | falso |
6 | data-mini Define si el botón debe mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
7 | data-shadow Define si el botón debe contener sombra o no. |
verdadero | falso |
8 | data-theme Muestra el color del tema del botón. |
letra (az) |
Caja
La siguiente tabla enumera los elementos de la casilla de verificación utilizados con type = "checkbox".
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-mini Define si la casilla de verificación debe mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
2 | data-role Detiene el estilo de las casillas de verificación como botones. |
ninguna |
3 | data-theme Muestra el color del tema para la casilla de verificación. |
letra (az) |
Plegable
La siguiente tabla enumera los elementos plegables utilizados con data-role = "collapsible" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-collapsed Indica si el contenido debe cerrarse o expandirse. |
verdadero | falso |
2 | data-collapsed-cue-text Muestra comentarios para los usuarios con software de lectura de pantalla. |
El contenido predeterminado es contraer |
3 | data-collapsed-icon Define el icono de botón plegable. |
El icono predeterminado es "más" |
4 | data-content-theme Muestra el color del tema para el contenido plegable. |
letra (az) |
5 | data-expanded-cue-text Muestra comentarios para los usuarios con software de lectura de pantalla. |
El contenido predeterminado es expandir |
6 | data-expanded-icon Muestra el botón plegable cuando expande el contenido. |
El icono predeterminado es "menos" |
7 | data-iconpos Define la posición del icono. |
izquierda | derecha | arriba | fondo |
8 | data-inset Define si el botón plegable debe mostrarse con esquinas redondeadas y margen o no. |
verdadero | falso |
9 | data-mini Define si los botones plegables deben mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
10 | data-theme Muestra el color del tema para el botón plegable. |
letra (az) |
Conjunto plegable
La siguiente tabla enumera los elementos del conjunto plegable utilizados con el data-role = "collapsibleset" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-collapsed-icon Define el icono de botón plegable. |
El icono predeterminado es "más" |
2 | data-content-theme Muestra el color del tema para el contenido plegable. |
letra (az) |
3 | data-expanded-icon Muestra el botón plegable cuando expande el contenido. |
El icono predeterminado es "menos" |
4 | data-iconpos Define la posición del icono. |
izquierda | derecha | arriba | fondo |
5 | data-inset Define si el botón plegable debe mostrarse con esquinas redondeadas y margen o no. |
verdadero | falso |
6 | data-mini Define si los botones plegables deben mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
7 | data-theme Muestra el color del tema para el botón plegable. |
letra (az) |
Grupo de control
La siguiente tabla enumera los elementos de Controlgroup utilizados con data-role = "controlgroup" atributo -
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-exclude-invisible Define si excluir a los niños invisibles en la asignación de esquinas redondeadas. |
verdadero | falso |
2 | data-mini Define si el grupo debe mostrarse en tamaño más pequeño o en tamaño regular. |
verdadero | falso |
3 | data-theme Muestra el color del tema para el grupo de control. |
letra (az) |
4 | data-type Indica si el grupo debe mostrarse en formato horizontal o vertical. |
horizontal | vertical |
Diálogo
La siguiente tabla enumera los elementos de diálogo utilizados con data-dialog="true" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-close-btn Define la posición del botón de cierre. |
izquierda | derecha | ninguna |
2 | data-close-btn-text Define el texto del botón de cierre. |
texto |
3 | data-corners Define si el diálogo debe mostrarse con esquinas redondeadas o no. |
verdadero | falso |
4 | data-dom-cache Indica si la caché DOM debe borrarse o no para páginas individuales. |
verdadero | falso |
5 | data-overlay-theme Define el color de superposición de la página de diálogo. |
letra (az) |
6 | data-theme Define el color del tema de la página de diálogo. |
letra (az) |
7 | data-title Define el título de la página de diálogo. |
texto |
Mejora
La siguiente tabla enumera los elementos de mejora utilizados con data-enhance="false" or data-ajax = "false" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-enhance Puede diseñar la página estableciendo este atributo en "verdadero". No puede aplicar estilo a la página si está configurado como "falso". |
verdadero | falso |
2 | data-ajax Indica si las páginas deben cargarse desde Ajax o no. |
verdadero | falso |
Barra de herramientas fija
La siguiente tabla enumera los elementos de la barra de herramientas utilizados con data-position = "fixed" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-disable-page-zoom Define si el usuario puede escalar / hacer zoom en la página o no. |
verdadero | falso |
2 | data-fullscreen Define que las barras de herramientas deben colocarse en la parte superior y / o inferior. |
verdadero | falso |
3 | data-tap-toggle Indica si el usuario puede alternar la visibilidad de la barra de herramientas en los toques o no. |
verdadero | falso |
4 | data-transition Muestra un efecto de transición cuando toca o hace clic en el elemento. |
diapositiva | desvanecerse | ninguna |
5 | data-update-page-padding Actualiza el relleno de la página utilizando eventos de cambio de tamaño, transición y actualización de diseño. |
verdadero | falso |
6 | data-visible-on-page-show Define la visibilidad de la barra de herramientas cuando se muestra la página principal. |
verdadero | falso |
Interruptor de palanca giratorio
La siguiente tabla enumera los elementos de palanca de volteo utilizados con data-role = "flipswitch" atributo -
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-mini Define si el conmutador debe mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
2 | data-on-text Define el texto "activado" en el interruptor. |
El valor predeterminado es "activado" |
3 | data-off-text Define el texto "apagado" en el interruptor. |
El valor predeterminado es "desactivado" |
Pie de página
La siguiente tabla enumera los elementos de pie de página utilizados con el atributo data-role = "footer" -
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-id Define la identificación única. |
texto |
2 | data-position Define si el pie de página debe colocarse en la parte inferior o en línea con el contenido de la página. |
en línea | fijo |
3 | data-fullscreen Define si el pie de página debe colocarse en la parte inferior y sobre el contenido de la página o no. |
verdadero | falso |
4 | data-theme Define el color del tema del pie de página. |
letra (az) |
Encabezamiento
La siguiente tabla enumera los elementos de encabezado utilizados con data-role = "header" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-id Define la identificación única. |
texto |
2 | data-position Define si el encabezado debe colocarse en la parte inferior o en línea con el contenido de la página. |
en línea | fijo |
3 | data-fullscreen Define si el encabezado debe colocarse en la parte inferior y sobre el contenido de la página o no. |
verdadero | falso |
4 | data-theme Define el color del tema del encabezado. |
letra (az) |
Entradas
La siguiente tabla enumera los elementos de entrada utilizados con type = "text|search|etc" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-clear-btn Define si el elemento de entrada debe contener un botón de borrar o no. |
verdadero | falso |
2 | data-clear-btn-text Define el texto del botón de borrar. |
texto |
3 | data-mini Define si la entrada debe mostrarse en tamaño más pequeño o en tamaño regular. |
verdadero | falso |
4 | data-role Detiene el estilo de las áreas de entrada o texto como botones. |
ninguna |
5 | data-theme Define el color del tema del elemento de entrada. |
letra (az) |
Enlace
La siguiente tabla enumera los elementos de enlace utilizados con jQuery Mobile.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-ajax Indica si las páginas deben cargarse a través de Ajax o no. |
verdadero | falso |
2 | data-direction Se utiliza para la transición inversa. |
contrarrestar |
3 | data-dom-cache Indica si la caché DOM de jQuery debe estar limpia o no para las páginas. |
verdadero | falso |
4 | data-prefetch Se utiliza para recuperar las páginas en DOM. |
verdadero | falso |
5 | data-rel Especifica el comportamiento del enlace. |
volver | diálogo | externo | surgir |
6 | data-transition Define la transición de una página a otra. |
desvanecerse | voltear | flujo | pop | diapositiva | slidedown | slidefade | slideup | girar | ninguna |
7 | data-position-to Define la posición de los cuadros emergentes. |
origen | jQuery selector | ventana |
Lista
La siguiente tabla muestra los elementos de la lista utilizados con data-role = "listview" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-autodividers Divide la lista automáticamente. |
verdadero | falso |
2 | data-count-theme Define el color del tema del elemento de recuento. |
letra (az) |
3 | data-divider-theme Define el color del tema para el divisor de lista. |
letra (az) |
4 | data-filter Se utiliza para filtrar los valores de la lista en el cuadro de búsqueda. |
verdadero | falso |
5 | data-filter-placeholder Define un texto dentro del cuadro de búsqueda. |
texto |
6 | data-filter-theme Define el color del tema para el filtro de búsqueda. |
letra (az) |
7 | data-icon Proporciona el icono de la lista. |
El valor predeterminado es sin icono |
8 | data-inset Define si la lista debe mostrarse con esquinas redondeadas y margen o no. |
verdadero | falso |
9 | data-split-icon Define el icono del botón de división. |
El icono predeterminado es "flecha-r" |
10 | data-split-theme Define el color del tema para el botón de división. |
letra (az) |
11 | data-theme Define el color del tema de la lista. |
letra (az) |
Elemento de lista
La siguiente tabla muestra los elementos de los elementos de la lista utilizados con data-role = "listview" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-filtertext Se utiliza para filtrar los valores de la lista utilizando el texto del cuadro de búsqueda. |
texto |
2 | data-icon Proporciona el icono del elemento de la lista. |
El valor predeterminado es sin icono |
3 | data-role Define el divisor de los elementos de la lista. |
divisor de lista |
4 | data-theme Define el color del tema para el elemento de la lista. |
letra (az) |
Barra de navegación
La siguiente tabla enumera los elementos de la barra de navegación utilizados con data-role = "navbar" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-icon Proporciona el icono del elemento de la lista. |
El valor predeterminado es sin icono |
2 | data-iconpos Define la posición del icono. |
izquierda | derecha | arriba | abajo | sin texto |
Página
La siguiente tabla enumera los elementos de página utilizados con data-role = "page" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-dom-cache Indica si la caché DOM debe borrarse o no para páginas individuales. |
verdadero | falso |
2 | data-overlay-theme Define el color de superposición de las páginas de diálogo. |
letra (az) |
3 | data-theme Define el color del tema de la página. |
letra (az) |
4 | data-title Proporciona el título de la página. |
El valor predeterminado es sin icono |
5 | data-url Se utiliza para actualizar la URL. |
url |
Surgir
La siguiente tabla enumera los elementos emergentes utilizados con data-role = "popup" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-corners Define si la ventana emergente debe mostrarse con esquinas redondeadas y margen o no. |
verdadero | falso |
2 | data-dismissible Define si la ventana emergente debe cerrarse haciendo clic fuera o no. |
verdadero | falso |
3 | data-history Define si la ventana emergente debe mostrar el historial del elemento cuando se abre. |
verdadero | falso |
4 | data-overlay-theme Define el color de superposición del cuadro emergente. |
letra (az) |
5 | data-shadow Muestra la sombra del cuadro emergente. |
verdadero | falso |
6 | data-theme Define el color del tema para el cuadro emergente. |
letra (az) |
7 | data-tolerance Define los bordes de la ventana. |
30, 15, 30, 15 |
Boton de radio
La siguiente tabla enumera los elementos de botón de radio que se utilizan con type = "radio" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-mini Define si el botón debe mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
2 | data-role Detiene el estilo de los botones de opción como botones mejorados. |
ninguna |
3 | data-theme Define el color del tema para el botón de opción. |
letra (az) |
Seleccione
La siguiente tabla enumera los elementos seleccionados que se utilizan con jQuery Mobile.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-icon Proporciona el icono del elemento seleccionado. |
El valor predeterminado es "flecha-d" |
2 | data-iconpos Define la posición del icono. |
izquierda | derecha | arriba | fondo |
3 | data-inline Define si el botón debe estar en línea o no. |
verdadero | falso |
4 | data-mini Define si la selección debe mostrarse en tamaño más pequeño o en tamaño regular. |
verdadero | falso |
5 | data-native-menu Utiliza el menú personalizado cuando se ha establecido en falso. |
verdadero | falso |
6 | data-overlay-theme Define el color de superposición para el menú de selección personalizado. |
letra (az) |
7 | data-placeholder Se utiliza para establecer un elemento de opción de selección no nativa. |
verdadero | falso |
8 | data-role Detiene el estilo de elementos seleccionados como botones. |
ninguna |
9 | data-theme Muestra el color del tema para los elementos seleccionados. |
letra (az) |
Deslizador
La siguiente tabla enumera los elementos deslizantes utilizados con type = "range" atributo.
No Señor. | Atributo de datos y descripción | Valor |
---|---|---|
1 | data-highlight Destaca el control deslizante. |
verdadero | falso |
2 | data-mini Define si el control deslizante debe mostrarse en tamaño más pequeño o en tamaño normal. |
verdadero | falso |
3 | data-role Detiene el estilo de los controles deslizantes como botones. |
ninguna |
4 | data-theme Muestra el color del tema para el control deslizante. |
letra (az) |
5 | data-track-theme Muestra el color del tema de la pista deslizante. |
letra (az) |