Foro | Los últimos tutoriales de desarrollo web
 

jQuery Mobile Atributos de los datos


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-inlinetrue | false Especifica si el botón debe ser en línea o no
data-minitrue | 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-minitrue | false Especifica si la casilla de verificación debe ser de tamaño pequeño o regular
data-rolenone 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-minitrue | 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-minitrue | 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-minitrue | 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-typehorizontal | 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-cachetrue | 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-fullscreentrue | 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-minitrue | 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-fullscreentrue | 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-fullscreentrue | 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-btntrue | 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-minitrue | false Especifica si la entrada debe ser de tamaño pequeño o regular
data-rolenone 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-directionreverse animación de transición inversa (sólo para la página o de diálogo)
data-dom-cachetrue | 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-prefetchtrue | false Especifica si se captación previa páginas en el DOM para que estén disponibles cuando el usuario los visita
data-relback | 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-autodividerstrue | 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-filtertrue | 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-insettrue | 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-rolelist-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-iconposleft | 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-cachetrue | 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-urlurl 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-tolerance30, 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-relpopup Para abrir la ventana emergente
data-transitionfade | 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-minitrue | false Especifica si el botón debe ser de tamaño pequeño o regular
data-rolenone 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-iconposleft | right | top | bottom | notext Especifica la posición del icono
data-inlinetrue | false Especifica si el elemento de selección debe ser en línea o no
data-minitrue | 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-placeholdertrue | false Puede ser fijado en una <option> elemento de un selecto no nativo
data-rolenone 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-highlighttrue | false Especifica si la pista deslizante debe destacar o no
data-minitrue | false Especifica si el regulador debe ser de tamaño pequeño o regular
data-rolenone 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