Construir un sitio web móvil con jQuery Mobile

jQuery Mobile es un sistema de interfaz de usuario basada en HTML5 táctil optimizada.Está construido sobre la plataforma de jQuery y jQuery UI, y es ideal para el desarrollo móvil rápida.El framework jQuery Mobile utiliza atributos especiales para ayudar a definir y el estilo de sus elementos, sin tener que escribir la clase sus disposiciones de ti mismo.

1. 1
   Vaya a la página principal de jQuery Mobiley haga clic en la pestaña "Descargar" del menú principal de navegación.

   Publicidad

   sido útil esta etapa?Sí |No |Necesito ayuda
2. 2
   de desplazamiento hacia abajo en la página de descarga hasta que vea una Copiar y pegar fragmentos de archivos alojados-CDN sección .

   instagram viewer

   Copiar las líneas de código en su portapapeles.Estos tres archivos de referencia son todo lo que necesita para poner en práctica el marco.

   Publicidad

   sido útil esta etapa?Sí |No |Necesito ayuda
3. 3
   Abrir el software de desarrollo preferido y crear un nuevo documento HTML .

   Si usted no tiene software de desarrollo, abra la aplicación Bloc de notas en el ordenador.

   sido útil esta etapa?Sí |No |Necesito ayuda
4. 4
   Añadir las referencias a su documento HTML .

   Dentro de las etiquetas cabeza , pegar los enlaces a archivos alojados-CDN.

   sido útil esta etapa?Sí |No |Necesito ayuda
5. 5
   Creación de la primera "página" .

   Con el framework jQuery Mobile, crea varias páginas dentro del mismo documento HTML.Dentro de las etiquetas cuerpo , crear un contenedor div.Añadir el atributo data-role , y asignarle un valor de página .Por último, añadir el atributo ID , y asignarle un valor de casa .

   sido útil esta etapa?Sí |No |Necesito ayuda
6. 6
   Añadir la cabecera , contenido y pie de página contenedores div .

   Dentro de su página de contenedor div, crear tres más etiquetas div.Usando el atributo data-role , asignar valores de cabecera , contenido y pie de página, respectivamente.Esta es la estructura básica de una página jQuery Mobile.

   sido útil esta etapa?Sí |No |Necesito ayuda
7. 7
   Agregar encabezado y pie de página títulos.

   Uso del h1 etiqueta de título, crear partidas títulos para sus etiquetas de encabezado y pie de página.

   sido útil esta etapa?Sí |No |Necesito ayuda
8. 8
   Crear una segunda página.

   exterior del contenedor div que tiene su atributo data-role fijado a la página, crear un nuevo contenedor div.Añadir el atributo data-role , y luego ponerlo a la página.Añadir el atributo ID , y luego ponerlo en la página 2. Por último, añadir contenedores div para el encabezado, contenido y pie de página, por lo que la estructura se asemeja a la página principal.

   sido útil esta etapa?Sí |No |Necesito ayuda
9. 9
   Crear una página del menú.

   La página de menú se va a crear en la misma forma que las dos primeras páginas, pero sin un pie de página.Crear un contenedor div, y establezca su atributo data-role a la página.Añadir el atributo ID , y darle un valor de main_nav.

   sido útil esta etapa?Sí |No |Necesito ayuda
10. 10
    Crear la navegación estructura del menú.

    En el interior del contenedor div contenido , crear una lista desordenada.Añadir el atributo data-role , y establecer su valor en vista de lista.Añadir el atributo técnica de inserción, y establezca su valor en true.Dentro de las etiquetas ul de la lista desordenada, añadir dos etiquetas list-item( etiquetas li).

    sido útil esta etapa?Sí |No |Necesito ayuda
11. 11
    Crear la enlaces del menú.

    Dentro de las primeras etiquetas list-item, crear una etiqueta de anclaje.Añadir el atributo href a la etiqueta de anclaje.Utilice el símbolo hashtag para apuntar un atributo ID y, a continuación, escriba "casa".Esto apunta a la "casa" contenedor div.Siga este mismo procedimiento para el segundo elemento de lista, pero esta vez de tipo hashtag "página 2" para apuntar la segunda página.

    sido útil esta etapa?Sí |No |Necesito ayuda
12. 12
    Añadir enlaces a otras páginas de menú .

    Ahora que se crea su menú, es necesario configurar las etiquetas de anclaje en su página de las páginas "2" para acceder a ella "casa" y.Desplazarse hacia arriba y encontrar la sección de cabecera de su página principal.Añadir una etiqueta de anclaje en el interior del contenedor de cabeza, justo antes de la etiqueta h1 .Utilizando el mismo proceso de vinculación como lo hizo con el menú, establezca el atributo href al hashtag "main_nav".Añadir el atributo data-role , y darle un valor de botón.Añadir el icono de datos de atributos , y darle un valor de las barras.Por último, añadir el atributo datos iconpos, y darle un valor de notext.Esto crea un botón a la izquierda de su título de cabecera.Repita este paso para la página page2.

    sido útil esta etapa?Sí |No |Necesito ayuda
    Publicidad

• crear tantas páginas dentro del mismo documento HTML que lo desee.jQuery Mobile utiliza un sistema de navegación AJAX que se activa automáticamente cuando se crea varias páginas dentro del mismo documento.
• Añadir la transición de datos de atributos a los anclajes para apaciguar a una transición visual entre las páginas.Las transiciones disponibles son desvanecimiento, pop, dar la vuelta, a su vez, el flujo, slidefade, diapositivas, y slideUp slideDown.
• Uso del -tema de datos atributo de estilo de casi todos los elementos en su proyecto.De forma predeterminada, jQuery Mobile viene con cinco muestras de color para que usted utilice.El sistema utiliza letras tematización como valores.En consecuencia, el tema de datos de atributos acepta valores de a, b, c, d, e la primera vez que lo descargue.Echa un vistazo a la jQuery Mobile Themeroller para crear un tema personalizado, con un máximo de 26 muestras de color diferentes!
• Use la posición de datos atributo para crear encabezados y pies de página "pegajosos" o fijas para su sitio web.Añadir este atributo a un contenedor div que tiene su data-role conjunto a la cabecera o pie de página, y el valor -posición de los datos a fijo.
• Confirmar el Kit de jQuery Mobile Color para empezar a desarrollar con 26 diferentes muestras temáticas.Advertencias

• Asegúrese de utilizar los comentarios HTML para separar las páginas de jQuery Mobile.Esto le ahorra un montón de tiempo en el camino, como un único documento HTML con múltiples "páginas" obtiene hinchado bastante rápido.

• jQuery Mobile color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Si tiene problemas con cualquiera de estos pasos, preguntarpregunta para obtener más ayuda, o mensaje en la sección de comentarios.