Atributos de datos jQuery Mobile Data

Atributos de datos de jQuery

jQuery Mobile utiliza las propiedades HTML5 data-* para crear un aspecto atractivo y táctilmente amigable para dispositivos móviles.

En la siguiente lista de referencias, los valores en negrita definen los valores por defecto.

Button

Enlaces con data-role="button". Los elementos de botón y enlaces en la barra de herramientas y campos de entrada se configurarán automáticamente con el estilo del botón, sin necesidad de data-role="button".

Atributos de datos Valor Descripción
data-corners true | false Defina si el botón tiene bordes redondeados.
data-icon Referencia de Íconos Defina el icono del botón. Por defecto, no hay icono.
data-iconpos left | right | top | bottom | notext Define la posición del ícono.
data-iconshadow true | false Defina si el icono del botón tiene sombra.
data-inline true | false Defina si el botón es inline.
data-mini true | false Defina si el botón es de tamaño pequeño o de tamaño normal.
data-shadow true | false Defina si el botón tiene sombra.
data-theme letra (a-z) Defina el color del tema del botón.

Consejo:Si desea combinar varios botones, utilice un contenedor con las propiedades data-role="controlgroup" y data-type="horizontal|vertical" para definir si los botones se combinan horizontalmente o verticalmente.

Checkbox

El label y el input con type="checkbox" son pares. Serán automáticamente establecidos como estilo de botón, sin necesidad de data-role.

Atributos de datos Valor Descripción
data-mini true | false Define si la casilla de verificación es de tamaño pequeño o de tamaño normal.
data-role none Evita que jQuery Mobile establezca la casilla de verificación como estilo de botón.
data-theme letra (a-z) Define el color del tema de las casillas de verificación.

Consejo:Para combinar varios casillas de verificación, utilice data-role="controlgroup" y data-type="horizontal|vertical" para definir si la combinación es horizontal o vertical.

Collapsible

Elemento de título, seguido de cualquier marcado HTML dentro del contenedor con atributo data-role="collapsible".

Atributos de datos Valor Descripción
data-collapsed true | false Define si el contenido debe cerrarse o expandirse.
data-collapsed-icon Referencia de Íconos Define el icono del botón plegable. Por defecto es "plus".
data-content-theme letra (a-z) Define el color del tema del contenido plegable. Además, se añade borde redondo al contenido plegable.
data-expanded-icon Referencia de Íconos Define el icono del botón plegable cuando el contenido se expande. Por defecto es "menos".
data-iconpos left | right | top | bottom Define la posición del ícono.
data-inset true | false Define si el botón plegable tiene estilo de borde redondo y margen. left | right | top | bottom
data-mini true | false Define si el botón plegable es de tamaño pequeño o de tamaño normal.
data-theme letra (a-z) Define el color del tema del botón plegable.

Collapsible Set

Contenido plegable dentro del contenedor con atributo data-role="collapsible-set".

Atributos de datos Valor Descripción
data-collapsed-icon Referencia de Íconos Define el icono del botón plegable. Por defecto es "más".
data-content-theme letra (a-z) Define el color del tema del contenido plegable.
data-expanded-icon Referencia de Íconos Define el icono del botón plegable cuando el contenido se expande. Por defecto es "menos".
data-iconpos left | right | top | bottom | notext Define la posición del ícono.
data-inset true | false Define si los collapsibles tienen estilo de borde redondo y margen.
data-mini true | false Define si el botón plegable es de tamaño pequeño o de tamaño normal.
data-theme letra (a-z) Define el color del tema del conjunto plegable.

Content

Contenedor con atributo data-role="content".

Atributos de datos Valor Descripción
data-theme letra (a-z) Define el color del tema del contenido. Por defecto es "c".

Controlgroup

Contenedor <div> o <fieldset> con atributo data-role="controlgroup". Combinación de varios input de un solo tipo de botón (basado en enlaces, botones de opción, casillas de verificación, menú de selección).

Atributos de datos Valor Descripción
data-mini true | false Define si la combinación es de tamaño pequeño o de tamaño normal.
data-type horizontal | vertical Define si la combinación se muestra en horizontal o vertical.

Dialogo

El contenedor con atributo data-role="dialog" o el enlace con data-rel="dialog".

