Kita dapat membuat dialog yang draggable dan resizable di jQuery UI dengan penambahan script yang sangat sederhana. Script itu adalah :
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.draggable.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.resizable.js”>
</script>
Coding lengkapnya adalah sebagai berikut :
<!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 src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.draggable.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.resizable.js”>
</script>
<script>
(function($){
$(“#dialogku”).dialog();
})(jQuery);
</script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/dialog_drag_resize.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.