Simple Tab JQuery Plugin

Simple Tab is a JQuery plugin to transform a group of elements into a tab widget.

Simple Tab adalah plugin JQuery untuk mengubah sekelompok elemen menjadi sebuah widget tabulasi:

Lihat Demo Unduh Plugin

Dasar Penggunaan

Berbeda dengan plugin tabulasi yang lainnya, plugin ini relatif lebih mudah dalam hal implementasi karena Anda tidak akan lagi direpotkan dengan pembuatan markup tabulasi yang rumit. Biarkan JQuery yang melakukan semuanya, sementara yang perlu Anda lakukan hanyalah menciptakan beberapa elemen <div> di dalam sebuah kontainer saja seperti ini:

<div id="tab">
  <div data-tab="Tab-1">Content 1</div>
  <div data-tab="Tab-2">Content 2</div>
  <div data-tab="Tab-3">Content 3</div>
  <div data-tab="Tab-4">Content 4</div>
</div>

Setiap nilai atribut data-tab nantinya akan berubah menjadi elemen tab di atas tubuh tab.

Selanjutnya adalah kode CSS dasar:

.simpleTab {
  width:400px;
  margin:50px auto;
  color:black;
  text-align:left;
}

.simpleTab ul.tab-wrapper {
  margin:0;
  padding:0;
  height:30px;
}

.simpleTab ul.tab-wrapper li {
  margin:0;
  padding:0;
  float:left;
  list-style:none;
  display:inline;
}

.simpleTab ul.tab-wrapper li a {
  margin:0 2px 0 0;
  display:block;
  font:normal bold 12px/30px Arial,Sans-Serif;
  padding:0 15px;
  background-color:black;
  color:white;
  text-decoration:none;
  border:1px solid black;
  border-bottom:none;
  position:relative;
  z-index:1;
  outline:none;
}

.simpleTab .tab-content {
  clear:both;
  padding:10px;
  background-color:yellow;
  border:1px solid black;
  position:relative;
  z-index:2;
  top:-1px;
  height:170px;
}

.simpleTab ul.tab-wrapper li a.activeTab {
  background-color:yellow;
  color:black;
  z-index:3;
}

Setelah kerangka tercipta, seleksi grup elemen yang Anda buat dan terapkan plugin SimpleTab seperti ini:

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/simpletab.js"></script>
<script>
$(function() {
    $('#tab').simpleTab();
});
</script>

Pengaturan Lanjutan

Ada beberapa opsi tambahan di dalamnya yang bisa Anda atur sesuai dengan kebutuhan:

$('#tab').simpleTab({
    active: 1,
    fx: null,
    showSpeed: 400,
    hideSpeed: 400,
    showEasing: null,
    hideEasing: null
});

Opsi	Keterangan
active	Digunakan untuk menentukan tab ke berapa yang akan ditampilkan saat pertama kali
fx	Digunakan untuk menentukan tipe efek animasi saat pergantian tab terjadi. Ada tiga macam efek lanjutan, yaitu "fade", "slide" dan "fancyslide". Jika tipe efek tidak ditentukan, pergantian tabulasi akan berjalan tanpa efek animasi
showSpeed	Digunakan untuk menentukan kecepatan pembukaan konten tab
hideSpeed	Digunakan untuk menentukan kecepatan penutupan konten tab
showEasing	Digunakan untuk menentukan tipe easing saat pembukaan konten tab
hideEasing	Digunakan untuk menentukan tipe easing saat penutupan konten tab.