En varios procesos de desarrollo web, el procesamiento de cuadros de diálogo y cuadros de solicitud es una tecnología de procesamiento de interfaz muy común. Si se usa bien, puede dar a los usuarios una buena experiencia de página. Lo mismo es cierto para el desarrollo de bootstrap. A menudo usamos capas de cuadro de diálogo emergente para mostrar datos en interfaces como agregar, editar y ver detalles. Al eliminar, se puede usar un cuadro de confirmación de inmediato. Si la operación es exitosa, podemos usar un cuadro de solicitud más rico para manejarla. Este artículo compara principalmente estos puntos técnicos utilizados en el desarrollo de Bootstrap.
1. Uso del cuadro de diálogo Bootstrap
La bootstrap regular tiene varios tamaños de cuadros de diálogo, incluidos pequeños cuadros de diálogo con estado predeterminado, cuadros de diálogo de ancho medio y cuadros de diálogo de tamaño completo. La interfaz del cuadro de diálogo de Bootstrap es muy amigable. Cuando usamos la tecla ESC o hacemos clic en otros espacios en blanco con el mouse, el cuadro de diálogo se ocultará automáticamente.
Sus definiciones son simplemente diferentes, como la siguiente es el código de interfaz de diálogo pequeño predeterminado:
<! ----------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- data-toggle = "Validator" enctype = "multipart/form-data"> <div> <div> <div> <div> <div> <label> id id </etlabe> <div> <select id = "pid" name = "pid" type = "text" placeholder = "id ..."> "> </elect> </div> </div> </div> </div> <div> <div <d <iv> <div <viv> <div <biv> nombre id = "name" name = "name" type = "text" placeHolder = "name ..."/> </div> </div> </div> <div> <diM> type = "Hidden" id = "id" name = "id"/> <button type = "enviar"> confirmar </button> <button type = "button" data-dismiss = "modal"> cancelar </botón> </div> </form> </div> </div> </div> </div>
La interfaz aproximada es la siguiente:
Preste atención al código de estilo de diálogo en el código anterior, de la siguiente manera:
<div>
Si se trata de una base de datos de los otros dos tamaños, solo necesita modificarla aquí. Los dos códigos que se muestran a continuación son:
<div>
así como
<div>
Podemos decidir qué tamaño de definición de la capa de diálogo adoptar en función del diseño de los elementos de la interfaz, pero los métodos de llamadas de estos cuadros de diálogo son consistentes.
La interfaz del cuadro de diálogo es la siguiente:
// show puede seleccionar el cliente $ ("#btnselectcustomer"). Show ();La interfaz del cuadro de diálogo de cierre es la siguiente:
$ ("#add"). modal ("escondite");En términos generales, el cuadro de diálogo que aparecemos es un formulario que puede realizar operaciones de envío similar al guardar datos. Por lo tanto, es necesario verificar los datos del formulario. Si hay un error, es posible que necesitemos recordarlo en la interfaz. Por lo tanto, cuando la página se inicializa, las reglas de verificación del formulario deben inicializarse. A continuación se presentan nuestras operaciones de inicialización de forma regular.
// Bind Function de evento relacionado BindEvent () {// juzga si la información del formulario pasa la verificación $ ("#ffadd"). Validate ({meta: "validate", ErrorElement: 'span', errorclass: 'holy-blok-blok-bloock-marror', focusInValid: false, destacado: function (elemento) {$ (elemento) .cloSest ('. Form-Greup'). }, Success: Function (Labor) {Label.Closest ('. Form-Group'). }, submithandler: function (form) {$ ("#add"). modal ("escondite"); Retrato $ ('#File-Portrait'). FileInput ('cargar'); administrador para manejarlo. ");});}}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}Pero en general, estos códigos se repetirán mucho, por lo que podemos encapsular las funciones y reutilizar algún código para usar un código de procesamiento más simple, pero también podemos lograr el objetivo.
// Bind Function de eventos relacionados BindEvent () {// Agregar y editar registros formvalidate ("ffadd", function (form) {$ ("#add"). Modal ("hide"); // Enviar parámetros de construcción a la varilla de fondo = $ ("#ffadd"). SerializizArray (); $ .post (url, postdata, function (json) $ .ParseJSON (JSON); para manejarlo. ");});}); }); }2. El procesamiento del cuadro de diálogo de confirmación de confirmación
1) Uso del complemento Bootbox
Además del cuadro de diálogo regular anterior, a menudo encontramos un cuadro de diálogo Confirmación concisa. Aunque el código anterior también se puede usar para crear un cuadro de diálogo de confirmación, no es necesario ser tan problemático en general. Puede usar el cuadro de diálogo de confirmación del bootbox complementario para manejarlo.
Bootbox.js es una pequeña biblioteca de JavaScript que lo ayuda a crear rápidamente un cuadro de diálogo cuando usa el marco Bootstrap, y también puede ayudarlo a crear, administrar o eliminar los elementos DOM requeridos o los manejadores de eventos JS.
Bootbox.js utiliza tres métodos para diseñar imitar a su JavaScript nativo algunos métodos. Su firma de método exacto es flexible para que cada uno de ellos tome varios parámetros para personalizar la etiqueta y especificar los valores predeterminados, pero a menudo se denominan los mismos:
bootbox.alert (mensaje, devolución de llamada)
bootbox.prompt (mensaje, devolución de llamada)
bootbox.confirm (mensaje, devolución de llamada)
Los únicos parámetros requeridos son alerta es el mensaje; Se requiere devolución de llamada para confirmar y solicitar llamadas para determinar la respuesta del usuario. Incluso cuando llame a la devolución de llamada de alarma se determina cuando el usuario rechaza el cuadro de diálogo porque nuestro método de envoltura no puede bloquear como su idioma nativo es útil: son asíncronos en lugar de sincrónicos.
Estos tres métodos llaman a una cuarta parte de un método público, que también puede crear utilizando su propio diálogo personalizado:
bootbox.dialog (opciones)
Para obtener más documentación de ayuda de API, consulte: http://bootboxjs.com/documentation.html
Alerta
bootbox.alert ("¡Hello World!", Function () {Ejemplo.Show ("Hello World Callback");});Confirmar
bootbox.confirm ("¿Estás seguro?", Función (resultado) {Ejemplo.Show ("Confirmar resultado:"+resultado);});O código:
bootbox.confirm ("¿Está seguro de que elimina el registro seleccionado?", function (resultado) {if (resultado) {// finalmente elimina el último coma, ids = id.substring (0, id.length - 1); // luego envíe la información de solicitud asynchronous a la base de deleto para los datos de datos = {{IDS: IDS}; $. (JSON) {var data = $ .Parsejson (json); }});Inmediato
bootbox.prompt ("¿Cuál es su nombre?", function (resultado) {if (resultado === null) {ejemplo.show ("indicado despedido");} else {ejemplo.show ("hi <b>"+resultado+"</b>");}});Diálogo personalizado
El efecto de usar el código y la interfaz es el siguiente:
bootbox.dialog (...)
[2)
2) Uso del complemento Sweetalert
Aunque el efecto anterior es muy consistente con el estilo de Bootstrap, la interfaz es un poco monótona. El efecto anterior no es lo que me gusta mucho, encontré un efecto que se ve más hermoso, como se muestra a continuación.
Este efecto se implementa introduciendo el complemento Sweetalert (http://t4t5.github.io/sweetalert/).
Swal ({Título: "Operación Solicitud", Texto: Newtips, Tipo: "Advertencia", showCancelButton: true, confirmarButtonColor: "#dd6b55", cancelButTontext: "cancel", confirmarTontext: "Sí, Execute Delete!", CloseonConfirm: true}, function () {delfunction ();});El código de implementación con efectos de interfaz similares anteriores es el siguiente:
En general, su código emergente se puede hacer muy simple, como se muestra a continuación.
3. Procesamiento del cuadro de inmediato de información
El procesamiento de dos anterior se implementa utilizando cuadros de diálogo emergente y bloquea la interfaz. En general, hacemos indicaciones de información, con la esperanza de que no afecte nuestras operaciones adicionales, o al menos proporcione un efecto de desaparición automática muy corto.
Así que aquí presentaremos el complemento JNotify y el complemento Toast.
1) Uso del cuadro de inmediato de JNotify
JNOTIFY CUERRO DE ADMINISTRO, un excelente complemento de cuadro de solicitud de resultados jQuery. Después de enviar el formulario, respondemos a los antecedentes a través de AJAX y devolvemos los resultados y mostramos la información de retorno en primer plano. JNotify puede mostrar la información del resultado de la operación con mucha elegancia. JNotify es un complemento de solicitud de información basado en jQuery, que admite tres métodos indicadores de información: éxito de operación, falla de operación y recordatorio de operación. El navegador JNotify tiene muy buena compatibilidad, admite cambiar el contenido de inmediato, admite posicionar la ubicación de los cuadros de solicitud y puede configurar los parámetros de complemento.
jsuccess (mensaje, {opción}); jerror ("la operación falló, ¡inténtelo de nuevo!"); jnotify ("NOTA: ¡Mejore su información personal <strong>! </strong>");Configuración detallada de los parámetros JNotify:
autohide: true, // si ocultar automáticamente la barra de inmediato, la barra de clicslay: false, // si hacer clic en la capa de máscara para cerrar la barra de inmediato Minwidth: 200, // ancho mínimo TimeShown: 1500, // Mostrar tiempo: MilliseConds showtimeefect: 200, // tiempo para mostrar en la página: MilliseConds HidetItefectefect: 200, 200, // tiempo de desaparición de la página Millis a la página Millis. 15, // Displacement when the prompt bar is displayed and hidden HorizontalPosition : "right", // Horizontal Position: left, center, rightVerticalPosition : "bottom", // Vertical Position: top, center, bottomShowOverlay : true, // Whether to display the mask layer ColorOverlay : "#000", // Set the color of the mask layer OpacityOverlay : 0.3, // Set the transparency of the mask layer OnClosed: fn // Después de cerrar el cuadro de solicitud, ejecute la función, puede llamar a otros jnotify nuevamente. Como se mencionó anteriormente, las tres llamadas se llaman en secuencia.
A continuación se muestra el método público que encapsulé en la clase de script para lograr la visualización de efectos rápidos.
// Mostrar error o mensaje de inmediato (requiere JNotify Relacionado archivo) Función showror (Tips, TimeShown, AutoHide) {Jerror (TIPS, {AutoHide: AutoHide || True, // agregado en v2.0 Timeshown: TimeShown || 1500, Horizontalposition: 'Center', verticalPosition: 'superior', showOverlay: verdadero, verdadero: '####~ ~ ~ 000 000 000 () {// agregado en v2.0 // alerta ('Jnofity está completado!'); 'top', showOverlay: true, coloroverlay: '#000', onCompleted: function () {// agregado en v2.0 // alerta ('Jnofity está completado!');De esta manera, cuando usamos el método de publicación de AJAX, podemos solicitar de acuerdo con las diferentes necesidades.
var postdata = $ ("#ffadd"). SerializeArray (); $ .post (url, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {// Agregue el procesamiento de carga de retrato $ ('#file-Portrait'). FileInput ('upload'); // Guardar con éxito 1. Cerrar la capa emergente, 2. Datos de la tabla ShowTips ("Save Success Successty";); showror ("Guardar fallido:" + data.errormessage, 3000);2) Uso del complemento Toastr
Toastr es una biblioteca de JavaScript para crear recordatorios de mensajes de página de estilo GNOME/Growl de estilo Growl. , Toastr puede establecer cuatro modos de notificación: éxito, error, advertencia y aviso. La ubicación de la ventana rápida y los efectos de animación se pueden establecer por número de energía. En el sitio web oficial, puede seleccionar parámetros para generar JS, lo cual es muy conveniente de usar.
La dirección del complemento es: http://codeseven.github.io/toastr/
Puede crear los siguientes efectos: advertencia, peligro, éxito, información rápida del diálogo, el efecto es el siguiente.
Su código de uso JS se muestra a continuación.
// Muestra una advertencia, sin título Toastr.Warning ('Mi nombre es Inigo Montoya. ¡Matiste a mi padre, prepárate para morir!') // Muestra un éxito, el título Toastr.success ('¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¿¡¡¡ toastr.clear ()La definición de parámetros de este complemento es la siguiente.
// Configuración de parámetros, si se usa el valor predeterminado, la siguiente generación de toastr.options = {"CloseButton": false, // si debe mostrar el botón Cerrar "Debug": falso, // si se utiliza el modo de depuración "PositionClass": "Toast-Top-fullwidth", // La posición de la ventana emergente "showDuration": "300", // el tiempo de la animación ". // El tiempo de animación desaparece "Tiempo de espera": "5000", // El tiempo de visualización "ExtendedTimeOut": "1000", // Extended Display Time "ShoweSing": "Swing", // El método de almacenamiento de buffer de animación durante la pantalla "HideEsing": "Lineal", // Método de almacenamiento de animación cuando desaparece "Showmethod": "Fadein Method de Animation Method cuando se exhibe cuando se exhibe" Hidemetemethod ":" Hedemetem ":" Hidemet ":" Hidemet ":" Hidem " método al desaparecer}; // El éxito solicita que vincule $ ("#éxito"). Click (function () {toastr.success ("Felicitaciones por su éxito");})Lo anterior es mi resumen de mi experiencia en procesamiento y optimización de cuadros de diálogo y cuadros de inmediato en el proyecto. Espero que sea útil para todos aprender y mejorar la interfaz web. Si desea saber más información, ¡preste atención al sitio web de Wulin.com!