Puedes construir algunas cosas realmente buenas usando jQuery. El último paquete de lanzamiento actualiza muchos errores e incluso insinúa el soporte para un nuevo jQuery Mobile. Con los scripts frontend puedes construir prácticamente cualquier tipo de aplicación web. Pero más específicamente, estaremos estudiando la construcción de una pequeña ventana de caja modal.
He diseñado la funcionalidad para parecer y ser una solución de mensajería privada. Esto es perfecto para implementar en una página de perfil de usuario o página de autor en un blog. Utilizaremos algunas técnicas prácticas de CSS3 junto con la codificación de la estructura de la página en HTML5. No es necesario ser un maestro de jQuery para entender este tutorial, pero no estaría de más en repasar los conceptos básicos. Vea mi ejemplo de demostración en vivo y descargue el código fuente del proyecto a continuación.
Pruébalo
Ver demostración en vivo - Descargar fuente
La estructura HTML
Antes de adentrarnos en jQuery, examinemos un poco del HTML primero. Si está interesado en examinar todo el diseño del documento, le sugiero que lo descargue del código fuente. Pero me gustaría centrarme en el código HTML del cuadro modal para una explicación más detallada.
Divido la plantilla utilizando HTML5 .containmsg que contiene nuestro cuadro modal y botón para mostrar / ocultar el contenido. El contenedor modal usa la clase. .mainCompose. Este es también nuestro objetivo en jQuery: veamos el código HTML para esto a continuación.
** Introduzca algún texto!
Enviar mensaje
Dentro de nuestro elemento de forma no hay sorpresas. Un pequeño campo de etiqueta y mensaje de entrada. También un campo a: con un enlace a la página del usuario. En esta demostración enlazé a mi página de autor de DesignShack. Aunque no es obligatorio. Incluso podría eliminar el enlace por completo y aún así mantener los estilos CSS intactos. La lista de usuarios está codificada como un elemento UL para que pueda admitir mensajes a más de una persona.
Ahora, antes de sumergirnos en jQuery, hay una técnica más que quería cubrir. Si hace clic en el icono de redacción, notará que nuestro cuadro modal tiene una pequeña punta triangular en la parte superior. Podría usar imágenes para esta técnica, pero hay una alternativa más simple utilizando estrictamente CSS.
Cool CSS Tooltip Triangles
Hay un pequeño div que aparece directamente sobre el formulario del mensaje. Esto contiene dos clases etiquetadas calloutUp y calloutUp2. El primero se comporta como una continuación de nuestro borde exterior (el bronceado más oscuro), mientras que el segundo se conecta con el centro de nuestra área de formulario. Usando ambos podemos crear triángulos coincidentes en un conector de estilo de información sobre herramientas.
Esto funciona debido a una configuración en CSS que hace que todos los bordes se junten en el centro como un triángulo. Por lo tanto, podemos configurar estos dos divs para que no tengan altura ni ancho, sino bordes masivos. Si solo le damos color a uno de los bordes y el resto es transparente, creamos el efecto triángulo que se ve aquí. Echa un vistazo a las clases de CSS para las dos llamadas.
También estoy configurando los detalles de los bordes circundantes porque esto mantiene el bloque div mirando cuadrado. De lo contrario, nuestra forma se volvería rectangular, y luego nuestros triángulos saldrían inclinados con bordes irregulares. los índice z la propiedad también es importante para que nuestra punta interior se mantenga por encima de la punta exterior. Los otros estilos se utilizan para maquillar nuestras fuentes en el ejemplo de demostración, sin duda nada extraordinario.
Desarrollando interacciones con jQuery
¡Ahora podemos adentrarnos en lo bueno! Si ha usado jQuery antes, es probable que esté familiarizado con el inicio de un nuevo documento. Primero incluye la última versión de jQuery en tu página. Si no desea descargar y alojar el archivo usted mismo, Google ofrece todas las versiones de jQuery live para desarrolladores. Lo último que estoy usando es la librería 1.6.2 mini.
Una vez que esté incluido, debe abrir otra etiqueta de script para JavaScripting. Decidí escribir mi código dentro del bloque de encabezado de la misma página HTML. Pero alternativamente, puede mover esto al cuerpo, pie de página o incluso a un archivo externo. Los primeros fragmentos de código que he añadido a continuación.
Llamamos a nuestro $ (documento) .ready () Función para detener cualquier acción hasta que la página termine de cargarse. La primera tarea es ocultar elementos de 3 páginas de inmediato. Estos son .mainCompose para ocultar nuestra caja modal, .cargador para ocultar el gif de carga de ajax, y #errortxt que solo se muestra si el usuario no ha ingresado nada e intenta enviar el formulario. Cada uno de estos elementos solo se mostrará bajo ciertas condiciones, por lo que es mejor mantenerlos ocultos de inmediato.
Y, finalmente, nuestra primera acción de scripting es buscar un controlador de eventos de clic. los .componer La clase está realmente vinculada a nuestra imagen de composición, aunque no hay un enlace de anclaje para hacer clic. jQuery puede manejar los eventos de clic y llamar a slideToggle () de cualquier manera. Ahora, el último fragmento de código para examinar es cómo podemos extraer datos de la entrada del usuario.
Procesando la forma modal
Solo estamos buscando un controlador de eventos final más. Esto está ligado al evento clic de nuestro .sendbtn, que en realidad está vinculado a un enlace de anclaje en nuestro cuadro modal.Justo al lado está nuestra imagen animada ajax .gif que se ocultó justo después de cargar la página.
La función de ejecución justo después de hacer clic en nuestro botón ahora tiene un parámetro. función (e) simplemente pasa la instancia de nuestro evento clic directamente a la función como una variable. Usamos este selector de eventos para llamar al método preventDefault () para que nuestro enlace no se comporte como un enlace. También ocultamos inmediatamente el archivo .sendbtn y lo reemplazamos con nuestra imagen .loader.
Luego pasamos a una cláusula estándar if / else que verifica la #mymsg valor textarea. Si esto no contiene texto, entonces sabemos que el usuario no ha ingresado nada. En este caso, mostramos nuestro mensaje de error y volvemos a ocultar la imagen de carga mientras volvemos a mostrar nuestro botón. De lo contrario entramos en el else {} Cláusula que asume que podemos enviar el mensaje!
No he escrito ningún código Ajax / PHP ya que salta fuera del alcance de este tutorial. Pero debe revisar la función jQuery ajax () que puede acelerar el desarrollo de back-end diez veces. He dejado de lado una variable formQueryString que se puede utilizar para pasar los datos del formulario a una llamada Ajax. En su lugar, estaré terminando la estética en una pequeña función. finalSend ();
Lo que queremos hacer ahora es cerrar nuestro cuadro modal y mostrar un pequeño ícono de verificación para que el usuario sepa que todo está bien y elegante. He usado .delay () para mantener abierto el cuadro modal durante 1 segundo antes de llamar a nuestro método final de SlideToggle (). Esto se agregó únicamente para las apariencias en este tutorial para que pueda ver cómo se ve a la espera de que se cargue el servidor. Si desea mantener a sus usuarios esperando un segundo extra, puede dejar esto, pero de lo contrario no sirve para nada.
Después de la animación de diapositivas he añadido una función de devolución de llamada. Solo incluye 2 líneas de código básico. Primero nos dirigimos al icono de redacción y cambiamos su clase de .componer a .expedido, luego esconderlo de la vista. Finalmente nos dirigimos #composebtn que es el div contenedor de nuestro icono y agrega un nuevo icono de marca de verificación. ¡Ahora nuestros usuarios saben que el mensaje fue enviado y apenas hemos usado ninguna propiedad de pantalla!
Ver demostración en vivo - Descargar fuente
Conclusión
Este tutorial debería haberte puesto un poco más cómodo al crear un cuadro modal escalable en jQuery. Hemos creado algunos estilos CSS excelentes y hemos utilizado algunos procesos básicos de formularios para mejorar la interacción del usuario. Sin duda hay muchas cosas que puede agregar, pero nuestro ejemplo establece la estructura del terreno y allana el camino para mayores posibilidades.
Si aún desea ver mi demostración o descargar el código fuente, puede hacerlo a continuación. Leer código puede ser confuso después de largos periodos de tiempo, por lo que recomiendo descargar la fuente directamente para tener una mejor idea de cómo funciona esta pequeña aplicación. Del mismo modo, si tiene preguntas o ideas, puede ofrecerlas en el área de discusión.