<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 ..
0 komentar:
Posting Komentar