Tuesday 14 July 2015

Membuat Kotak Dialog Dengan JQuery

Dalam pembuatan suatu aplikasi kita terkadang harus membuat kotak dialog untuk menampilkan pesan error atau memberikan peringatan kepada pengunjung.
Pada kesempatan ini kita akan membuat kotak dialog dengan JQuery UI. Pada kotak dialog ini kita bisa membuat content yang variatif dan juga bisa membuat content yang interaktif sepertio form.
Berikut contoh penggunaan dialog box / kotak dialog dengan JQuery UI.

<html>
<head>
<title>Kotak Dialog 1</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.dialog.js"></script>
<script type="text/javascript">
$("document").ready(function(){
 $("#pesan").dialog();
});
</script>
<body>
<div id="pesan" title="Contoh kotak dialog">
ini adalah isi dari kotak dialog, content ini bisa di rubah sesuai kebutuhan.
</div>
</body>
</html>

No comments:

Post a Comment