Dengan jQuery UI kita bisa membuat dialog yang fleksibel. Dialog ini semacam open window dalam javascript tetapi dengan pengendalian yang lebih fleksibel.
Coding sederhana dialog dengan jQuery UI dapat dilihat seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Dialog</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<p>Ini body dari halaman website. Berisi content dari website tersebut. Akan banyak penjelasan-penjelasan di sini.
Isinya tentu bermacam-macam. Yang jelas merupakan kalimat yang dibagi dalam paragraf-paragraf.
</p>
<p>Ini paragraf kedua. Paragraf kedua ini membicarakan hal baru yang sedikit banyak mempunyai kaitan dengan paragraf pertama. Silahkan dijelaskan secara panjang dan lebar pokok pembicaraan baru dalam paragraf ini.
</p>
<div id=”dialogku” title=”Ini judul dialog”>
Ini dialog yang akan ditampilkan seperti open window javascript tetapi lebih canggih. Mohon perhatian atas pesan yang saya sampaikan. Terima kasih.
</div><!–end of tabku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.position.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.dialog.js”>
</script>
<script>
(function($){
$(“#dialogku”).dialog();
})(jQuery);
</script>
</body>
</html>
Demonya dapat dilihat di http://aris.proweb.asia/dialog.html seperti gambar di bawah ini:
Penjelasan lebih lanjut mengenai dialog bisa dibaca di http://jqueryui.com/demos/dialog/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.