Jumat, 02 Maret 2012

Percantik tampilan web dengan plugin JQuery

Diposkan oleh Dewi Thursina di 15.02

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...


4 komentar on "Percantik tampilan web dengan plugin JQuery"

Jefry on 10 Desember 2012 16.17 mengatakan...

terima kasih mbak atas tutorial ini, bisa saya coba kedalam blog saya nih

Giri Miharja on 28 November 2013 12.17 mengatakan...

terimakasih gan blog anda menarik jangan lupa mampir ke http://girimiharja.student.ipb.ac.id

animax on 17 Januari 2014 07.30 mengatakan...

hem mayan nih tanks pluginya

Template Booklet Company Profile on 13 Februari 2014 10.52 mengatakan...

terima kasih mbak atas tutorial ini, bisa saya coba kedalam blog saya nih

Poskan Komentar

 

rhienayups...