Red de conocimiento informático - Aprendizaje de programación - Problemas con la versión móvil de jquery

Problemas con la versión móvil de jquery

Las barras de herramientas se usan comúnmente en encabezados, pies de página y barras de herramientas de utilidades, y se encuentran en todas las páginas y programas móviles, por lo que jQuery Mobile proporciona un conjunto de barras de herramientas estándar y herramientas de navegación para cubrir los casos de uso más comunes.

ANUNCIO:

Estructura del encabezado

El encabezado suele ser la barra en la parte superior de la página que contiene el texto del título de la página y los botones opcionales, así como la barra de herramientas para navegación hacia la izquierda y/o hacia la derecha.

El texto del encabezado suele ser un elemento de encabezado H1, pero se puede utilizar para cualquier nivel de encabezado (H1 - H6) para lograr flexibilidad semántica. Por ejemplo, cuando una página contiene varias "páginas", puede usar H1 para representar el título de la "página de inicio" y usar un elemento H2 para representar el título de la "página" secundaria. De forma predeterminada, todos los niveles de encabezado tienen el mismo estilo para mantener la coherencia visual.

1. lt;div data-role="header"gt;

2. ;/divgt;

Características del encabezado predeterminado

La barra de herramientas del encabezado predeterminado está configurada en "una" paleta de temas (negra), pero puede configurar fácilmente la paleta de temas.

Volver al título de la página

¿Ves el botón "Volver"? El marco genera automáticamente este botón en cada página para simplificar el proceso de creación de una barra de navegación universal. Para evitar que el botón se agregue automáticamente al encabezado, puede agregar el botón en el lado izquierdo usted mismo o agregar el atributo data-backbtn="false" al contenedor del encabezado.

Agregar botones

En una configuración de encabezado estándar, hay muchos lugares para agregar botones junto al texto. Cada botón suele ser una etiqueta, pero se puede agregar cualquier etiqueta de botón disponible. Para ahorrar espacio, los botones tienen estilos en línea en las barras de herramientas, de modo que el ancho del botón coincida con el texto del botón que contiene.

Crea un botón Atrás personalizado

Si usas el atributo data-rel="back" en una etiqueta, cualquier clic en la etiqueta simulará un botón Atrás, solo Como el botón de historial del navegador, y se ignorará el href de la etiqueta a. Esta propiedad es útil cuando se vincula a una página existente (como "Inicio") o se genera un botón de retroceso o un botón de cierre de diálogo. Cuando utilice esta función en un archivo fuente, asegúrese de proporcionar un href significativo para la URL de la página de referencia (para que los usuarios puedan utilizar esta función en navegadores de nivel C). Además, tenga en cuenta que si sólo desea realizar una transición inversa sin tener que volver a la página anterior, debe utilizar el atributo data-direction="reverse".

Posicionamiento predeterminado del botón

El complemento de título busca los elementos secundarios inmediatos del contenedor de título y establece automáticamente el primer enlace a la izquierda y el segundo enlace al lado derecho. En el siguiente ejemplo, el botón Cancelar aparecerá a la izquierda y el botón Guardar aparecerá a la derecha.

1. lt;div data-role="header" data-position="inline"gt

2. ="eliminar"gt;cancellt;/agt;

3.html" data-icon="eliminar"gt;cancellt;/agt;

3.lt;a href= "index.html" data-icon="guardar"

5.p>3.h1gt;Editar contactolt; "check"gt; savelt;/agt;

5./divgt;

El botón se adaptará automáticamente a la paleta de colores de la barra de herramientas donde se encuentra el botón. la barra de título se ajusta Un botón con paleta de colores "a" también se establecerá en "a" a menos que establezca la propiedad del tema de datos del botón individualmente en un valor diferente (como b).

1. lt;div data-role="header" data-position="inline"gt

2. ="eliminar"gt;Cancelar;/agt;

3. lt;h1gt;Editar contactolt;/h1gt;

4. .html" data-icon="check" data-theme="b"gt; Savelt;/agt;

5. lt;/divgt; lt;/divgt;/agt; < lt;/ divgt;

Usar clases para controlar la posición de los botones

Del mismo modo, puedes usar clases en lugar del orden del código fuente para controlar la posición de los botones. Esto es útil cuando sólo desea que el botón esté en el lado derecho. Agregue la clase ui-btn-left o ui-btn-right a la etiqueta a para especificar la posición del botón.

En el siguiente ejemplo, solo agregamos un botón a la derecha, por lo que tenemos que agregar data-backbtn="false" para evitar que aparezca el botón Atrás y agregar ui-btn- a la derecha. botón clase derecha.

1. div data-role="header" data-position="inline" data-backbtn="false"gt

2. ;/h1gt;

3.a href="index.html" data-icon="gear" class="ui-btn-right"gt;/agt; >

4.lt;/divgt;

Personaliza el texto del botón Atrás

Si quieres configurar el texto del botón Atrás, puedes usar data-back -btn-text= atributo "anterior", o establezca las opciones del complemento mediante programación: $.mobile.page.prototype.options.backBtnText = "anterior";. Si lo configura mediante programación, configure la opción en el controlador del evento mobileinit.

Configuración de título personalizado

Si desea crear un título personalizado que encapsule su propio marcado en un contenedor div (contenedor de título), el complemento no aplicará la lógica del botón automático, por lo que puede escribir estilos personalizados para diseñar el contenido del encabezado.