JQuery UI telah menambahkan position utility yang dapat diakses di http://jqueryui.com/demos/position/. Berikut kita akan mencoba menggunakan position utility.
Kita akan membuat sebuah file position.html dengan isi sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Position Utility</title>
<link rel=”stylesheet” href=”css/position.css”>
</head>
<body>
<div class=”ui-acuan”>
Saya acuannya
</div><!–end of ui-acuan–>
<div class=”ui-ditempatkan”>
Saya akan ditempatkan
</div><!–end of ui-ditempatkan–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.position.js”>
</script>
<script>
(function($){
$(“.ui-ditempatkan”).position({
of: “.ui-acuan”
});
})(jQuery);
</script>
</body>
</html>
Dan kemudian file css/position.css dengan isi sebagai berikut:
.ui-acuan
{
width: 200px;
height: 200px;
border: 1px solid #000;
}
.ui-ditempatkan
{
width: 100px;
height: 100px;
border: 1px solid #ff0000;
}
Hasilnya bisa dilihat di http://aris.proweb.asia/position.html seperti gambar di bawah ini
Jika kita ubah javascriptnya menjadi
<script>
(function($){
$(“.ui-ditempatkan”).position({
of: “.ui-acuan”,
my: “right bottom”,
at: “right bottom”
});
})(jQuery);
</script>
dan kemudian disimpan sebagai position_right_bottom.html , hasilnnya bisa dilihat di http://aris.proweb.asia/position_right_bottom.html seperti gambar berikut:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.