Atributos de datos Valor Descripción
data-close-btn-text sometext Se especifica el texto del botón de cierre utilizado solo en los diálogos.
data-dom-cache true | false Se especifica si se debe limpiar el caché del jQuery DOM para la página individual (si se establece en true, se debe prestar atención a la gestión del DOM y realizar pruebas exhaustivas en todos los dispositivos móviles).
data-overlay-theme letra (a-z) Especifique el color de superposición (fondo) de la página de diálogo.
data-theme letra (a-z) Se especifica el color de tema de la página de diálogo.
data-title sometext Se especifica el título de la página de diálogo.

Mejora

Contenedor con atributos data-enhance="false" o data-ajax="false".

Atributos de datos Valor Descripción
data-enhance true | false Si se establece en "true" (por defecto), jQuery Mobile agregará automáticamente estilos a la página para que sea más adecuada para dispositivos móviles. Si se establece en "false", el framework no configurará estilos de página.
data-ajax true | false Se especifica si se carga la página mediante AJAX.

Nota:data-enhance="false", por ejemplo, combinado con $.mobile.ignoreContentEnabled=true, para evitar que jQuery Mobile agregue estilos de página automáticamente.

Cuando se establece $.mobile.ignoreContentEnabled en true, cualquier enlace o elemento de formulario en el contenedor con data-ajax="false" será ignorado por la función de navegación del framework.

Fieldcontainer

Contenedor que envuelve elementos de label/form con data-role="fieldcontain".

Barra de herramientas fija

Contenedor con atributos data-role="header" o data-role="footer" y data-position="fixed".

Atributos de datos Valor Descripción
data-disable-page-zoom true | false Se especifica si el usuario tiene la capacidad de escalar la página.
data-fullscreen true | false Se especifica que la barra de herramientas esté siempre en la parte superior y / o inferior.
data-tap-toggle true | false Se especifica si el usuario tiene la capacidad de alternar la visibilidad de la barra de herramientas mediante toque o clic.
data-transition slide | fade | none Se especifica el efecto de transición cuando se produce un toque o clic.
data-update-page-padding true | false Se especifica que se actualicen los márgenes superior, inferior e interior de la página cuando se produzcan eventos resize, transition y "updatelayout" (jQuery Mobile siempre actualiza los márgenes interiores en el evento "pageshow").
data-visible-on-page-show true | false Se especifica la visibilidad de la barra de herramientas en la página principal de visualización.

Interruptor de conmutación giratorio

Un elemento <select> con atributo data-role="deslizador" y dos elementos <option>.

Atributos de datos Valor Descripción
data-mini true | false Se establece si el interruptor es de tamaño pequeño o normal.
data-role none Evita que jQuery Mobile establezca el interruptor de conmutación con estilo de botón.
data-theme letra (a-z) Se establece el color del tema del interruptor de conmutación.
data-track-theme letra (a-z) Se establece el color del tema de la raya.

Pie de página

Contenedor con atributo data-role="pie".

Atributos de datos Valor Descripción
data-id sometext Se establece un ID único. Es necesario para pies de página persistentes.
data-position inline | fijo Se establece si el pie de página debe mantenerse en línea con el contenido de la página o permanecer en la parte inferior.
data-fullscreen true | false Se establece si el pie de página siempre se mantiene en la parte inferior y cubre el contenido de la página (levemente transparente).
data-theme letra (a-z) Se establece el color del tema del pie de página. Por defecto es "a".

Nota:Para activar la ubicación de pantalla completa, utilice data-position="fijo" y luego agregue la propiedad data-fullscreen al elemento.

Encabezado

Contenedor con data-role="encabezado".

Atributos de datos Valor Descripción
data-id sometext Se establece un ID único. Es necesario para encabezados persistentes.
data-position inline | fijo Se establece si el encabezado de página debe mantenerse en línea con el contenido de la página o permanecer en la parte superior.
data-fullscreen true | false Se establece si la página siempre se mantiene en la parte superior y cubre el contenido de la página (levemente transparente).
data-theme letra (a-z) Se establece el color del tema del encabezado de página. Por defecto es "a".

Nota:Para activar la ubicación de pantalla completa, utilice data-position="fijo" y luego agregue la propiedad data-fullscreen al elemento.

Enlace

Todos los enlaces, incluyendo los enlaces con data-role="button" y los botones de envío de formularios.

