Biblioteca de diálogo de propósito múltiple en JavaScript (ES 6)-Dialog. js

Vista prévia

Descripción

Dialog. js es un plugin de JavaScript puro para crear cuadros de diálogo modernos, fáciles de estilo usando HTML < diálogo > elemento .

Funcionamiento

Incluya el núcleo JavaScript y la hoja de estilo en la página.

<link rel="stylesheet" href="css/dialog.css">
<script type="text/javascript" src="js/dialog.js"></script>

Incluya el cuadro de diálogo polyfill para Edge y Firefox.

<script type="text/javascript" src="js/dialog-polyfill.js"></script>

Crear un diálogo de alerta.

Dialog.alert('Hello Dialog!');

Con un título personalizado.

Dialog.alert('Hello Caption', 'Caption');

Cree un diálogo de confirmación.

Dialog.confirm('Are you sure to leave', 'Question', (dlg) => {

alert('Bye!');

dlg.close();
}, (dlg) => {

alert('Thank you!');

dlg.close();
});

Cree un cuadro de diálogo con la plantilla personalizada. Ideal para diálogo rápido.

let dlg = Dialog.template(document.getElementById('tpl'), 'Use template');
dlg.beforeClosing(() => {


let name = dlg.content.querySelector('.name').value;


const require = 'nemo';


if (name != require) {




alert('You must input nemo');




return false;


} else {




return true;


}
}).closed(() => { alert('Close'); })
.cancelable = false;

Cree un diálogo de iframe.

Dialog.iframe('example.html', 'Dialog Title', '360px', '440px');

Personalice el diálogo con las siguientes opciones.

let dlg = new Dialog({

caption: 'User define dialog',

message: 'You can click [Abort] to exit.',

showClose: false,

buttons: Dialog.buttons.ABORT_RETRY_IGNORE,


cancelable: false,



abortHandler: (dlg) => { dlg.close(); },

retryHandler: () => { alert('retry...'); },

ignoreHandler: () => { alert('ignore'); },
});

Personaliza los estilos del diálogo.

.dlg-dialog {

border: none;

box-shadow: 10px 10px 20px gray;
}

.dlg-header {

background-color: #555;

color: white;
}

.dlg-caption {

height: 1.17em;

text-shadow: 1px 1px 1px black;
}

.dlg-close-button::before,
.dlg-close-button::after {

background-color: white;
}

Todas las opciones de personalización predeterminadas.

let dlg = new Dialog({


caption: '',


message: '',


content: undefined,


buttons: Dialog.buttons.NONE,


resize: 'none',


cancelable: true,


showHeader: true,


showClose: true,


showFooter: false,
});

Event handlers available.

let dlg = new Dialog({


abortHandler: undefined,


cancelHandler: () => { this.close(); },


ignoreHandler: undefined,


noHandler: undefined,


okHandler: () => { this.close(); },


retryHandler: undefined,


yesHandler: undefined,



// events


beforeClosing: () => { return true; }, // set to false to prevent close


closed: undefined,
});