Untuk membuat jendela konfirmasi pada Bootstrap dengan mudah, hal yang dilakukan adalah dengan menggunakan Bootbox, anda dapat mengunduh plugin bootbox.js di halaman resminya disini. Letakkan bootbox.js dalam folder projek anda. Pastikan juga telah terdapat file bootstrap dan jquery pada folder projek anda karena bootbox dapat bekerja jika terdapat dua file tersebut, berikut gambaran struktur folder pada projek:
Pada gambar diatas terdapat beberapa folder yang merupakan hasil dari ekstraksi file bootstrap yang di unduh.
Buka file index.html dengan notepad kemudian ketik kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Study On Sunday</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div>
<button type="button" id="alert" class="btn btn-danger">Alert</button>
<button type="button" id="confirm" class="btn btn-info">Confirm</button>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="bootbox.min.js"></script>
<script>
$(document).ready(function(){
$("#alert").click(function(){
bootbox.alert("Hi Alert", function(){
/* Jika Tombol OK Ditekan. */
});
});
$("#confirm").click(function(){
bootbox.confirm("Hi Confirm ?", function(result){
if(result==true)
{
/* Jika Tombol OK Ditekan */
alert("Anda Klik Setuju");
}
else
{
/* Jika Tombol Cancel Ditekan */
alert("Anda Klik Batal");
}
});
});
});
</script>
</body>
</html>
Jalankan file index.html pada web browser hasilnya akan terlihat seperti gambar berikut:
Anda juga dapat melihat contoh penggunaan bootbox pada situs resminya di http://bootboxjs.com/examples.html jika ada hal yang ingin ditanyakan silahkan tinggalkan pada fasilitas komentar.
0 Comments:
Post a Comment