Biblioteca de notificaciones Growl rica en características-MsgPop

Vista prévia

Descripción

MsgPop es un plugin de notificación de JavaScript simple y de dependencia cero que le permite mostrar mensajes de estilo Growl agradables, limpios y personalizables en la pantalla.

Funcionamiento

Incluye los archivos del MsgPop junto con la fuente icónica Font awesome en la Página Web.

// CSS Files
<link href="/path/to/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/msgPop.css">

// JS Files
<script src="js/msgPop.js"></script>

El código JavaScript para mostrar un mensaje de notificación "Success" básico en la pantalla.

MsgPop.open({

Type:"success",

Content:"Your content here!"
});

Configuración global.

// toggle full screen messages or small
MsgPop.displaySmall = true;

// "top-left", "top-right", "bottom-left" or "bottom-right"
MsgPop.position = "top-right";

// number of messages to display before showing the "Load More" button
MsgPop.limit = 4

// number of milliseconds all animated effects take to complete
effectSpeed = 350

Configuración de mensajes y funciones de devolución de llamada.

MsgPop.open({


// (message : success : error : warning)

Type: "message",






// (force : auto) -- force: user will have to click to close

AutoClose: true,







//
only applies to auto. Sets the timer in milliseconds before box closes

CloseTimer: 7000,






 // (true : false) -- true: user clicks anywhere on message to close -- false: user must click "X" to close

ClickAnyClose: true,






// (true : false) -- show / hide close button

HideCloseBtn: false,






// Fires when the message has fully opened

BeforeOpen: null,



 // Fires when the message begins opening

AfterOpen: null,



// Fires when the message begins to close

BeforeClose: null,






// Fires when the message has closed

AfterClose: null,






 // Show / Hide icon next to message

 ShowIcon: true,






 // Sets message ID for this specific call

MsgID: msgPopMessageID,





 // Adds additional css classes to the message

CssClass: "",






 // Default Icon

Icon: null








});