Merubah Posisi Objek dengan Jquery

Objek di dalam website seperti contohnya gambar, biasanya mempunyai posisi fix(tidak bisa diganti oleh pengunjung). Yang artinya dalam posisi ini pengunjung hanya berperan sebagai penerima informasi, bukan pengatur tampilan sumber informasi. Bayangkan jika pengunjung bisa merubah layout website sesuka hati mereka, mereka akan merasa lebih dihargai. Tentunya Anda tidak perlu cemas karena perubahan layout hanya terjadi di komputer pengunjung yang merubah, artinya tidak secara global.

Di dalam artikel ini Anda akan belajar cara membuat mainan remot control menggunakan jquery. Anda bisa mengendalikan suatu objek. Seru kan? Yuk langsung dipelajari.


1) Download UI Jquery di http://jqueryui.com/download

2) Jalankan Dreamweaver dan buat file html baru.

3) Masukkan CSS dan JS Jquery dengan cara mengetikkan skrip di bawah ini

<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Perhatikan tulisan black-tie pada baris skrip pertama, ganti dengan nama theme Jquery yang Anda pilih. Misalnya UI Lightness.

4) Buat folder bernama gambar. Siapkan sebuah gambar PNG dengan nama objek kemudian masukkan ke folder gambar.

5) Ketikkan kode di bawah ini pada bagian style.

body {

background-color: #3A8D17;

}

#gambar {

position:absolute;

width:128px;

height:104px;

z-index:1;

left: 334px;

top: 3px;

}

6) Ketikkan kode di bawah ini pada bagian Javascript

var x=334;

var y=3;



$(document).ready(function(){



$("#tombolkiri").click(function () {



x-=20;

$("#gambar").css("left",x+"px");

});

$("#tombolkanan").click(function () {



x+=20;

$("#gambar").css("left",x+"px");

});





$("#tombolbawah").click(function () {



y+=20;

$("#gambar").css("top",y+"px");

});

$("#tombolatas").click(function () {



y-=20;

$("#gambar").css("top",y+"px");

});





});

7) Ketikkan kode di bawah ini pada bagian body.


<p>&nbsp;</p>

<p><table width="150" border=0" id="gambar" name="gambar">

<tr>

<td width="24"><div align="center"></div></td>

<td width="80"><div align="center">

<input name="tombolatas" type="submit" id="tombolatas" value="^" />

</div></td>

<td width="24"><div align="center"></div></td>

</tr>

<tr>

<td><div align="center">

<input name="tombolkiri" type="submit" id="tombolkiri" value="&lt;" />

</div></td>

<td><div align="center"><img src="gambar/objek.png" width="80" height="73" /></div></td>

<td><div align="center">

<input name="tombolkanan" type="submit" id="tombolkanan" value="&gt;" />

</div></td>

</tr>

<tr>

<td><div align="center"></div></td>

<td><div align="center">

<input name="tombolbawah" type="submit" id="tombolbawah" value="v" />

</div></td>

<td><div align="center"></div></td>

</tr>

</table>

</p>


Simpan dan jalankan file tersebut. Anda segera melihat permainan move dengan Jquery.




Aplikasi Dasar Pemindahan Objek dengan Jquery telah selesai dibuat.

Download Source : http://www.mediafire.com/?fz75uibjf5cz59k


Jika Anda ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawaha artikel ini ^_^.