Cómo utilizar jQuery para crear una aplicación web basada en dispositivos móviles
En este artículo, Jake Rocheleau nos mostrará cómo utilizar jQuery para crear una aplicación web basada en dispositivos móviles. Durante el proceso de desarrollo, utilizaremos la función de consulta de medios de CSS3 para averiguar la resolución máxima de la pantalla del dispositivo móvil actual y usaremos diferentes CSS según las diferentes resoluciones. Además, Media Queries también puede ayudarnos a ocultar el menú de navegación en pantallas pequeñas para mostrar más contenido. También usaremos jQuery para ayudarnos a usar Ajax.Load() para activar la barra de menú y cargar contenido de página externa.
DEMOSTRACIÓN EN VIVO
CÓDIGO FUENTE
1. Definir el diseño de la página
Primero, necesitamos ver la página HTML y usar CSS. estilos para determinar el estilo de la página. Al principio me saltaré muchas metaetiquetas poco comunes (que no tienen ningún impacto directo en la aplicación web creada). Pero todavía tenemos que prestar atención a algunos fragmentos de código (que enumero a continuación).
lt;meta e al sitio móvil!lt;/h2gt;
lt;/sectiongt;
lt;/divgt;
lt;div id="navmenu"gt;
lt;headergt;
lt;h1gt;Enlaces de menúlt;/h1gt;
lt;/ headergt;
lt;ulgt;
lt;ligt;lt;a rel="external" href="#homepage.html" class="navlink"gt;Homelt;/ agt;lt;/ligt;
lt;ligt;lt;a rel="external" href="#about.html" class="navlink"gt;Acerca de nosotroslt;/agt;lt;/ ligt;
lt;ligt;lt;a rel="external" href="#advertise.html" class="navlink"gt;Advertiselt;/agt;lt;/ligt;
lt;ligt;lt;a rel="external" href="#write.html" class="navlink"gt;Escribir para Uslt;/agt;lt;/ligt;
lt ;ligt;lt;a rel="external" href="#contacts.html" class="navlink"gt;Contactslt;/agt;lt;/ligt;
lt;ligt;lt;a rel="external" href="#privacy.html" class="navlink"gt;Política de Privacidadlt;/agt;lt;/ligt;
lt;/ulgt;
lt;/divgt;
Agregué un signo de almohadilla (#) antes de cada página .html. Cada vez que se hace clic en un enlace, aparece la barra de URL y empuja hacia abajo el contenido principal.
Cuando el ID al que se hace referencia no está sobrecargado, solo podemos recuperarlo a través de JavaScript.
2. Posicionamiento CSS
No hay mucho contenido complicado en nuestro código CSS. La mayor parte del trabajo de posicionamiento se realiza manualmente y luego se entrega a jQuery. Nuevamente, aquí hay algunos fragmentos de código a los que debemos prestar atención.
/** @group core body **/
#w #pagebody {
posición: relativa
izquierda: 0 ;
ancho máximo: 640 px;
ancho mínimo: 320 px;
índice z:
}
#w #navmenu {
fondo: #475566;
altura: 100
pantalla: bloque
posición: fija;
ancho: 300px;
izquierda: 0px;
arriba: 0px; ;
}
El código anterior define los estilos de las dos partes de la página. El ancho del menú de navegación es de 300 px, lo que nos deja un poco de espacio para navegar por el contenido de la página, y los botones de abrir y cerrar menú también están fijos en el lado izquierdo. La parte más importante aquí es el valor del atributo del índice z y la posición del menú de navegación (índice z: 0; posición: fija).
El título de nuestra barra superior también es una parte interesante. Se coloca en una posición fija y se desplazará a medida que se desplaza el contenido de la página. Este efecto está disponible en la mayoría de las aplicaciones de iOS.
/** @group header **/
#w #pagebody header#toolbarnav {
display: block
posición; : fijo;
izquierda: 0px;
arriba: 0px
índice z: 9999
fondo: #0b1851 ('img/tabbar-solid-bg.png') arriba a la izquierda sin repetición;
radio de borde: 5px;
-moz-border-radius: 5px;
p>
-webkit-border-radius: 5px;
-o-border-radius:
borde-inferior-derecho-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius:
borde-abajo; -radio-izquierda: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0; p> alto: 44px ;
ancho: 100;
ancho máximo: 640px
}
#w #encabezado del cuerpo de la página; #toolbarnav h1 {
text-align: center
padding-top: 10px;
padding-right: 40px; color: #e6e8f2;
peso de fuente: negrita
tamaño de fuente: 2,1 em;
sombra de texto: 1px 1px 0px #313131; /p>
}
Reglas de movimiento
Es fácil notar que utilicé una barra horizontal azul en el fondo como barra de título. El tamaño de esta barra de título es 640x44px para que se ajuste al diseño de la página. No solo eso, también diseñé una imagen @2x para la pantalla retina de iPhone/iPad. Puede ver estas imágenes en la imagen de arriba u obtenerlas del CÓDIGO FUENTE.
{System}/demo/img/tabbar-solid-bg@2x.png
{System}/demo/img/tabbar-solid-bg@2x.png p>
/** pantalla retina **/
pantalla solo @media y (-webkit-min-device-pixel-ratio: 2),
solo pantalla y (min--moz-device-pixel-ratio: 1.5),
solo pantalla y (min-device-pixel-ratio: 1.5) {
#w #pagebody encabezado {
fondo: #0b1851 url('img/tabbar-solid-bg@2x.png') arriba a la izquierda sin repetición
tamaño de fondo: 640px 44px; /p >
}
#w #encabezado del cuerpo de la página #menu-btn {
fondo: url('img/nav-btn@2x.png') sin repetición ;
tamaño de fondo: 53px 30px
}
}
Diseño de flecha de menú
En el menú de navegación Por otro lado, diseñé un ícono de flecha que apunta hacia la derecha a la derecha de cada enlace del menú. Creo que a la mayoría de los entusiastas de CSS3 les gustará hacer esto. De hecho, es una buena idea.
Utilizo la variable de transformación para crear un pequeño borde detrás del contenido de navegación, para que podamos moverlo dentro del marco izquierdo. Además, podemos cambiar fácilmente el borde en el estado de desplazamiento. . Lo que es aún más sorprendente es que sólo necesitas usar estilos básicos HTML5 y CSS3 para diseñar estos bordes.
Pero primero tenemos que adentrarnos en el mundo de la codificación JavaScript.
#w #navmenu ul li a::after {
contenido: '';
pantalla: bloque
ancho: 6px;
altura: 6px;
borde derecho: 3px sólido #d0d0d8
borde superior: 3px sólido #d0d0d8; p> posición: absoluta;
derecha: 30px;
arriba:
-webkit-transform: rotar (45deg); p> -moz-transform: rotar(45deg);
-o-transform: rotar(45deg);
transformar: rotar(45deg);
}
#w #navmenu ul li a: hover:: after { border-color: #cad0e6; }
3. Diseño de animación jQuery
Por escrito. Durante estos códigos personalizados, creé un nuevo archivo script.js. Puede escribir etiquetas