Complemento de notificación de estilo de alerta y Growl simple para JavaScript-notie. js

Vista prévia

Descripción

notie. js es una biblioteca de JavaScript puro que facilita la creación de ventanas emergentes de notificación con estilo plano y responsivo con diferentes tipos en la Página Web.

¿Cómo funciona?

Descargue y cargue el archivo de JavaScript notie. js en el documento HTML.

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

Crear una notificación ' Success ' que se desestimará automáticamente después de 2 segundos.

notie.alert(1, 'Success!', 2);

Cree una notificación de advertencia que se desestimará automáticamente después de 3 segundos.

notie.alert(2, 'Success!', 3);

Crear una notificación de ' error ' que se desestimará automáticamente después de 5 segundos.

notie.alert(3, 'Success!', 5);

Crear una notificación de "información" que se desestimará automáticamente después de 10 segundos.

notie.alert(4, 'Success!', 10);

Cree un diálogo de confirmación con los botones sí/no y la función de devolución de llamada personalizada.

notie.confirm('Are you sure?', 'Yes', 'Cancel', function() {

notie.alert(1, 'Good choice!', 2);
});

Todas las opciones posibles para personalizar el plugin.

notie.setOptions({

alertTime: 3,

dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

overlayClickDismiss: true,

overlayOpacity: 0.75,

transitionCurve: 'ease',

transitionDuration: 0.3,

transitionSelector: 'all',

classes: {


container: 'notie-container',


textbox: 'notie-textbox',


textboxInner: 'notie-textbox-inner',


button: 'notie-button',


element: 'notie-element',


elementHalf: 'notie-element-half',


elementThird: 'notie-element-third',


overlay: 'notie-overlay',


backgroundSuccess: 'notie-background-success',


backgroundWarning: 'notie-background-warning',


backgroundError: 'notie-background-error',


backgroundInfo: 'notie-background-info',


backgroundNeutral: 'notie-background-neutral',


backgroundOverlay: 'notie-background-overlay',


alert: 'notie-alert',


inputField: 'notie-input-field',


selectChoiceRepeated: 'notie-select-choice-repeated',


dateSelectorInner: 'notie-date-selector-inner',


dateSelectorUp: 'notie-date-selector-up'

},

ids: {


overlay: 'notie-overlay'

},

positions: {


alert: positions.top,


force: positions.top,


confirm: positions.top,


input: positions.top,


select: positions.bottom,


date: positions.top

}
})

Registro de cambios

v4.3.1 (08/03/2018)

• actualizar