Membuat Alert Pada Website Lebih Keren Dengan Menggunakan Jquery Alertify
Haii, kembali lagi nih di artikel saya, Kali ini saya akan memberikan tips atau tutorial cara Membuat Alert Pada website Lebih Keren Dengan Menggunakan Jquery Alertify. Pada javascript kita sudah bisa membuat alert function untuk menpilkan popup peringatan atau alert pada sebuah website. Tetapi tampilanya monoton itu-itu saja kan ? hha its not cool bro. Nah sekarang saya akan menerikan cara membuat alert function lenih keren dengan menggunakan bantuan jquery. tertarik? so Check this out
Pertama-tama download jquerynya dulu di sini Download via Github
Setelah di download taruh folder jsnya si folder html kita lalu panggil di headnya.
Nah di sini saya sudah membuat contohynya bisa kalian salin dan jangan lupa path filenya sesuaikan dengan path file di komputer kalian yah.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>alertify.js - example page</title>
<link rel="stylesheet" href="js/themes/alertify.core.css" />
<link rel="stylesheet" href="js/themes/alertify.default.css" id="toggleCSS" />
<meta name="viewport" content="width=device-width">
<style>
.alertify-log-custom {
background: blue;
}
</style>
</head>
<body>
<div class="dialog">
<h2>Dialogs</h2>
<a href="#" id="alert"> Ini Alert Dialog</a><br>
<a href="#" id="confirm">Ini Confirm Dialog</a><br>
<a href="#" id="prompt">Ini Prompt Dialog</a><br>
<a href="#" id="labels">Ini Custom Labels</a><br>
<a href="#" id="focus">Ini Button Focus</a><br>
<a href="#" id="order">Ini Button Order</a>
</div>
<div class="Ajak">
<h2>Ajax</h2>
<a href="#" id="ajax">Ajax - Multiple Dialog</a>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/lib/alertify.min.js"></script>
<script>
function reset () {
$("#toggleCSS").attr("href", "js/themes/alertify.default.css");
alertify.set({
labels : {
ok : "OK",
cancel : "Cancel"
},
delay : 5000,
buttonReverse : false,
buttonFocus : "ok"
});
}
// ==============================
// Standard Dialogs
$("#alert").on( 'click', function () {
reset();
alertify.alert("Ini alert dialog");
return false;
});
$("#confirm").on( 'click', function () {
reset();
alertify.confirm("Ini confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#prompt").on( 'click', function () {
reset();
alertify.prompt("Ini prompt dialog", function (e, str) {
if (e) {
alertify.success("You've clicked OK and typed: " + str);
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
});
// ==============================
// Ajax
$("#ajax").on("click", function () {
reset();
alertify.confirm("Confirm?", function (e) {
if (e) {
alertify.alert("Successful AJAX after OK");
} else {
alertify.alert("Successful AJAX after Cancel");
}
});
});
// ==============================
// Standard Dialogs
$("#notification").on( 'click', function () {
reset();
alertify.log("Standard log message");
return false;
});
$("#success").on( 'click', function () {
reset();
alertify.success("Success log message");
return false;
});
$("#error").on( 'click', function () {
reset();
alertify.error("Error log message");
return false;
});
// ==============================
// Custom Properties
$("#delay").on( 'click', function () {
reset();
alertify.set({ delay: 10000 });
alertify.log("Hiding in 10 seconds");
return false;
});
$("#forever").on( 'click', function () {
reset();
alertify.log("Will stay until clicked", "", 0);
return false;
});
$("#labels").on( 'click', function () {
reset();
alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
alertify.confirm("Confirm dialog with custom button labels", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#focus").on( 'click', function () {
reset();
alertify.set({ buttonFocus: "cancel" });
alertify.confirm("Confirm dialog with cancel button focused", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#order").on( 'click', function () {
reset();
alertify.set({ buttonReverse: true });
alertify.confirm("Confirm dialog with reversed button order", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
// ==============================
// Custom Log
$("#custom").on( 'click', function () {
reset();
alertify.custom = alertify.extend("custom");
alertify.custom("I'm a custom log message");
return false;
});
// ==============================
// Custom Themes
$("#bootstrap").on( 'click', function () {
reset();
$("#toggleCSS").attr("href", "js/themes/alertify.bootstrap.css");
alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
});
</script>
</body>
</html>
Setelah sudah maka akan tampil seperti ini :
silahkan klik di bagian menu-menunya maka akan muncul popup alert yang keren
misal di sini saya klik “Ini Confirm Dialog” maka akan muncul seperti ini:
Setelah di klik ok maka akan muncul notif di paling bawah kanan monitor
Nah lebih keren kan ? silahkan di coba semuanya sindiri ya karena terlalu panjang kalu saya coba satu-satu.
Oke itu saja artikel tentang Membuat Alert Pada Website Lebih Keren Dengan Menggunakan Jquery Alertify.
Terimakasih
Komentar
Posting Komentar