Cómo utilizar el componente modal de Bootstrap para personalizar las habilidades de alerta, confirmación y cuadros de diálogo modales_javascript
En este artículo, les presentaré el componente de ventana emergente Modal en Bootstrap. ¡Este componente es simple y fácil de usar, tiene hermosos efectos y es muy práctico!
Debido a que los cuadros de alerta y confirmación proporcionados por el navegador tienen una mala experiencia y el navegador no proporciona una función emergente estándar que muestra HTML personalizado en forma de cuadro de diálogo, muchos proyectos se personalizarán. los componentes del cuadro de diálogo. Este artículo presenta mi experiencia en la personalización de cuadros de diálogo modales, de confirmación y de alerta basados en componentes modales de arranque en el proyecto. Espero que pueda resultarle útil como referencia.
1. Visualización de ejemplo
El código detallado se puede entender descargando el código fuente desde el enlace de descarga que figura arriba. La cantidad de código no es grande. sólo más de 200 líneas
Si tienes experiencia en el desarrollo de componentes de JavaScript, creo que podrás entender mi código a este nivel en poco tiempo. También proporciono una demostración en el código fuente, que simula un escenario más cercano a las necesidades de la vida real:
1) El usuario hace clic en un botón en la interfaz para abrir un cuadro modal previamente definido:< / p>
2) El usuario completa algunos formularios en el cuadro modal abierto. Al hacer clic en Aceptar, se activará alguna verificación:
Cuando el correo electrónico no está completo:
. Complete después de recibir el correo electrónico:
Estas dos indicaciones en realidad están diseñadas para demostrar los efectos de Alerta y Confirmar. De hecho, es posible que no tengan funciones tan incómodas.
3) Cuando se les solicita que la contraseña esté vacía, las personas cuidadosas encontrarán que el botón Aceptar está deshabilitado. Esta consideración se debe a que el botón Aceptar finalmente completa algunas tareas asincrónicas antes de completarse. , Espero que el componente modal no se cierre y que no se pueda hacer clic repetidamente en el botón en el que se hizo clic.
4) Utilicé setTimeout para simular una tarea asincrónica. Esta tarea asincrónica durará 3 segundos después de hacer clic en. El botón Aceptar devolverá la llamada y:
Cuando el correo electrónico se ingrese como admin@admin, se mostrará un mensaje de envío exitoso. Después de la confirmación, se cerrarán todos los cuadros emergentes:
Cuando se ingresa el correo electrónico. En otras ocasiones, se mostrará un mensaje de error de envío y el cuadro modal aún se mostrará allí:
En la definición del componente, especialmente el botón de registro, agregué algunos Procesamiento de programación AOP y, al mismo tiempo, utilicé el objeto de retardo de jquery para implementar la programación asincrónica que necesitaba. Lea el código fuente para obtener más detalles. Si tiene alguna pregunta, puede compartir sus ideas en el área de comentarios.
2. Requisitos del componente
A veces, para escribir un componente útil, sólo es necesario determinar su prototipo aproximado y la interfaz que se proporcionará al exterior, y el componente ya está listo. completado. El trabajo más importante es escribir, aunque todavía no he empezado a codificar. Tomando como ejemplo los componentes que se escribirán en este artículo, los prototipos y los formularios de llamada de los componentes que quiero son los siguientes:
1) Cuadro de alerta personalizado
El prototipo es:
Se requieren hasta dos parámetros al llamar, un mensaje se usa para pasar el contenido del mensaje que se mostrará y uno onOk se usa para manejar la devolución de llamada cuando se hace clic en el botón Aceptar. Hay dos formularios de llamada. :
El primero es el caso en el que no hay devolución de llamada, luego simplemente pase el mensaje directamente. El segundo es el caso en el que hay una devolución de llamada, use el objeto de opciones para pasar los dos parámetros msg y onOks callback. Independientemente de si hay una devolución de llamada onOk o no, el cuadro emergente debe cerrarse cuando se hace clic en el botón.
2) Personalizar el cuadro de confirmación
El prototipo de este cuadro es solo un botón diferente del cuadro de alerta:
Solo hay un formulario de llamada:
onCancel es la devolución de llamada cuando se hace clic en el botón cancelar. Independientemente de si hay devoluciones de llamada onOk y onCancel, el cuadro emergente debe cerrarse cuando se hace clic en el botón. La devolución de llamada onCancel es opcional.
3) Cuadro modal personalizado
Prototipo:
Formulario de llamada:
Diferente de Alerta y Confirmar, dentro de una página Solo una instancia de Alert y Confirm es necesario, pero es posible que se necesiten varias instancias de Modal, por lo que cada objeto Modal debe ser nuevo por separado. Dado que cada Modal tiene diferentes cosas que lograr, entonces:
Se necesita un parámetro de título para establecer el nombre para expresar lo que el Modal está procesando.
El parámetro de contenido representa el html del; Contenido modal;
El parámetro de ancho establece el ancho del modal, y la altura del modal permanece automática.
El parámetro de botones se utiliza para configurar los botones en este modal. , el componente modal solo requiere dos botones (Confirmar y Cancelar), pero hay algunos casos en los que se necesitan varios botones, por lo que la forma de configurar los botones es relativamente flexible. Cada botón está configurado con tres parámetros. La estructura HTML del botón y el selector son convenientes para el registro. La devolución de llamada se maneja mediante la delegación de eventos. La devolución de llamada configura la devolución de llamada cuando se hace clic en el botón.
La devolución de llamada del evento onContentReady puede inicializar activamente algunos componentes de Modal; HTML interno cuando se inicializa Modal; porque la inicialización del componente generalmente solo se realiza una vez, por lo que es más apropiado colocarlo en esta devolución de llamada.
La devolución de llamada onContentChange es útil cuando es necesario usar un Modal en diferentes; escenarios para mostrar diferentes contenidos HTML, pero no es muy fácil de usar, pero la lógica de procesamiento será un poco complicada. Si una instancia de Modal solo hace una cosa, no se utilizará la devolución de llamada onContentChange
<; p>La devolución de llamada onModalShow se usará cada vez que se muestre el Modal y hay muchos escenarios de uso. Por ejemplo, se usa un Modal para completar algún contenido del formulario. Es necesario restablecer el formulario antes de que el usuario pueda utilizarlo. Es más apropiado manejar este tipo de procesamiento en esta devolución de llamada;La devolución de llamada onModalHide es útil, pero no hay muchos escenarios en los que pueda usarse. ser utilizado, por lo que es una interfaz reservada.
4) Otros requisitos
Todos los tipos de cuadros emergentes se crean en forma modal virtual y se agrega una máscara mientras se muestra el cuadro.
Todos; cuadros No es necesario admitir arrastrar y cambiar el tamaño;
Los títulos de los cuadros de diálogo y alerta, la cantidad de botones, las posiciones de los botones y el texto de los botones son todos fijos.
En realidad:
El componente modal de bootstrap ya admite el efecto de enmascaramiento.
Arrastrar y cambiar el tamaño, esta función es la guinda del pastel; software en sí, no necesariamente hay muchos beneficios adicionales, por lo que elijo no realizar este procesamiento redundante;
Las alertas y los cuadros de diálogo no necesitan ser demasiado personalizados, pueden unificar el estilo y cambiar la navegación. Solo usa la experiencia emergente nativa del dispositivo.
5) Ejemplos de llamadas en DEMO
A continuación se muestra cómo llamo a estos componentes durante el uso real después de completar el desarrollo de estos tres componentes:
3. puntos
1) El punto más básico es comprender el código fuente del componente modal de bootstrap:
Método de inicialización: $modal.modal()
Abrir: $modal.modal('show')
Cerrar: $modal.modal(hide)
Eventos: La mayoría de los eventos de los componentes bootstrap con efectos de transición están en pares. y uno es el tiempo presente y el otro es el tiempo perfecto. El componente modal define 2 pares:
show.bs.modal y mostrado.bs.modal, hide.bs.modal y oculto bs. modal.
Estos dos pares de eventos se activan antes y después de que se ejecuten los efectos de transición de apertura y cierre. En términos de los requisitos del componente que quiero definir, necesito dos eventos, show.bs.modal y oculto.bs.modal, al definir el componente. Cuando escucho el componente modal de bootstrap para enviar estos dos eventos, envío. mi propia definición. Eventos de componentes:
modalShow y modalHide.
Opciones:
fondo: si se muestra la máscara;
teclado: si se admite la devolución de llamada del teclado;
mostrar: si el la inicialización se completa. Se mostrará inmediatamente.
Estas tres opciones son todas verdaderas de forma predeterminada, pero cuando definí el componente, las configuré en falso. Las devoluciones de llamada del teclado no se consideran por el momento, por lo que se configuran en verdadero cuando
Por supuesto, el cuadro emergente no se puede mostrar inmediatamente al llamar a la inicialización modal de bootstrap, por lo que no se puede configurar como verdadero. La razón por la que el fondo se configura como falso se presenta en el siguiente punto.
2) Procesamiento de máscara
Si habilita la máscara de arranque, encontrará que cuando haga clic en la parte de la máscara, el cuadro emergente se apagará automáticamente. lo que esperaba. Efecto modal virtual, por lo que el fondo debe configurarse como falso. Pero después de configurar esta opción en falso, surgirá un nuevo problema, es decir, el componente no tendrá efecto de enmascaramiento, por lo que para tener en cuenta estos dos problemas, solo puedo escribir un proceso de enmascaramiento simple:
La razón por la que se introduce la variable de conteo en este código es porque BackDrop es un objeto singleton global. Cuando se llama al método abierto de múltiples instancias modales, se llamará al método show de BackDrop para garantizar que cuando se ejecute. Se llama al método hide de BackDrop, puede asegurarse de ocultar el fondo después de cerrar todas las instancias modales, por lo que se agrega una variable de recuento para registrar cuántas veces se llama al método show de BackDrop solo cuando el recuento es 0, llamando al método backDrop. El método hide en realidad ocultará el BackDrop.
3) Definición del valor predeterminado de las opciones del componente
Configure dos botones predeterminados, Aceptar y Cancelar, a través de los botones, y luego, para simplificar la configuración de devolución de llamada de estos dos botones predeterminados, coloque this Las interfaces de los dos botones se han ampliado aún más al nivel anterior. Se llamará a onOk y onCancel cuando se haga clic en Aceptar y Cancelar respectivamente. Estas dos opciones son devoluciones de llamada completamente funcionales, a diferencia de onContentReady, que es una devolución de llamada de evento. getDefaultBtnCallbackProxy se utiliza para ayudar a registrar onOk y onCancel:
Este interior estará vinculado a la instancia modal.
4) Constructor:
Esto declara principalmente algunas variables de instancia utilizadas.
5) Métodos y funciones clave del prototipo
Este es un método prototipo y la inicialización del componente también se ejecuta cuando se llama a este método (inicialización retrasada).
Esta es una función utilizada para inicializar componentes. Entre ellos:
setTitle es un método prototipo, utilizado para establecer el título del modal;
setContent es un método prototipo, utilizado para establecer el contenido html del modal; p>
addButtons es un método prototipo, utilizado para registrar botones;
setWidth es un método prototipo, utilizado para establecer el ancho del modal;
bindHandler es una función, se utiliza para registrar los eventos del modal;
El penúltimo paso llama a $modal.modal() para inicializar el componente modal de bootstrap;
El último paso activa el evento contentReady.
Código fuente de bindHandler:
Para facilitar su uso, vinculé el contexto de las devoluciones de llamada de onContentChange a la instancia modal actual. Los dos últimos detectores de eventos encapsulan los eventos de arranque en los eventos modales que definí.
Código fuente de addButtons:
Como se puede ver en este código:
Cuando se hace clic en el botón, el botón se desactivará;
Cuando el botón devuelve falso, el botón se restaura, pero el modal no se cerrará, lo que indica que algunas operaciones actuales están bloqueadas por el código;
Cuando el botón devuelve un objeto retrasado, lo hará espere hasta que el objeto retrasado El botón se restaurará cuando se complete y el modal solo se cerrará cuando se resuelva el objeto retrasado;
De lo contrario, el botón se restaurará y el modal se cerrará activamente.
En este código, consideramos:
Prevención de clics repetidos en botones, cierre automático de modal y procesamiento de tareas asincrónicas.
6) Encapsular Alert y Confirm
Alert y Confirm son en realidad un modal especial. Además, estos dos componentes también pueden usar un modal. Después de comprender estos conceptos básicos, el componente puede ser. definido así:
En este código:
En primer lugar, se considera la inicialización retrasada del componente modal global;
Debido a los dos onModalHide y onModalShow Las devoluciones de llamada son devoluciones de llamadas de eventos. Los parámetros pasados a través de las opciones al inicializar el componente no se pueden cambiar modificando las opciones. Solo se pueden procesar volviendo a registrar OnOk y onCancel son devoluciones de llamada de funciones. se puede cambiar a través de la devolución de llamada;
Teniendo en cuenta la longitud del contenido de Alerta y Confirmar, se agrega un nuevo parámetro ancho para ajustar el ancho del cuadro.
4. Resumen
Este artículo presenta algunos de mis métodos y prácticas en el proceso de definición de componentes js. Hay demasiados códigos y no es fácil despertar el interés de la gente en leer. Sin embargo, el método presentado en el artículo es relativamente simple y he utilizado estos tres componentes en varios proyectos. Desde el punto de vista actual, puede resolver todos mis requisitos emergentes, por lo que lo recomiendo con la esperanza de hacerlo. ayudar a las personas necesitadas.