jQuery framework proporciona el complemento alertify.js que proporciona un sistema de notificación personalizable prediseñado junto con cuadros de diálogo de navegador interactivos. Este complemento extensible y con temas es muy útil para los desarrolladores que brindan una versión optimizada de mensajes de alerta con función de apilamiento.
Este pequeño sistema de biblioteca muestra efectivamente ventanas emergentes de confirmación, alertas de éxito o error, y mensajes de aviso con cuadros de diálogo en cola que se pueden usar ampliamente en el proceso de depuración.
Descargue la biblioteca e incluya los archivos necesarios según los requisitos del proyecto.
Ejemplo 1: es fácil de entender, personalizar e implementar en su código. No depende de bibliotecas de terceros, pero se integra fácilmente con ellas. El siguiente código demuestra los hermosos cuadros de diálogo con su función de apilamiento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>jQuery Alertify Plugin</title>
<link rel="stylesheet" href="alertify.core.css" />
<link rel="stylesheet" href="alertify.default.css" id="linkID" />
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="alertify.min.js"></script>
<style>
.alertify-log-custom {
background: green;
}
.height {
height: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b> jQuery Alertify Plugin</b>
<div class="height"></div><br>
<b>Alertify Dialogs</b>
<div class="height"></div>
<a href="#" id="alertID">Click Alert Dialog</a><br>
<a href="#" id="promptID">Click Prompt Dialog</a><br>
<a href="#" id="confirmID">Click Confirm Dialog</a><br>
<a href="#" id="focusID">Click Button Focus</a><br>
<a href="#" id="labelsID">Click Custom Labels</a><br>
<a href="#" id="orderID">Click Button Order</a>
<script>
function reset() {
$("#linkID").attr("href", "alertify.default.css");
alertify.set({
labels: {
ok: "OK",
cancel: "Cancel"
},
delay: 4000,
buttonFocus: "ok",
buttonReverse: false
});
}
// Alertify Standard Dialog boxes
$("#alertID").on('click', function () {
reset();
alertify.alert("Welcome GFG !");
alertify.alert("Alertify alert dialog");
return false;
});
$("#confirmID").on('click', function () {
reset();
alertify.confirm(
"Please confirm the dialog box ", function (event) {
if (event) {
alertify.success(
"You have clicked OK to confirm our"
+ " terms and conditions.");
} else {
alertify.error(
"You have clicked Cancel not to confirm.");
}
});
return false;
});
$("#promptID").on('click', function () {
reset();
alertify.prompt(
"This is a prompt dialog box", function (event, string) {
if (event) {
alertify.success(
"You have clicked OK and typed: " + string);
} else {
alertify.error(
"You have clicked Cancel");
}
}, "Please enter, this is default value");
return false;
});
$("#success").on('click', function () {
reset();
alertify.success("Success message");
return false;
});
$("#error").on('click', function () {
reset();
alertify.error("Error message");
return false;
});
$("#labelsID").on('click', function () {
reset();
alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
alertify.confirm(
"Confirm dialog with custom button labels",
function (event) {
if (event) {
alertify.success("You have clicked OK");
} else {
alertify.error("You have clicked Cancel");
}
});
return false;
});
$("#focusID").on('click', function () {
reset();
alertify.set({ buttonFocus: "cancel" });
alertify.confirm(
"Confirm dialog with cancel button focused",
function (event) {
if (event) {
alertify.success("You have clicked OK");
} else {
alertify.error("You have clicked Cancel");
}
});
return false;
});
$("#orderID").on('click', function () {
reset();
alertify.set({ buttonReverse: true });
alertify.confirm(
"Confirm dialog with reversed button order",
function (event) {
if (event) {
alertify.success("You have clicked OK");
} else {
alertify.error("You have clicked Cancel");
}
});
return false;
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra el uso de mensajes de registro del complemento alertify.js .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>jQuery Alertify Plugin</title>
<link rel="stylesheet" href="alertify.core.css" />
<link rel="stylesheet"
href="alertify.default.css" id="linkID" />
<script src=
"http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="alertify.min.js"></script>
<style>
.alertify-log-custom {
background: green;
}
.height {
height: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b> jQuery Alertify Plugin</b>
<div class="height"> </div><br>
<b>Alertify Logs</b>
<div class="height"> </div>
<a href="#" id="notificationID">Standard Log</a><br>
<a href="#" id="successID">Success Log</a><br>
<a href="#" id="errorID">Error Log</a><br>
<a href="#" id="customID">Custom Log</a><br>
<a href="#" id="delayID">Hide in 9 seconds</a><br>
<a href="#" id="foreverID">Persistent Log</a>
<script>
function reset() {
$("#linkID").attr("href", "alertify.default.css");
alertify.set({
labels: {
ok: "OK",
cancel: "Cancel"
},
delay: 4000,
buttonFocus: "ok",
buttonReverse: false
});
}
$("#notificationID").on('click', function () {
reset();
alertify.log("Standard log message");
return false;
});
$("#successID").on('click', function () {
reset();
alertify.success("Success log message");
return false;
});
$("#errorID").on('click', function () {
reset();
alertify.error("Error log message");
return false;
});
// Custom Properties
$("#delayID").on('click', function () {
reset();
alertify.set({ delay: 9000 });
alertify.log("Hiding in 9 seconds");
return false;
});
$("#foreverID").on('click', function () {
reset();
alertify.log("It will stay until clicked", "", 0);
return false;
});
// Custom Log message
$("#customID").on('click', function () {
reset();
alertify.custom = alertify.extend("custom");
alertify.custom("Its a custom log message");
return false;
});
</script>
</body>
</html>
Producción:
Ejemplo 3: el siguiente código demuestra cómo implementar cuadros de diálogo temáticos y realizar llamadas ajax mediante mensajes de notificación como se muestra en el código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>jQuery Alertify Plugin</title>
<link rel="stylesheet" href="alertify.core.css" />
<link rel="stylesheet"
href="alertify.default.css" id="linkID" />
<script src=
"http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="alertify.min.js"></script>
<style>
.alertify-log-custom {
background: green;
}
.height {
height: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b> jQuery Alertify Plugin</b>
<div class="height"> </div><br>
<b>Ajax Multiple Dialogs</b>
<div class="height"> </div>
<a href="#" id="ajax">
Ajax with Multiple Dialog</a>
<div class="height"> </div><br />
<b>Custom Bootstrap Themes</b>
<div class="height"> </div>
<a href="#" id="bootstrap">Bootstrap Theme</a>
<script>
function reset() {
$("#linkID").attr("href", "alertify.default.css");
alertify.set({
labels: {
ok: "OK",
cancel: "Cancel"
},
delay: 4000,
buttonFocus: "ok",
buttonReverse: false
});
}
// Ajax call
$("#ajax").on("click", function () {
reset();
alertify.confirm("Confirm?", function (event) {
if (event) {
alertify.alert("Successful Ajax call after OK");
} else {
alertify.alert("Successful Ajax call after Cancel");
}
});
});
// Custom Themes
$("#bootstrap").on('click', function () {
reset();
$("#linkID").attr("href", "alertify.bootstrap.css");
alertify.prompt(
"It prompts dialog with bootstrap theme",
function (event) {
if (event) {
alertify.success("You have clicked OK");
} else {
alertify.error("You have clicked Cancel");
}
}, "This is Default Value");
return false;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA