Membuat Accordion Menu dengan JQuery

Menu Accordion digunakan untuk menimalisir ruang dari sebuah halaman website. Cara kerja menu accordion sangat simpel dan hanya membutuhkan tempat yang sedikit dari ruang website, karna menu-menu ditempatkan dalam sebuah menu utama, dimana jika sebuah menu terbuka menu yang lain akan tertutup. 

Di catatan kali ini saya akan memberikan cara membuat menu accordion dengan Jquey yang sederhana.

Untuk membuat Menu Accordion kita membutuhkan file JQuery yang mana dapat didownload secara gratis diJQuery.com . Setelah file JQuery saudara download tempatkan dalam sebuah folder dimana didalam folder ini kita juga akan menyimpan file css dan html, selanjutnya untuk membuat menu accordionnya ikuti langkah berikut :

Langkah petama membuat file css :

1. Buka editor saudara, disini saya menggunakan editor PSPad untuk membuat file css. 
2. Kemudian buat file css di bawah ini :

.accordion {       width: 250px;       border: 1px dotted #222;       } .accordion-menu {       background-color: #666;       border-style: solid;       border-width: 1px 1px 2px;       border-color: #ccc #ccc #666;       padding: 3px;       cursor: pointer;       color: #333;       text-shadow: 0 1px 0 #fff;       margin: 0;       } .accordion-isi {       padding: 8px 4px 4px;       }

3. Simpan file css diatas didalam folder yang telah kita buat sebelumnya dengan nama file accordion.css.

Langkah Kedua, implementasikan kode Jquery :

1. Implementasi kode jQurey seperti tabel berikut :

$(document).ready(function() {     $('.accordion .accordion-menu')         .next('.accordion-isi')         .filter(':not(:first)')         .hide();         $('.accordion > .accordion-menu').click(function(){                 var selfClick = $(this).next('div:frst').is(':visible');         if(selfClick) {             return;         }            $(this)               .parent()               .find('> div:visible')               .slideToggle();            $(this)               .next('div:first')               .sildeToggle();       }); });

2. implementasi kode Jquery diatas akan ditempatkan dalam markup html dimana fungsinya yang akan mengatur animasi accordion menu. 

Langkah Ketiga membuat markup HTML :

1. Panggil file JQuery dan file CSS yang telah dibuat, tempatkan diantara tag < head> 

< link rel="stylesheet" type="text/css" href="accordion.css> < script type="text/javascript" src="jqurey-1.5.1.js> < /script>

2. Kemudian buat tag htmlnya seperti tabel berikut :

< div class="accordion">     < h3 class="accordion-menu">Menu Pertama< /h3>     < div class="accordion-isi">         < ul>            < li>Link1< /li>            < li>Link2< /li>         < ul>     < /div>          < h3 class="accordion-menu">Menu Kedua< /h3>     < div class="accordion-isi">         < p>Content accordion tidak hanya list saja, paragraph pun bisa< /p>     < /div>          < h3 class="accordion-menu">Menu Ketiga< /h3>     < div class="accordion-isi">         < h3>Title< /h3>         < p>Isi accordion bisa apa saja, terserah anda< /p>     < /div>          < h3 class="accordion-menu">Menu Keempat< /h3>     < div class="accordion-isi">         < ol>             < li>Link 1< /li>             < li>Link 2< /li>             < li>Link 3< /li>         < /ol>     < /div>   < /div>

Ket : didalam tag < > tidak ada spasi.

3. Sehigga keseluruhan dari kode dalam htmlnya sebagai berikut :

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html>   < head>   < title>Accordion Menu< /title>   < link rel="stylesheet" type="text/css" href="accordion.css" mce_href="accordion.css">   < script type="text/javascript" src="/jquery-1.5.1.js" mce_src="/jquery-1.5.1.js">< /script>   < script type="text/javascript">     $(document).ready(function(){         $('.accordion .accordion-menu')             .next('.accordion-isi')             .filter(':not(:first)')             .hide();         $('.accordion > .accordion-menu').click(function(){             var selfClick = $(this).next('div:first').is(':visible');             if(selfClick) {               return;             }             $(this)                 .parent()                 .find('> div:visible')                 .slideToggle();             $(this)                 .next('div:first')                 .slideToggle();          });     });     < /script> < /head> < body>   < div class="accordion">     < h3 class="accordion-menu">Menu Pertama< /h3>     < div class="accordion-isi">         < ul>            < li>Link1< /li>            < li>Link2< /li>         < ul>     < /div>          < h3 class="accordion-menu">Menu Kedua< /h3>     < div class="accordion-isi">         < p>Content accordion tidak hanya list saja, paragraph pun bisa< /p>     < /div>          < h3 class="accordion-menu">Menu Ketiga< /h3>     < div class="accordion-isi">         < h3>Title< /h3>         < p>Isi accordion bisa apa saja, terserah anda< /p>     < /div>          < h3 class="accordion-menu">Menu Keempat< /h3>     < div class="accordion-isi">         < ol>             < li>Link 1< /li>             < li>Link 2< /li>             < li>Link 3< /li>         < /ol>     < /div>   < /div> < /body> < /html>

Ket : didalam tag < > tidak ada spasi..disini saya kasih spasi karna saya tidak memakai syntakhl.

4. Selesai sudah Accordion Menu yang kita buat, file yang sudah jadi silahkan download pada menu download pada web ini dengan nama file Accordion Menu Dengan JQuery, semoga bermanfaat dan bisa dikembangkan lagi...Terima kasih...( *_^ )

Read More

Pengenalan dan Cara Penggunaan JQuery

JQuery merupakan suatu framework (pustaka) Javascript yang menekankan bagaimana interaksi antara Javascript dengan HTML. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan“Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

JQuery adalah library open source dengan lisensi GNU ( General Public License ) dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 60 KB dan hanya terdiri dari satu file, sehingga dengan menggunakan JQuery akan jauh lebih cepat dan mudah dalam perpindahan dokument HTML, penggunaan animasi di dalam web sehingga terlihat seperti menggunakan flash.

Cara Penerapan JQuery...

Karna JQuery merupakan sebuah pustaka/library, tentunya saudara harus memiliki JQuerynya terlebih dahulu. Silahkan Download library JQuery di http://jquery.com setelah itu silahkan simpan di folder dalam drive saudara ( misal D:/jquery/ file library jquery ).

Selanjutnya saya akan berikan contoh penggunaan JQuery bagaimana menampilkan dan menutup sebuah gambar dengan menggunakan dua buah tombol.

Contoh :

< html>    < head>      < title>Contoh Penerapan JQuery< /title>      < script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script>      < script type="text/javascript">        $(document).ready(function(){            $(".tutup_gambar").click(function(){               $("#gambar").hide("slow");            });            $(".tampil_gambar").click(function(){               $("#gambar").show("slow");            });        });       < /script>    < /head>    < body>      < button class="tutup_gambar">Tutup Gambar< /button>      < button class="tampil_gambar">Tampil Gambar< /button>      < p>< img id="gambar" src="yonand.jpg" mce_src="yonand.jpg" style="border:7px solid; padding:5px;"/>< /p>    < /body>  < /html>

 Simpan file diatas dengan index.html, di tempatkan persis sama dengan file library JQuery yg telah didownload, kemudian tempatkan juga sebuah gambar dengan nama yonand.jpg.

 penjelasan untuk script diatas :

fungsinya memanggil library JQuery yang didownload.	< script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script>
JQuery memastikan bahwa elemen yang diinginkan sudah ditampilkan dihalaman web.	$(document).ready(function()
Setelah semua Elemen ditampilkan, kemudian jQuery akan memilih elemen berdasarkan id, class atau tag. Atau lebih dikenal denganselector.	$(".tutup_gambar") $(".tampil_gambar") $("#gambar")
Setelah elemen dipilih, berikutnya adalah memberikan aksi/operasi terhadap elemen       yang sudah dipilih. Contoh disamping-> show.	$(".tampil_gambar").click(function(){               $("#gambar").show("slow");            });

Memahami sedikit tentang JQuery :

$ -> merupakan simbol  JQuery. {"id/class/tag"} -> Elemen/Slector pd Jquery .addclass("XXX") -> memberi perintah pada elemen

$("id/class/tag").addclass("XXX")

Intinya dari Fungsi JQuery akan mencari suatu elemen tertentu yang telah didefenisikan pada bagian body, kemudian akan mengeksekusi bagian elemen terssebut sesuai dengan perintah yang diberikan.

Sekian pengenalan Jquerynya semoga dari sedikit penjelasan diatas bisa saudara kembangkan lagi..

Read More