Dialox box jika diartikan dalam bahasa indonesia berarti kotak dialog. Teknik ini merupakan salah satu teknik dari JQuery UI yang sering sekali digunakan dalam pembuatan website. Dialox Box dapat digunakan untuk bermacam-macam hal, sesuai kebutuhan yang ada pada website. Misalnya untuk menampilkan iklan ketika tombol diklik, menampilkan pesan atau informasi penting pada website ketika tombol dklik, bahkan dapat digunakan untuk pengisian formulir pendaftaran atau komentar ketika tombol dklik. Selain tampilannya menarik, teknik ini juga dapat bermanfaat untuk menghemat ruang pada website.
<html>
<head>
<title> Blog Tutorial - Dialog Box </title>
<body bgcolor="black">
<center><div style="width:400;">
<fieldset>
<font color="white"><h2>Temukan Informasi Terbaru<br>
Dengan Klik Tombol Dibawah ini</h2></font><br>
<div id="pesan" title="Hot News">
<p><b>Kunjungi Blog tutorial:</b>
<b><font color="green">algoritma-cyber.blogspot.com </font></b>
<font color="red">Tutorial meliputi Pemrograman, Desain Grafis, Networking,Hacking, internet
, Open Source, Microsoft Office, Stupid Tric, dan masih banyak lagi yang bisa anda
dapatkan <br>
<font color="black">berikan komentar untuk hot news hari ini</font></p>
<table>
<tr><td>nama</td><td><input type="text"></td></tr>
<tr><td>komentar</td><td><textarea></textarea></td></tr></table>
<input type="submit">
</div>
<button id="tombol" width="1000">KLIK DISINI</button>
</fieldset>
</body>
</html>
Jika anda jalankan program tersebut, akan menghasilkan output seperti gambar dibawah ini:
Jika anda klik tombol tersebut, tentunya tidak akan ada yang terjadi, karena program tersebut hanya menampilkan saja, untuk itu kita perlu menambahkan skript agar ketika tombol diklik, maka akan muncul pesan dalam dialox box.
Sebelum menambahkan skriptnya,
anda harus memiliki 11 plugin jquery terlebih dahulu. yaitu:
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
jquery.ui.position.js
jquery.ui.resizable.js
jquery.ui.dialog.js
jquery.effects.core.js
jquery.effects.blind.js
jquery.effects.explode.js
dan menambahkan jquery.ui.all.css untuk membuat tampilannya menjadi lebih menarik.
untuk mendapatkan plugin tersebut, anda dapat download dahulu melalui link dibawah ini
Jika anda sudah download,
masih dalam program yang sama.
tambah skript berikut tepat dibawah kode <head>
Sekarang coba anda jalankan program anda lagi.
masih dalam program yang sama.
tambah skript berikut tepat dibawah kode <head>
<link rel="stylesheet" href="jquery/base/jquery.ui.all.css">
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.ui.core.js"></script>
<script src="jquery/jquery.ui.widget.js"></script>
<script src="jquery/jquery.ui.mouse.js"></script>
<script src="jquery/jquery.ui.draggable.js"></script>
<script src="jquery/jquery.ui.position.js"></script>
<script src="jquery/jquery.ui.resizable.js"></script>
<script src="jquery/jquery.ui.dialog.js"></script>
<script src="jquery/jquery.effects.core.js"></script>
<script src="jquery/jquery.effects.blind.js"></script>
<script src="jquery/jquery.effects.explode.js"></script>
<script type="text/javascript">
$.fx.speeds._default = 500;
$(function() {
$( "#pesan" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
position: ["center", "center"]
});
$( "#tombol" ).click(function() {
$( "#pesan" ).dialog( "open" );
return false;
});
});
</script>
Sekarang coba anda jalankan program anda lagi.
masih tampil seperti gambar dibawah ini:
Sekarang coba anda klik tombol KLIK DISINI, jika berhasil,
maka akan keluar output seperti gambar dibawah ini:
dan jika anda klik tombol close, tanda silang yang ada diatas,
maka dialox box akan hilang dengan efek explode
+ komentar + 6 komentar
bikin lemot blog ya?
@sukague : ya bener, kalo kita menambhkan skript html ataupun jquery, akan membuat webste atau blog kita menjadi lebih berat. :Q
password rarnya plugin apa gan.. thanks..
Mantab tutorialnya sob
terimakasih, mantab banget nih...
Bagus, Hidup TI Indonesia
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia