Tutorial jQuery : Membuat Alert Dialog Box Dengan jQuery

Akhirnya, ada juga waktu kosong untuk menulis lagi di blog ini. Dan lagi-lagi saya akan membahas tentang jQuery  (#hehe). Mudah-mudahan kawan-kawan yang berkunjung kesini tidak bosan untuk membaca postingan saya akhir-akhir ini yang isinya tentang framework Javascript yang tengah naik daun tersebut. Kali ini, saya akan menjelaskan sedikit tentang pembuatan alert dialog box dengan jQuery. Hmm, kedengarannya memang sangat sederhana. Namun, pernah gak kita memperhatikan sebuah dialog box entah itu berupa alert box maupun confirmation box, yang berubah-ubah tampilannya di setiap browser? Yupz, dengan sebuah plugin jQuery kita dapat membuat dialog box yang tampilannya sama di semua browser dan tentunya bisa di-kustomasi sesuai selera kita melalui file css. Nama plugin-nya ialah jQuery Alert, yang ukuran file-nya hanya 7 kb. Contoh penggunaannya, kira-kira seperti di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript">

		$(document).ready( function() {

			$("a#alert_button").click( function() {
				jAlert('Menampilkan alert dialog box yang berisi peringatan.', 'Alert Dialog Box');
			});

			$("a#confirm_button").click( function() {
				jConfirm('Apakah anda ingin menghapus data ini?', 'Confirmation Dialog Box', function(r) {
					if( r ) jAlert('Data berhasil dihapus', 'Confirmation Dialog Box Results | True')
					else jAlert('Data tidak jadi dihapus.', 'Confirmation Dialog Box Results | False');
				});
			});

			$("a#prompt_button").click( function() {
				jPrompt('Ketikkan kata pada textbox di bawah ini :', 'Masukkan Kata....', 'Prompt Dialog Box', function(r) {
					if( r ) jAlert('Kata yang anda masukkan : <b>' + r + '</b>', 'Dialog Box Results');
				});
			});

		});

</script>

Itu baru fungsi untuk memanggil plugin jQuery Alert-nya saja, dan untuk memanggilnya melalui sebuah link, bisa menggunakan syntax html seperti di bawah ini :

<div>
<p><a href="#" id="alert_button">Alert Dialog</a></p>
<br />
<p><a href="#" id="confirm_button">Confirm Dialog</a></p>
<br />
<p><a href="#" id="prompt_button">Prompt Dialog</a> </p>
</div>

Dan hasil jadinya seperti di bawah ini :

OK deh, sekian dulu postingan pendek 😀 saya kali ini. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan ingin mencari tampilan yang berbeda dalam menampilkan alert dialog box.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!