Atributos de Datos jQuery
jQuery Mobile utiliza el HTML5 data-* atributo para crear un "touch-friendly" aspecto y atractivo para los dispositivos móviles.
Para la lista de referencias a continuación, bold value especifica el valor por defecto.
Botón
Desuso en la Versión 1.4. Utilice las clases CSS en su lugar. Los hipervínculos con el data-role="button" . Elementos del botón y enlaces en las barras de herramientas y campos de entrada están decoradas de forma automática como botones, sin necesidad de data-role="button" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-corners | true | false | Especifica si el botón debe tener esquinas redondeadas o no |
| data-icon | Icons Reference | Especifica el icono del botón. El valor predeterminado es ningún icono |
| data-iconpos | left | right | top | bottom | notext | Especifica la posición del icono |
| data-iconshadow | true | false | Especifica si el icono del botón debe tener o no sombras |
| data-inline | true | false | Especifica si el botón debe ser en línea o no |
| data-mini | true | false | Especifica si el botón debe ser de tamaño pequeño o regular |
| data-shadow | true | false | Especifica si el botón debe tener o no sombras |
| data-theme | letter (a-z) | Especifica el color del tema del botón |
Para agrupar varios botones, utilice un recipiente con el data-role="controlgroup" atribuir junto con data-type="horizontal|vertical" para especificar si desea botones del grupo de forma horizontal o vertical.
Caja
Pares de etiquetas y entradas con type="checkbox" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-mini | true | false | Especifica si la casilla de verificación debe ser de tamaño pequeño o regular |
| data-role | none | Evita jQuery Mobile para casillas de verificación de estilo como botones |
| data-theme | letter (a-z) | Especifica el color del tema de la casilla de verificación |
Para agrupar varias casillas de verificación, utilice la data-role="controlgroup" junto con el data-type="horizontal|vertical" para especificar si desea agrupar casillas de verificación horizontal o verticalmente.
Plegable
Un elemento de cabecera seguida de cualquier tipo de código HTML dentro de un recipiente con la data-role="collapsible" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-collapsed | true | false | Especifica si el contenido debe ser cerrado o se expande |
| data-collapsed-cue-text | sometext | Especifica un poco de texto para proporcionar información audible para los usuarios con software lector de pantalla. El valor predeterminado es "Click to collapse contenidos". |
| data-collapsed-icon | Icons Reference | Especifica el icono del botón plegable. El valor predeterminado es "más" |
| data-content-theme | letter (a-z) | Especifica el color del tema del contenido plegable. También añadir esquinas redondeadas para el contenido plegable |
| data-expanded-cue-text | sometext | Especifica un poco de texto para proporcionar información audible para los usuarios con software lector de pantalla. El valor predeterminado es "haga clic para expandir los contenidos". |
| data-expanded-icon | Icons Reference | Especifica el icono del botón plegable cuando el contenido se expande. El valor predeterminado es "minus" |
| data-iconpos | left | right | top | bottom | Especifica la posición del icono |
| data-inset | true | false | Especifica si el botón plegable debe ser de estilo con las esquinas redondeadas y un cierto margen o no |
| data-mini | true | false | Especifica si los botones plegables deben ser de tamaño pequeño o regular |
| data-theme | letter (a-z) | Especifica el color del tema del botón plegable |
Conjunto plegable
Plegables bloques de contenido dentro de un recipiente con el data-role="collapsibleset" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-collapsed-icon | Icons Reference | Especifica el icono del botón plegable. El valor predeterminado es "más" |
| data-content-theme | letter (a-z) | Especifica el color del tema del contenido plegable |
| data-expanded-icon | Icons Reference | Especifica el icono del botón plegable cuando el contenido se expande. El valor predeterminado es "menos" |
| data-iconpos | left | right | top | bottom | notext | Especifica la posición del icono |
| data-inset | true | false | Especifica si los botes hinchables deben ser de estilo con las esquinas redondeadas y un cierto margen o no |
| data-mini | true | false | Especifica si los botones plegables deben ser de tamaño pequeño o regular |
| data-theme | letter (a-z) | Especifica el color del tema del conjunto plegable |
Contenido
Desuso en la Versión 1.4, y será eliminado en 1.5. Envase con la data-role="content" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-theme | letter (a-z) | Especifica el color del tema del contenido |
Grupo de control
Un <div> o <fieldset> contenedor con data-role="controlgroup" . Grupos múltiples botones de ingreso de estilo de un solo tipo (botones basadas en enlaces, botones de radio, casillas de verificación, seleccione los elementos). Para agrupar casillas de verificación y botones de opción de formulario, el <fieldset> contenedor se recomienda dentro de un <div> con el "ui-fieldcontain" de clase, para mejorar el estilo de etiqueta.
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-exclude-invisible | true | false | Especifica si se debe excluir a los niños invisibles en la asignación de las esquinas redondeadas |
| data-mini | true | false | Especifica si el grupo debe ser de tamaño pequeño o regular |
| data-theme | letter (a-z) | Especifica el color del tema del grupo control |
| data-type | horizontal | vertical | Especifica si el grupo debe mostrarse horizontal o verticalmente |
Diálogo
Un recipiente con data-dialog="true" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-close-btn | left | right | none | Especifica la posición del botón de cierre |
| data-close-btn-text | sometext | Especifica el texto para el botón de cierre |
| data-corners | true | false | Especifica si el cuadro de diálogo debe tener esquinas redondeadas o no |
| data-dom-cache | true | false | Especifica si la memoria caché para borrar jQuery DOM o no para las páginas individuales (si es true, usted necesita tomar cuidado para manejar el DOM sí mismo y probar a fondo en todos los dispositivos móviles) |
| data-overlay-theme | letter (a-z) | Especifica el color de superposición (fondo) de la página de diálogo |
| data-theme | letter (a-z) | Especifica el color del tema de la página de diálogo |
| data-title | sometext | Especifica el título de la página de diálogo |
Mejora
Un recipiente con data-enhance="false" o data-ajax="false"
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-enhance | true | false | Si se establece en "true" , (por defecto) jQuery Mobile estilo automáticamente a la página, por lo que es adecuado para dispositivos móviles. Si se establece en "true", el marco no será el estilo de la página |
| data-ajax | true | false | Especifica si se debe cargar páginas a través de AJAX o no |
Nota: data-enhance="false" debe ser usado en conjunción con $.mobile.ignoreContentEnabled=true" para detener jQuery Mobile para hojas de estilo automáticamente.
Cualquier elemento de enlace o la forma en el interior data-ajax="false" contenedores será ignorado por la funcionalidad de navegación del marco cuando $.mobile.ignoreContentEnabled se establece en true.
campo contenedor
Desuso en la Versión 1.4, y será eliminado en 1.5. Uso class="ui-fieldcontain instead" . Un recipiente con data-role="fieldcontain" envuelto alrededor de la etiqueta / forma pareja de elementos.
Barra de herramientas fijo
Un recipiente con data-role="header" o data-role="footer" junto con la data-position="fixed" atributo.
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-disable-page-zoom | true | false | Especifica si el usuario es capaz de escalar / zoom de la página o no |
| data-fullscreen | true | false | Especifica las barras de herramientas que siempre se pueden colocar en la parte superior y / o inferior |
| data-tap-toggle | true | false | Especifica si el usuario es capaz de alternar barra de herramientas de visibilidad en las llaves / clics o no |
| data-transition | slide | fade | none | Especifica el efecto de transición cuando se produce un grifo / clic |
| data-update-page-padding | true | false | Especifica el relleno de la parte superior e inferior de la página se actualice el cambio de tamaño, la transición y "updatelayout" eventos (jQuery Mobile siempre actualiza el relleno en el "pageshow" evento) |
| data-visible-on-page-show | true | false | Especifica barra de herramientas de visibilidad cuando se muestra la página de los padres |
El interruptor de palanca del tirón
Un <input type="checkbox"> con un data-role de "flipswitch" :
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-mini | true | false | Especifica si el interruptor debe ser de tamaño pequeño o regular |
| data-on-text | sometext | Especifica el estado "encendido" texto en el interruptor basculante (por defecto es "On" ) |
| data-off-text | sometext | Especifica el texto "off" en el interruptor basculante (por defecto es "Off" ) |
Pie de página
Un recipiente con data-role="footer" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-id | sometext | Especifica un identificador único. Se requiere para pies de página persistentes |
| data-position | inline | fixed | Especifica si el pie de página debe estar en línea con el contenido de la página o quedará posicionada en la parte inferior |
| data-fullscreen | true | false | Especifica si el pie de página siempre debe estar colocado en la parte inferior y sobre el contenido de la página (un poco transparente) o no |
| data-theme | letter (a-z) | Especifica el color del tema del pie de página |
Nota: Para activar la posición de pantalla completa, el uso de data-position="fixed" y luego agregar la data-fullscreen atributo al elemento.
Encabezamiento
Un recipiente con data-role="header" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-id | sometext | Especifica un identificador único. Se requiere para encabezados persistentes |
| data-position | inline | fixed | Especifica si la cabecera debe estar en línea con el contenido de la página o quedará posicionada en la parte superior |
| data-fullscreen | true | false | Especifica si la cabecera debe colocarse siempre en la parte superior y sobre el contenido de la página (un poco transparente) o no |
| data-theme | letter (a-z) | Especifica el color del tema de la cabecera |
Nota: Para activar la posición de pantalla completa, el uso de data-position="fixed" y luego agregar la data-fullscreen atributo al elemento.
entradas
Entradas con type="text|search|etc." O textarea elements .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-clear-btn | true | false | Especifica si la entrada debe tener un "clear" botón |
| data-clear-btn-text | text | Especifica un texto para el botón "claro". El valor predeterminado es "clear text" |
| data-mini | true | false | Especifica si la entrada debe ser de tamaño pequeño o regular |
| data-role | none | JQuery Mobile evita que estilo de entradas / áreas de texto como botones |
| data-theme | letter (a-z) | Especifica el color del tema del campo de entrada |
Enlazar
Todos los enlaces.
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-ajax | true | false | Especifica si se debe cargar páginas a través de Ajax para mejorar la experiencia del usuario y transiciones. Si se establece en false, jQuery Mobile va a hacer una solicitud de página normal. |
| data-direction | reverse | animación de transición inversa (sólo para la página o de diálogo) |
| data-dom-cache | true | false | Especifica si la memoria caché para borrar jQuery DOM o no para las páginas individuales (si es true, usted necesita tomar cuidado para manejar el DOM sí mismo y probar a fondo en todos los dispositivos móviles) |
| data-prefetch | true | false | Especifica si se captación previa páginas en el DOM para que estén disponibles cuando el usuario los visita |
| data-rel | back | dialog | external | popup | Especifica una opción para la forma en que el enlace debe comportarse. Volver - da un paso atrás en la historia. Diálogo - Abre un enlace como un cuadro de diálogo, no utilice control de la historia. Externa - Para vincular a otro dominio. Popup - abre una ventana emergente. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Especifica cómo hacer la transición de una página a la siguiente. Ver nuestra Transiciones móviles jQuery capítulo. |
| data-position-to | origin | jQuery selector | window | Especifica la posición de las cajas emergentes. Origen - Default. Posiciona la ventana emergente a través del enlace que lo abre. selector de jQuery - posiciona el elemento emergente sobre el elemento especificado. Ventana - posiciona el elemento emergente en el medio de la pantalla de la ventana. |
Lista
Un <ol> o <ul> con data-role="listview" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-autodividers | true | false | Especifica si se debe dividir de forma automática elementos de la lista o no |
| data-count-theme | letter (a-z) | Especifica el color del tema de la burbuja recuento |
| data-divider-theme | letter (a-z) | Especifica el color del tema de la lista divisor |
| data-filter | true | false | Especifica si se debe añadir un cuadro de búsqueda en una lista o no |
| data-filter-placeholder | sometext | Desuso en la Versión 1.4. Utilice el atributo HTML en lugar del marcador de posición. Especifica el texto dentro del cuadro de búsqueda. El default es "Filtrar elementos ..." |
| data-filter-theme | letter (a-z) | Especifica el color del tema del filtro de búsqueda |
| data-icon | Icons Reference | Especifica el icono de la lista |
| data-inset | true | false | Especifica si la lista debe ser de estilo con las esquinas redondeadas y un cierto margen o no |
| data-split-icon | Icons Reference | Especifica el icono del botón de división. El valor predeterminado es "flecha-r" |
| data-split-theme | letter (a-z) | Especifica el color del tema del botón de división |
| data-theme | letter (a-z) | Especifica el color del tema de la lista |
Producto en la lista
Un <li> dentro de un <ol> o <ul> con data-role="listview" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-filtertext | sometext | Especifica un texto a buscar al filtrar elementos. Este texto será entonces ser filtrada en lugar del texto real de lista de elementos |
| data-icon | Icons Reference | Especifica el icono del elemento de lista |
| data-role | list-divider | Especifica un divisor de elementos de la lista |
| data-theme | letter (a-z) | Especifica el color del tema del elemento de lista |
Nota: El icono de datos-atributo único trabajo sobre elementos de la lista con enlaces.
navbar
<li> elementos dentro de un recipiente con data-role="navbar" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-icon | Icons Reference | Especifica el icono del elemento de lista |
| data-iconpos | left | right | top | bottom | notext | Especifica la posición del icono |
Navbars heredan el tema de muestras en su contenedor principal. No es posible establecer el atributo de temas de datos a una barra de navegación. El atributo-tema de datos se puede configurar individualmente para cada enlace dentro de la barra de navegación.
Página
Un recipiente con data-role="page" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-dom-cache | true | false | Especifica si la memoria caché para borrar jQuery DOM o no para las páginas individuales (si es true, usted necesita tomar cuidado para manejar el DOM sí mismo y probar a fondo en todos los dispositivos móviles) |
| data-overlay-theme | letter (a-z) | Especifica el color de superposición (fondo) de páginas de diálogo |
| data-theme | letter (a-z) | Especifica el color del tema de la página |
| data-title | sometext | Especifica el título de la página |
| data-url | url | Valor para la actualización de la URL, en lugar de la URL que se utiliza para solicitar la página |
Surgir
Un recipiente con data-role="popup" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-corners | true | false | Especifica si la ventana emergente debe tener esquinas redondeadas o no |
| data-dismissible | true | false | Especifica si la ventana emergente debe cerrarse haciendo clic fuera de la ventana emergente o no |
| data-history | true | false | Especifica si la ventana emergente debe crear un elemento del historial del navegador cuando se abre. Si se establece en false, no va a crear un elemento de la historia, y no será entonces se puede cerrar a través del botón "Atrás" del navegador |
| data-overlay-theme | letter (a-z) | Especifica el color de superposición (fondo) del cuadro emergente. El valor predeterminado es el fondo transparente (ninguno). |
| data-shadow | true | false | Especifica si el cuadro emergente debe tener o no sombras |
| data-theme | letter (a-z) | Especifica el color del tema del cuadro emergente. Por defecto heredado, "none" establece la ventana emergente a transparente |
| data-tolerance | 30, 15, 30, 15 | Especifica la distancia de los bordes de la ventana ( top, right, bottom, left ) |
Un ancla con data-rel="popup" :
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Especifica la posición de las cajas emergentes. Origen - Default. Posiciona la ventana emergente a través del enlace que lo abre. selector de jQuery - posiciona el elemento emergente sobre el elemento especificado. Ventana - posiciona el elemento emergente en el medio de la pantalla de la ventana. |
| data-rel | popup | Para abrir la ventana emergente |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Especifica cómo hacer la transición de una página a la siguiente. Ver nuestra Transiciones móviles jQuery capítulo. |
Boton de radio
Pares de etiquetas y entradas con type="radio" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-mini | true | false | Especifica si el botón debe ser de tamaño pequeño o regular |
| data-role | none | Evita jQuery Mobile a estilo radiobuttons como botones mejorados |
| data-theme | letter (a-z) | Especifica el color del tema del botón de opción |
Para múltiples botones de selección de grupo, utilice la data-role="controlgroup" junto con el data-type="horizontal|vertical" para especificar si desea agrupar los botones de forma horizontal o vertical.
Seleccionar
Todo <select> elementos.
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-icon | Icons Reference | Especifica el icono del elemento de selección. El valor predeterminado es "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Especifica la posición del icono |
| data-inline | true | false | Especifica si el elemento de selección debe ser en línea o no |
| data-mini | true | false | Especifica si el selecto debe ser de tamaño pequeño o regular |
| data-native-menu | true | false | Cuando se establece en false, se utiliza el propio menú de selección personalizada de jQuery (recomendado si desea que el menú de selección para mostrar la misma en todos los dispositivos móviles) |
| data-overlay-theme | letter (a-z) | Especifica el color del tema del menú de selección propia de encargo de jQuery (se utiliza junto con data-native-menu="false" ) |
| data-placeholder | true | false | Puede ser fijado en una <option> elemento de un selecto no nativo |
| data-role | none | JQuery Mobile evita que los elementos de estilo como botones de selección |
| data-theme | letter (a-z) | Especifica el color del tema del elemento select |
Agrupar varios elementos de seleccionar, utilizar la data-role="controlgroup" junto con el data-type="horizontal|vertical" para especificar si desea agrupar los elementos en horizontal o vertical.
deslizador
Entradas con type="range" .
| Data-atributo | Valor | Descripción |
|---|---|---|
| data-highlight | true | false | Especifica si la pista deslizante debe destacar o no |
| data-mini | true | false | Especifica si el regulador debe ser de tamaño pequeño o regular |
| data-role | none | JQuery Mobile impide a los controles deslizantes de estilo como botones |
| data-theme | letter (a-z) | Especifica el color del tema del control deslizante (la entrada, manejar y realizar el seguimiento) |
| data-track-theme | letter (a-z) | Especifica el color del tema de la guía de desplazamiento |