Membuat Pesan Dialox Box menggunakan JQuery UI

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.

Langkah pertama buatlah program untuk menampilkan sebuah pesan dan tombol untuk dklik:

<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.js
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

DOWNLOAD DISINI

Jika anda sudah download,
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>