Bagi para developer web tentunya tidak asing lagi mendengar plugin yang satu ini. Plugin ajaib ini dapat merubah tampilan web yang dulunya biasa-biasa saja menjadi lebih interesting dan interaktif . Ngak diperlukan waktu yang cukup lama koq dalam pembuatannya. Ini dikarenakan JQuery mempunyai slogan "Write less, do more" atau dalam bahasa nanggroe " bacut nuleh, le but" atau dalam bahasa indonesia kita tercinta "sedikit menulis, banyak yang bisa dibuat".
Dalam sejarahnya JQuery pertama kali dirilis oleh John resign pada tahun 2006 dan berkembang sampai sekarang. Karna JQuery merupakan plugin maka dalam pengunaannya kita harus mendownload terlebih dahulu plugin ini. Plugin ini free koq atau tidak berbayar, jadi kamu dengan gampang mendapatkannya di google atau kamu dapat download di situs resminya jquery.com.
Berikut contoh sederhana script JQuery yang berada pada taq HTML :
--> contoh kasus : jika sebuah botton diklik maka sebuah paragraf akan hilang.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#coba").click(function(){
$("#satu").fadeOut(1000);
});
});
</script>
</head>
<body>
<button id="coba">Hide</button>
<p id="satu">ini paragraf yang akan dihilangkan</p>
<p> ini paragraf ke dua </p>
</body>
</html>
*Penjelasan kode di atas sebagai berikut :
- <script type="text/javascript" src="jquery.js"></script> = cara pemangilan plugin jquery, taq src berarti source atau sumber. Dikarenakan nama plugin yang didownload adalah jquery.js maka harus sesuai dengan nama pluginnya
- $(document).ready(function() = awal kode jquery karna bekerja pada dokumen yang ready
- $("#coba").click(function(){ = objek pelaku pertama adalah objek html botton yang ber-id "coba"
- $("#satu").fadeOut(1000); = objek pengaplikasian kode tersebut berada pada objek html paragraf
<p id="satu"> ber-id satu, dan efeknya (fadeOut) atau hilang selama 1000mili sekon.
Gampang bukan??silahkan dicoba ya, jika masih bingung koment aja, InysaAllah saya bantu sebisanya...
3 komentar on "Percantik tampilan web dengan plugin JQuery"
terima kasih mbak atas tutorial ini, bisa saya coba kedalam blog saya nih
hem mayan nih tanks pluginya
terima kasih mbak atas tutorial ini, bisa saya coba kedalam blog saya nih
Posting Komentar