Sencilla solución de notificaciones de JavaScript ligero

Vista prévia

Descripción

Un plugin de JavaScript ligero y fácil de usar para crear mensajes de notificación temporales o permanentes deslizándose desde el lado derecho de la Página Web.

Funcionamiento

Instale & descargar la biblioteca con NPM:

# NPM
$ npm install simple-notifications-solution --save

Importe los archivos JavaScript y CSS necesarios en la página.

<link rel="stylesheet" href="/path/to/Notifications.css">
<script src="/path/to/Notifications.js"></script>

Cree un nuevo objeto de notificaciones e inicialice la biblioteca de notificaciones.

var notifications = new Notifications(".notification");
notifications.init();

Cree un mensaje de notificación permanente que siempre permanezca en la pantalla hasta que haga clic en el botón Cerrar.

<p class="notification">

This is a notification

<button class="delete" type="button">Close</button>
</p>

Cree un mensaje de notificación temporal parecido a un brindis que se desestimará automáticamente después de un tiempo de espera.

<p class="notification" data-close="self">

This is a toast notification
</p>

Opciones predeterminadas para personalizar los mensajes de notificación.

notifications.init({


// animation

animationInName: 'slidein',

animationOutSelf: 'slideout 1s',

animationOutClose: 'fadeout 1s',


// selector of close button

closeButtonSelector: '.delete',


// click to close

closeSelfOnClick: true,


// start top position

startTopPosition: 8,


// space between messages

gap: 8,


// delay in milliseconds

delayFunction: function delayFunction(i) {



return 3 + 2 * i;

},


// top transition

topTransition: 'top .75s ease-in-out'


});

Registro de cambios

10/07/2018

• agregar la opción startTopPosition