Atributos de datos Valor Descripción
data-ajax true | false Se establece si se carga la página mediante AJAX para mejorar la experiencia del usuario y la transición. Si se establece en false, jQuery Mobile realiza solicitudes de página normales.
data-direction invierte Invierte la animación de transición (solo para páginas o diálogos).
data-dom-cache true | false Especifique si se debe limpiar el caché del jQuery DOM de la página individual (si se establece en true, debe prestar atención a la gestión del DOM y realizar pruebas exhaustivas en todos los dispositivos móviles).
data-prefetch true | false Se establece si la página se pre-carga al DOM para que esté disponible cuando el usuario la accede.
data-rel atrás | diálogo | externo | emergente Se establecen las opciones sobre cómo deben comportarse los enlaces. Atrás - Mueve un paso hacia atrás en el historial. Diálogo - Abre la página como un diálogo, sin registrar en el historial. Externo - Conecta a otro dominio. Se abre - Abre una ventana emergente.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Especifique cómo se debe transicionar de una página a la siguiente. Consulte las transiciones de jQuery Mobile.
data-position-to origin | selector jQuery | window Especifique la posición del cuadro emergente. Origen - Predeterminado. Se abre en un enlace emergente. Selector jQuery - Se despliega en el elemento especificado. Ventana - Se despliega en el centro de la pantalla de la ventana.

Lista

El <ol> o <ul> con el atributo data-role="listview".

Atributos de datos Valor Descripción
data-autodividers true | false Se establece si se separan automáticamente los elementos de lista.
data-count-theme letra (a-z) Se establece el color de tema de la espuma de cuenta. Por defecto es "c".
data-divider-theme letra (a-z) Se establece el color de tema del separador de lista. Por defecto es "b".
data-filter true | false Se establece si se añade una caja de búsqueda en la lista.
data-filter-placeholder sometext Se establece el texto en la caja de búsqueda. Por defecto es "Filter items...".
data-filter-theme letra (a-z) Se establece el color de tema del programa de búsqueda de filtrado. Por defecto es "c".
data-icon Referencia de Íconos Se establece el icono de la lista.
data-inset true | false Se establece si se añaden estilos de borde redondeado y margen externo a la lista.
data-split-icon Referencia de Íconos Se establece el icono del botón de división. Por defecto es "arrow-r".
data-split-theme letra (a-z) Se establece el color de tema del botón de división. Por defecto es "b".
data-theme letra (a-z) Se establece el color de tema de la lista.

Elemento de lista

El <li> dentro de <ol> o <ul> con el atributo data-role="listview".

Atributos de datos Valor Descripción
data-filtertext sometext Se establece el texto que se buscará al filtrar elementos. Este texto, en lugar del texto real del elemento de lista, se buscará.
data-icon Referencia de Íconos Se establece el icono del elemento de lista.
data-role list-divider Se establece el separador del elemento de lista.
data-theme letra (a-z) Se establece el color de tema del elemento de lista.

Nota:La propiedad data-icon solo se aplica a los elementos de lista que contienen enlaces.

Barra de navegación

Elemento <li> dentro del contenedor con el atributo data-role="navbar".

Atributos de datos Valor Descripción
data-icon Referencia de Íconos Se establece el icono del elemento de lista.
data-iconpos left | right | top | bottom | notext Define la posición del ícono.

Consejo:La barra de navegación hereda el theme-swatch de su contenedor padre. No es posible establecer la propiedad data-theme en la barra de navegación. Se puede establecer la propiedad data-theme en cada enlace de la navbar por separado.

Página

Contenedor con la propiedad de atributo data-role="page".

Atributos de datos Valor Descripción
data-add-back-btn true | false Añade automáticamente el botón de retroceso, solo para la cabecera de la página.
data-back-btn-text sometext Se establece el texto del botón de retroceso.
data-back-btn-theme letra (a-z) Se establece el color de tema del botón de retroceso.
data-close-btn-text letra (a-z) Se establece el texto del botón de cerrar en la conversación.
data-dom-cache true | false Especifique si se debe limpiar el caché del jQuery DOM de la página individual (si se establece en true, debe prestar atención a la gestión del DOM y realizar pruebas exhaustivas en todos los dispositivos móviles).
data-overlay-theme letra (a-z) Especifique el color de superposición (fondo) de la página de diálogo.
data-theme letra (a-z) Especifique el color del tema de la página. Por defecto es "c".
data-title sometext Especifique el título de la página.
data-url url Este valor se utiliza para actualizar la URL, no para realizar solicitudes de página.

