Overhang.js - Un complemento de jQuery para los mensajes de notificación desplegables

Que molestos son los cajas de alerta por defecto de JS? Se sienten como una reliquia de una era primitiva pasada de desarrollo web..

Hoy en día, podemos hacer mensajes de notificación discreta que comparten la misma informacion pero no interrumpas la experiencia de usuario. Y eso es exactamente lo que puedes hacer con voladizo.js.

Este plugin gratuito de jQuery puede agregar barras de notificaciones personalizadas que caen desde la parte superior de la pantalla. Ellos son posicionado vía CSS y animado con JavaScript, para que puedan caer desde un punto fijo en la parte superior independientemente de la longitud de la página.

Puedes construir mensajes que cierre automático después de un cierto tiempo, u otros que requiere la entrada del usuario.

Los mensajes pueden Relé de éxito, falla, error o notificaciones simples Con información sobre el usuario o la página. Los mensajes también pueden tienen sus propios botones si / no para hacer preguntas a los usuarios como una alerta rápida de JavaScript.

Incluso hay una opción para crear mensajes que desplegable con un campo de entrada. Esto sería perfecto para un correo electrónico opt-in form.

Overhang.js soporta todos los principales navegadores soportados por jQuery y es también impulsado por jQuery UI para las características animadas.

Junto con las bibliotecas jQuery y jQuery UI, también necesitarás incluir un archivo CSS personalizado con el plugin. Tu siempre puedes fusiona esto con la hoja de estilo de tu sitio web para reducir las solicitudes HTTP.

Cada llamada hecha al sobresalir() método puede tomar cualquier número de parámetros. Estos son llamado “opciones” y te dan control total sobre cada casilla de notificación.

Puedes cambiar el velocidad de animación, duración, facilitando, y tamaño / color de la caja, junto con otras características de diseño.

Aquí está un fragmento de muestra demostrando cómo crear un cuadro de confirmación:

 // Alguna confirmación $ ("cuerpo"). Voladizo (tipo: "confirmar", yesMessage: "Yes please!", NoMessage: "No thanks."); 

Puedes ver que esto es bastante simple y eso no requiere mucho código jQuery.

A descargar una copia del complemento, puede visitar el repositorio en GitHub, donde también puede navegar directamente a través de los archivos de origen. O, si quieres ver más ejemplos en vivo Dirígete al sitio web Overhang.js.