Es genial ser capaz de recortar una página web HTML 5 y CSS 3 para que se ajuste en un dispositivo móvil, pero es evidente que si la página es más pequeño, tendrá más de ellos. Las aplicaciones móviles a menudo usar una metáfora al pasar las páginas de empacar más datos en una pequeña porción de espacio de la pantalla, y la biblioteca móvil jQuery tiene otra herramienta maravillosa para hacer esto fácil.

Hasta el momento, esta aplicación se parece a las otras aplicaciones móviles jQuery que he visto hasta ahora. Una cosa es diferente, y ese es el botón de la cabecera. Es muy común para aplicaciones móviles tengan botones de navegación en la cabecera. Pulse el botón Siguiente.

Después de una transición de fundido ingenioso, aparece la página siguiente. Éste tiene dos botones en la cabecera. Al pulsar de nuevo en Siguiente lleva al usuario a la tercera página.

La tercera página es una vez más muy familiar, pero esta vez tiene un solo botón a la izquierda de la cabecera, y el otro botón en el área de la página principal.

Lo interesante de estas tres páginas es que no son tres páginas en absoluto! Todo esto es sólo una página, diseñado para actuar como tres páginas diferentes. Hay un par de ventajas con esta disposición.

• CSS y javascript recursos sólo tienen que cargarse una vez: Esto mantiene el sistema consistente y mejora los tiempos de carga ligeramente.

• No hay tiempo de retraso: Cuando se carga el documento, todo el asunto está en la memoria, incluso si sólo una parte es visible a la vez. Esto le permite desplazarse rápidamente por las páginas sin tener que esperar a que el acceso al servidor.

Que normalmente poner en práctica este tipo de mecanismo cuando se tiene una gran página desea tratar como varias páginas más pequeñas por lo que el usuario no tiene que desplazarse.

Aquí está el código para multiPage.html en su totalidad.

Página uno
siguiente
Este es el índice
Página 1
página 2
página 3
desde HTML todo en uno para los maniquíes
prev
página Dos
siguiente
La segunda página es muy similar a la primera, exceptit no es la primera, y tiene texto en lugar thanbuttons. Es la segunda page.If te gusta la primera, supongo que CANGO atrás, pero que realmente debe ir a la nextpage, porque me han dicho que es muy agradable.
desde HTML todo en uno para los maniquíes
prev
página tres

33333333 333333333 33333333

Ir al índice

Mientras que el código de este ejemplo es largo, no se rompe una gran cantidad de nuevos caminos.

1. Cargar el contenido móvil jQuery.

   Tirar en el CSS necesario y archivos de javascript del sitio jQuery.com.

2. Aplique su propio CSS.

   Incluso si usted es el “préstamo” de código CSS jQuery, todavía estás permite agregar el suyo propio. Puede añadir CSS para hacer que el pie de página y elementos pre actúan de la forma que desee.

3. Construir sus páginas.

   Usted puede construir tantas páginas como desee, pero todos siguen el mismo patrón general de jQuery Mobile: Crear un div página con divs encabezado, contenido, y pie de página. Utilizar el los datos en roles atributo para indicar el papel de cada div.

4. Nombrar cada uno de los divs página de nivel con el carné de identidad atributo.

   Debido a que el usuario estará pasando las páginas, cada página necesita algún tipo de identificador. Dar a cada página de un único carné de identidad atributo.

5. Construir botones dentro de las cabeceras.

   El único verdaderamente nuevo parte de este ejemplo (además de la página de volteo en sí) es los botones en las cabeceras. Vaya directamente a la cabecera de la página 2, y verá algo realmente interesante:

   prev
   página Dos
   siguiente

   Si se define un enlace dentro de un elemento con el datos de cabecera-papel, que enlazan automáticamente se convertirá en un botón. Además, el primero tal enlace definido automáticamente será colocado a la izquierda de la cabecera, y la segunda será colocado a la derecha.

6. Forzar un solo botón a la derecha.

   Si desea que un botón a la derecha, agregar una clase al botón:

   Página uno
   siguiente

7. Utilizar anclajes internos para saltar entre las páginas.

   Echar un vistazo a las direcciones URL de todos los botones. Comienzan con un hash, lo que indica un enlace interno dentro del documento. Recuerde, sin embargo esto se siente como tres páginas diferentes para el usuario, es realmente toda una página web grande.

8. Experimento con transiciones.

   Tome una mirada cuidadosa en el botón en la página tres:

   Ir al índice

   Este botón tiene un especial datos de transición atributo. Por defecto, las páginas móviles intercambian con un fundido. Puede establecer la transición a diapositiva, deslizar hacia arriba, slideDown, popular, descolorarse, o dar la vuelta. También puede invertir la transición mediante la adición de otro atributo: datos de dirección =”inverso”.