Popup

Contenedor con atributo data-role="popup":

Atributos de datos Valor Descripción
data-corners true | false Especifique si el cuadro emergente tiene bordes redondeados.
data-overlay-theme letra (a-z) Especifique el color de superposición (fondo) del cuadro emergente. Por defecto es fondo transparente (none).
data-shadow true | false Especifique si el cuadro emergente tiene sombra.
data-theme letra (a-z) Especifique el color del tema del cuadro emergente. Por defecto es heredado, "none" establece en transparente.
data-tolerance 30, 15, 30, 15 Especifique la distancia del borde del ventanal (top, right, bottom, left).

Ancla con atributo data-rel="popup":

Atributos de datos Valor Descripción
data-position-to origin | selector jQuery | window Especifique la posición del cuadro emergente. Origin - Por defecto. El cuadro emergente se ubicará en el enlace que lo abre. Selector jQuery - El cuadro emergente se ubicará en el elemento especificado. Window - El cuadro emergente se ubicará en el centro de la pantalla de la ventana.
data-rel popup Usado para abrir cuadros de diálogo emergentes.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Especifique cómo se debe transicionar de una página a la siguiente. Consulte las transiciones de jQuery Mobile.

Botón de opción de radio

El par input de label con type="radio" se configurará automáticamente como estilo de botón, sin necesidad de data-role.

Atributos de datos Valor Descripción
data-mini true | false Especifique si los botones deben ser de tamaño pequeño o de tamaño normal.
data-role none Coloque jQuery Mobile para establecer el estilo de los botones de opción como enhanced buttons.
data-theme letra (a-z) Especifique el color del tema de los botones de opción.

Consejo:Para combinar varios botones de opción, utilice data-role="controlgroup" y data-type="horizontal|vertical" para especificar si se deben combinar horizontalmente o verticalmente los botones.

Select

Todos los elementos <select>. Son automáticamente aplicados estilos de botón, sin necesidad de date-role.

Atributos de datos Valor Descripción
data-icon Referencia de Íconos Define el ícono del elemento select. Por defecto es "arrow-d".
data-iconpos left | right | top | bottom | notext Define la posición del ícono.
data-inline true | false Define si el elemento select es de línea.
data-mini true | false Define si el elemento select es de tamaño pequeño o normal.
data-native-menu true | false Si se establece en false, se utiliza el menú de selección personalizado de jQuery por defecto (se recomienda usarlo si desea que el menú de selección tenga un aspecto consistente en todos los dispositivos móviles).
data-overlay-theme letra (a-z) Define el color del tema del menú de selección personalizado de jQuery (utilizado junto con data-native-menu="false").
data-placeholder true | false Puede aplicarse en elementos <option> de select no nativos.
data-role none Establece el estilo del botón del elemento select al insertar jQuery Mobile.
data-theme letra (a-z) Define el color del tema del elemento select.

Consejo:Para combinar múltiples elementos select, utilice data-role="controlgroup" y data-type="horizontal|vertical" para definir si debe combinarse horizontal o verticalmente.

Slider

Elementos input con atributo type="range" son automáticamente aplicados estilos de botón, sin necesidad de data-role.

Atributos de datos Valor Descripción
data-highlight true | false Define si la pista del slider debe resaltarse.
data-mini true | false Define si el slider es de tamaño pequeño o normal.
data-role none Establece el estilo del botón del control del slider al insertar jQuery Mobile.
data-theme letra (a-z) Define el color del tema del control del deslizador (input, handle y pista).
data-track-theme letra (a-z) Define el color del tema de la pista del deslizador.

Entrada de texto y Textarea

Elementos input de texto o textarea con atributo type="text|search|etc." son automáticamente aplicados estilos, sin necesidad de data-role.

Atributos de datos Valor Descripción
data-mini true | false Especifica si el elemento input es de tamaño pequeño o normal.
data-role none Coloca jQuery Mobile que configura el estilo de los botones de input/textarea.
data-theme letra (a-z) Define el color del tema del campo de entrada especificado.