Program Sederhana JQuery UI Accordion ~ Trick Tips Cara Supaya Agar Dapat

Sabtu, 22 Desember 2012

Program Sederhana JQuery UI Accordion

By Admin on 20.06

Kali ini lagi - lagi jQuery akan membantu kita untuk memperindah tampilan website kita, Apa itu jQuery UI? jQuery UI dibuat oleh
Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :

Accordion
Datepicker
Tabs
Dialog
Progressbar
Slider
Effect/animasi
Drag and Drop
Dan lain-lain

Selanjutnya kita akan belajar bebrapa pegnggunaan koponen library jQuery UI ini.

Istalasi jQuery UI

Download jQuery UI di website resminya yaitu http://jqueryui.com/ kemudian pilih yang stable.
Extrack file jQuery yang sebelumnya telah di download.
Untuk mencobanya anda coba klik index.html maka akan terlihat hal - hal apa saja yang dapat dilakukan jQuery

Nah setelah mencoba fitur - fitur yang disediakan jQuery sekarang bagaimana cara menerapkannya ke dalam website?

A. Accordion

Accordion adalah salah satu fitur yang tersedia di jQuery UI, Accordion berfungsi mengelompokan content ke dalam panel - panel yang terpisah di mana pengunjung dapat menutup dan membuka panel - panel tersebut.

Membuat Accordion Standar

Pertama kita buat terlebih dahulu Accordion yang sederhana untuk belajar :

<html>  <head>  <title>Menggunakan Accordion</title>  <link type="text/css" href="jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet"/>  <script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/jquery-1.8.3.js"></script>  <script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.core.js"></script>  <script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.widget.js"></script>  <script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.accordion.js"></script>   <script type="text/javascript">  $("document").ready(function(){  $("#isi").accordion();  });  </script>  </head>  <body style="font-size:65%">  <div id="isi">  <h2><a href="#">Web Designer</a></h2><div>Web designer bertugas sebagai juru gambar, yaitu mendesain web</div><h2><a href="#">Web Programmer</a></h2><div>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website</div><h2><a href="#">Web Administrator</a></h2><div>Web Administrator bertugassebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website</div></div></body>  </html>

Ingat letakan file tadi di folder yang sama pada folder jQuery yang telah di download dan di extrac sebelumnya. jika anda melakukan secara benar maka tampilannya akan menjadi seperti ini :

Bagaimana mudah bukan dengan script yang relatif sedikit anda bisa menciptakan menu dropdown dengan mudah. sekarang kita akan menambahkan efek hover.

Efek Hover Accordion

Jika sebelumnya untuk menampilkan menu kita harus mengkliknya sekaran kita akan membuat accordion menampilkan menu jika ada pointer di atasnya agar lebih praktis. ubah script standar sebelumnya menjadi seperti ini :

<html>  <head>  <title>Menggunakan Accordion</title>  <link type="text/css" href="jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet"/>  <script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/jquery-1.8.3.js"></script>  <script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.core.js"></script>  <script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.widget.js"></script>  <script type="text/javascript" src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.accordion.js"></script>   <script type="text/javascript">  $("document").ready(function(){  //PERUBAHAN HANYA TERJADI DI SINI SELEBIHNYA SAMA $("#isi").accordion({  event:"mouseover"  });  });  </script>  </head>  <body style="font-size:65%">  <div id="isi">  <h2><a href="#">Web Designer</a></h2><div>Web designer bertugas sebagai juru gambar, yaitu mendesain web</div><h2><a href="#">Web Programmer</a></h2><div>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website</div><h2><a href="#">Web Administrator</a></h2><div>Web Administrator bertugassebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website</div></div></body>  </html>

Perhatikan baik - baik script di atas dan bandinkan perubahannya. perubahan hanya terjadi pada script ini saja :

Akan tetapi terjadi perubahaan yang menarik. nah sekarang adalah tugas anda untuk mengembangkannya lagi menjadi lebih menarik.

JQUERY

Tukang Coding

Judul: Program Sederhana JQuery UI Accordion
Review oleh: Tukang Coding | Template TreTans 1.0
Update pada: 20.06 | Rating: 4.5

Trick Tips Cara Supaya Agar Dapat

Sabtu, 22 Desember 2012