Catatan Hadi : Membuat Menu Accordion Pada Website

Menu Accordion merupakan teknik yang ada pada JQuery UI yang digunakan untuk mengelompokan kontent-kontent pada website berdasarkan kategori yang ada, selain itu dengan menggunakan menu accordion akan menghemat space pada website anda, dan website anda akan lebih terstruktur. Sebagai contoh disini kita akan membuat menu accordion, dimana pada menu itu terdapat 3 buah fungsi, yaitu profile, polling, dan komentar. dimana setiap menu bisa kita pindahkan posisinya dengan melalui drag pada menu.

Bayangkan jika kita tidak menggunakan menu accordion ini, dan space website kita sudah penuh. mungkn anda akan bingung meletakan fungsi profle, polling dan komentar ini dimana.

Pertama buatlah program untuk menampilkan fungsi profile, polling, dan kirim komentar.

<html>
<head>
 <title>Algoritma-cyber.blogspot.com | MenuAccordion</title>
</head>
<body bgcolor="black">
<form action="aksi.php">
<center>
<h2><font color="white">PROGRAMMING AREA</font></h2>
<div id="accordion" style="width: 350px;">
 <div>
  <h3><b><a href="algoritma-cyber.blogspot.com">PROFILE</a></b></h3>
  <div><br>
   <img src="gambar\65889_4264212530088_621816755_n.jpg"
   width="100"><br>Hadi Kurniawan seorang alumni dari IPB,
   dan sekarang sedang mengeleguti bidang web programming,networking, dan Hacking</p>
  </div>
 </div>
 <div>
  <h3><a href="algoritma-cyber.blogspot.com">POLLING</a></h3>
  <div>Penilaian mengenai web ini<br>
   <input type="radio" name="bagus">Bagus<br>
   <input type="radio" name="buruk">Buruk<br>
   <input type="radio" name="standar">Standard<br>
   <input type="submit" value="kirim">
  </div>
 </div>
 <div>
  <h3><a href="algoritma-cyber.blogspot.com">KIRIM KOMENTAR</a></h3>
  <div><table>
    <tr><td>Nama</td> <td>:</td> <td><input type="text" name="nama"></td></tr>
    <tr><td>Komentar</td><td>:</td><td> <textarea name="komentar"></textarea></td></tr>
   </table>
   <input type="submit" value="kirim">
   <input type="reset" value="hapus">
  </div>
 </div>
</div>
</body>
</html>

Jika anda jalankan program tersebut,

akan keluar output seperti gambar dibawah ini

akan keluar 3 menu yaitu: profile, polling, dan kirim komentar

untuk menambahakn menu accordion pada 3 fungsi tersebut.

pertama anda harus memiliki 7 library JQuery terlebih dahulu, yang dapat anda download melalui link dibawah ini

DOWNLOAD DISINI

password: hadi

setelah itu tambahakn skrip untuk memanggil jquery tersebut.
tambahakn tepat dibawah kode <head>

<link rel="stylesheet" href="jquery/base/jquery.ui.all.css">
 <script src="jquery/jquery.js"></script>
 <script src="jquery/jquery.ui.core.js"></script>
 <script src="jquery/jquery.ui.widget.js"></script>
 <script src="jquery/jquery.ui.accordion.js"></script>
 <script src="jquery/jquery.ui.mouse.js"></script>
 <script src="jquery/jquery.ui.sortable.js"></script>

selanjutnya tambahkan javascript berikut ini tepat dibawah skrip untuk memanggil jquery

<script type="text/javascript">
 $(function() {
  var stop = false;
  $( "#accordion h3" ).click(function( event ) {
   if ( stop ) {
    event.stopImmediatePropagation();
    event.preventDefault();
    stop = false;
   }
  });
  $( "#accordion" )
   .accordion({
    header: "> div > h3"
   })
   .sortable({
    axis: "y",
    handle: "h3",
    stop: function() {
     stop = true;
    }
   });
 });
 </script>

sekarang coba anda jalankan programny lagi,
jika berhasil, maka akan keluar output seperti gambar dibawah ini:

Jika anda klik polling dan kirim komentar, maka akan tampil seperti ini:

Sekarang coba anda drag menu kirim komentar kepaling atas,
maka menu komentar tersebut akan pindah menjadi posisi pertama

Catatan Hadi

Pages

Jumat, 08 Maret 2013

Membuat Menu Accordion Pada Website

Tidak ada komentar:

Posting Komentar