Pemrograman

Bahasa

Framework

Peralatan

Info

Panduan Membuat tab dengan jQuery

– 09 March 2014

Tab yang akan dibuat nantinya dapat dimanfaatkan untuk widget blog. Tab ini berisi informasi akun media sosial, seperti like box facebook, google+, twitter, dan lain-lain. Menggunakan tab dapat menghemat ruang atau tempat. Dalam satu widget saja, kita dapat menyimpan lebih dari satu informasi.

Desain Tab

Agar dapat mengetahui bagaimana tab yang akan dibuat, Saya mendesainnya terlebih dahulu. Desain akan mempermudah kita dalam membuat kodenya. Desain gadget blog dengan Inkscape

Membuat Kode HTML, CSS, dan jQuery

Membuat tab seperti desain di atas, dapat menggunakan kode HTML dan CSS saja. Namun, untuk membuat tab hidup atau berfungsi, maka perlu menambahkan skrip jQuery. Pustaka jQuery yang digunakan dalam tab ini adalah jquery-2.1.0.min.js.

Kode HTML

<!DOCTYPE html>
<html>
<head>
   <title>JQuery tabs</title>
   <script type='text/javascript' src='jquery.js'></script>
   <script type='text/javascript' src='jqtab.js'></script>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
   <div class='sc-btn'>
      <a href='javascript:void(0)' name='fb' class='aktif'>fb</a>
      <a href='javascript:void(0)' name='tw' class='non-aktif'>tw</a>
      <a href='javascript:void(0)' name='gp' class='non-aktif'>g+</a>
      <a href='javascript:void(0)' name='rss' class='non-aktif'>rss</a>                     
   </div>
   <div class='isi'>
      <div name='fb'>fesbuk</div>
      <div name='tw'>twitter</div>
      <div name='gp'>google+</div>
      <div name='rss'>rss feed</div>
   </div>
</body>
</html>
Terdapat dua tag div khusus di dalam kode di atas. Tag div yang pertama dengan kelas .sc-btn berfungsi untuk menampung tombol-tombol sosial media, dalam tag div ini terdapat tombol berupa link. Sedangkan tag div dengan kelas .isi berfungsi untuk menampung isi tab. Terdapat juga empat tag div di dalam tag div isi.

Untuk menghubungkan tombol dengan div isi, maka harus diberkan atribut nama yang sama antara elemen tombol dan elemen isi (div isi). Contohnya <a href='javascript:void(0)' name='fb' class='aktif'>fb</a> akan berhubungnan dengan div  <div name='fb'>fesbuk</div> karena memiliki atribut nama yang sama yaitu fb
Tampilan naskah kode HTML di Geany IDE (Linux)

Kode CSS

Kode CSS berfungsi untuk merapikan tampilan elemen. Memperbaiki tata letak, memberikan warna dan sebagainya.
.sc-btn a{
   background: silver;
   padding: 5px;
   margin-right:5px;
 }
.non-aktif{
   opacity: 0.5;
 }
.aktif{
   opacity: 1.0;
} 
.aktif:before{
   content: "";
   position:absolute;
   width:0;
   border-width: 0 8px 8px 8px;
   border-style: solid;
   border-color: #bbb transparent;
   margin-top: 26px;
   margin-left: 0px;}
.isi {
   margin-top: 13px;
   border-top: 1px solid #bbb;
 }
Kelas .sc-btn berfungsi untuk menata posisi dan tampilan tombol. Kelas .non-aktif berfungsi untuk menata tampilan tombol saat tidak aktif. Kelas .aktif berfungsi untuk menata tampilan tombol saat aktif, sementara .aktif:before berfungsi untuk membuat bentuk segitiga sebagai penunjuk tombol yang sedang aktif. Kelas .isi untuk menata letak elemen div isi.
penampakan jQuery tab

Kode jQuery

Skrip jQuery untuk membuat tab menjadi berfungsi.
$(document).ready(function(){
    // sembunyikan semua div isi
    $('.isi div').hide();
 
    // tampilkan hanya div isi pada anak pertama
    $('.isi div:first').show();
 
    // saat tombol diklik 
    $('.sc-btn a').click(function(){
 
     // isi attribut class sema tombol dengan nilai 'non-aktif'
 $('.sc-btn a').attr('class','non-aktif');
 
 // isi attribut class tombol yang sedang aktif dengan nilai 'aktif'
 $(this).attr('class','aktif');
 
 // buat variabel isi, untuk menampung identitas div isi
 var isi = '.isi div[name="' + this.name + '"]';
 
 // sembunyikan semua div isi
 $('.isi div').hide();
 
 // tampilkan div isi dengan identitas yang telah didapatkan
 $(isi).slideDown('fast');
 
    });
 
});

Hasil




Semua kode-kode di atas dapat diunduh di Google Code.