Jumat, 26 November 2010

Tutorial Website :: Mari Mengenal JQueryUI

Posted by Bayu Idham Fathurachman Label: , , | 0 komentar

Selamat siang agan-agan , siang yang cukup cerah untuk posting .. Pada postingan kali ini , saya akan mengajak agan-agan untuk mengenal JQueryUI seperti yang telah saya sampaikan pada postingan sebelumnya .. Apa itu JQuertUI ? Ialah salah satu sublibrary dari JQuery yang mengurusi masalah user interface dari website .. Dengan menggunakan JQueryUI , kita bisa membuat tampilan website lebih menarik dan menghibur .. Lalu bagaimana cara menggunakannya ? Tidak jauh beda dengan JQuery , kita pun harus menyertakan librarynya terlebuh dahulu .. Bisa di download di jqueryui.com .. Untuk agan blogger , bisa mengakses secara direct dengan mengetikan kode berikut diantara tag <head></head>

<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js' type='text/javascript'/>

Terlihat bahwa kita menggunakan tipe JQueryUI dengan versi 1.8.6 dan bertipe compressed ..
Dan selanjutnya , saya akan memberikan ssedikit contoh penggunaannya pada sebuah media gambar ..
Buatlah halaman html , dan ketikan kode berikut ..

<html>
<head>
<title>Mengenal JQueryUI</title>
<script src="Compressed.js" type="text/javascript" ></script>//libraryJQuery standar
<script src="jquery-ui-min.js.js" type="text/javascript"></script>
//library JQueryUI
</head>
<body>
<img src="gambarAnda.jpg" id="gambarAnda"/>
<script type="text/javascript">
$(document).ready(function(){
$('#gambarAnda').click(function(){
     $(this)
            .effect('shake', {times:3}, 300)
            .effect('highlight', {}, 1000)
            .hide('explode', {}, 1000)
            .show('explode',{},1000);
      });
});
</script>
</body>
</html>


Maksudnya adalah ketika kita mengklik gambar , maka akan ada efek yang keluar ..

Hasilnya seperti gambar dibawah ini ..



Coba klik gambar diatas , apa yang terjadi ? Yuph , gambar tersebut bergoyang sebanyak 3 kali selama 3 detik , disorot lalu meledak dan tampil lagi ..
Begitulah sedikit contoh sederhana penggunaan JQueryUI , semoga cukup untuk mengenal lebih dekat JQueryUI , masih banyak efek yang lebih wah lagi .. Sekian postingan kali ini , sampai berjumpa di postingan selanjutnya ..

Simak Juga Tutorial Lainnya:

Proggraming

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)