Belajar jQuery‎ > ‎

08. Menggunakan Plugin pada jQuery

posted Nov 29, 2011, 7:13 AM by Editor KursusInternet   [ updated Dec 31, 2011, 8:28 AM ]

Plugin / modul tambahan merupakan bagian arsitektur pada jQuery yang memungkinkan pengembangan jQuery lebih jauh seperti penambahan fungsi / method, kemampuan manipulasi user interface ataupun perubahan mendasar lainnya.

Berbagai tugas spesifik yang cukup rumit seperti animasi atau menghasilkan user interface seperti menu pulldown dapat dikembangkan dan digunakan sebagai plugin. Walaupun kita dapat mengembangkan plugin sendiri namun banyak sekali plugin yang telah tersedia di web dan pada umumnya bebas digunakan untuk berbagai keperluan.

Karena sifatnya yang fleksibel, tiap plugin menambahkan kemampuan dan penggunaan yang berbeda. Karena itu tiap plugin perlu dipelajari dokumentasi maupun contoh penggunaannya dengan baik.

Artikel berikut akan menunjukkan bagaimana kita dapat mendownload, melakukan instalasi dan menggunakan salah satu plugin pada jQuery.

Contoh Penggunaan Plugin jQuery : jsTree

Berikut penulis menunjukkan contoh salah satu contoh penggunaan plugin jQuery yang bersifat visual yaitu jsTree. Plugin ini dapat menghasilkan visualisasi organisasi hirarkis seperti pohon (tree).

Langkah-langkah penggunaan aplikasi ini adalah sebagai berikut :
  • Kunjungi website jsTree pada alamat http://www.jstree.com.
  • Klik pilihan download untuk file terakhir dan ekstrak ke folder yang Anda inginkan. Pada saat penulisan ini dibuat, versi terakhir adalah pre 1.0 fixed. 


  • Ada beberapa file yang ada pada paket, terutama file-file gambar untuk berbagai tema. File plugin script yang akan digunakan adalah jquery.jstree.js.


  • Pada file halaman web kita, masukkan referensi script tersebut setelah script jquery.

    <script src="jquery-1.7.min.js"></script> <script src="jquery.jstree.js"></script>
  • Dengan mengacu pada dokumentasi plugin ini di http://www.jstree.com/documentation/core, kita buat script yang kode lengkap dan hasilnya  seperti berikut. 

    Text Box

    <html> <head> <title>Contoh Penggunaan jsTree</title> <script src="jquery-1.7.min.js"></script> <script src="jquery.jstree.js"></script> <script type="text/javascript" class="source"> $(function () {     jQuery("#demo1")         .jstree(); }); </script> </head> <body>     <div id="demo1" class="demo">         <ul>             <li>                 <a>Buah-buahan</a>                 <ul>                     <li>                         <a>Apel</a>                     </li>                     <li>                         <a>Jeruk</a>                     </li>                 </ul>             </li>             <li>                 <a>Sayur-sayuran</a>                 <ul>                     <li>                         <a>Kangkung</a>                     </li>                     <li>                         <a>Bayam</a>                     </li>                 </ul>             </li>         </ul>     </div> </body> </html>


    Catatan : Perhatikan bahwa setiap teks pada node (<li>) harus mengandung tag anchor (<a>) .

Video Demo : Penggunaan Theme pada jsTree 

  • Dan berikut adalah video youtube yang menunjukkan penggunaan theme lebih lanjut.



Sumber Referensi


ċ
contoh_jstree.html
(1k)
Editor KursusInternet,
Dec 2, 2011, 9:34 PM
Comments