Pequeña biblioteca JavaScript de notificación personalizada-notificar a

Vista prévia

Descripción

Una biblioteca de JavaScript ligera, independiente y altamente personalizable para generar barras de notificación superior o inferior con diferentes tipos para su sitio web o aplicación Web.

Funcionamiento

Cargue el JavaScript Notify. microlib. js en el archivo HTML.

<script src=src/notify.microlib.js"></script>

Muestra una notificación programada durante 3 segundos.

var notification = Micro.notify({


title: "Timed!",


message: "I'm a timed notification. You only see me for 3 seconds!",


type: "timed",


timeShow: 3000
});

Mostrar una notificación inferior que es descartable y tiene una clase personalizada y se muestra automáticamente.

var notificationTwo = Micro.notify({


title: "Dismissable!",


message: "Dismiss me using the close button on the right. And I show automatically",


type: "dismissible",


position: "bottom",


autoShow: true,


className: "success"
});

Agregue estilos personalizados a las barras de notificación.

.notification {

width: 100%;

height: 50px;

text-align: center;

position: absolute;

left: 0;

line-height: 50px;

background: #e7e7e7;

display: none;
}

.notification.visible { display: block; }

.notification-success {

background: green;

border-color: darkgreen;

color: white;
}

.notification.top {

top: 0;

border-bottom: 1px solid #ccc;
}

.notification.bottom {

bottom: 0;

border-top: 1px solid #ccc;
}

.notification a {

cursor: pointer;

position: absolute;

right: 20px;
}

Todas las opciones de personalización.

// Set the title to a value which can be used in other functions
title: "Timed!",

// Set the message to a value which can be used in other functions
message: "I'm a timed notification. You only see me for 3 seconds!",

// notification type
type: "timed",

// the time the notification is shown
timeShow: 5000,

// the notification position
position: "top",

// auto show the notification
autoShow: true,

// the class name extension
className: "success",

// keep a record of if this notification is visible
visible: false,

// the element we want to manipulate on the page.
 // Created via the createElement function.
notificationElement: ""