Clean Growl notificación JavaScript Library-notificationJS

Tiempo de ejecución: 30 minutos. Empezar

Autor: onmax
Views Total: 699
Sitio oficial: Ir a la web
Actualizado: July 25, 2018
Licencia: MIT

Vista prévia

Clean Growl notificación JavaScript Library-notificationJS

Descripción

notificationJS es una biblioteca de JavaScript ligera y sin dependencia (jQuery) para mostrar popups de notificación de estilo de Growl bastante limpios en la aplicación Web.

La biblioteca de notificaciones actualmente viene con 3 estilos: info, error y OK.

Puede especificar el tiempo de espera para determinar si se desestiman automáticamente los popups de notificación.

Funcionamiento

Inserte el archivo JavaScript principal notificationJS. js en el documento.

<script src="notificationJS.js"></script>

Cree una nueva ventana emergente de notificación como esta:

newNotification({

"title":"This is just info",











 "status":"info",













"description":"Small description about the notification"
})

Aplique sus propios estilos CSS a la ventana emergente de notificación.

.notification-panel {

position: fixed;

bottom: 25px;

right: 25px;
}

.notification-panel__item {

display: flex;

align-items: center;

justify-content: space-between;
}

.notification__ok { border-top: 5px solid #27ae60 !important; }

.notification__error { border-top: 5px solid #c0392b !important; }

.notification__title {

text-transform: uppercase;

font-size: 14px;

font-weight: 600;
}

.notification__description {

font-size: 14px;

margin-top: 5px;
}

.notification__link { font-weight: 600; }

.notification-right {

margin-left: 15px;

cursor: pointer;
}

.notification_icon { width: 10px; }

Más opciones de configuración.

newNotification({

"status": "info", // or 'ok', 'error'

"time": 5, // auto close after 5 seoncs

























 "hide": true, // auto hides after a timeout
























 "animation_duration": 0.2,


















 "showCloseIcon": true,



















 "newestOnTop": true,




















 "debug": true


})

Registro de cambios

07/25/2018

  • Bugfix

Te puede interesar: