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. Setelah mendapatkan sedikit bantuan dari forum, pada akhirnya Saya berhasil menyelesaikan plugin ini untuk ditambahkan dalam koleksi:

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 {
  margin:10px auto;
  color:black;
  text-align:left;
}

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

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

.simpleTab ul.tab-wrapper li a {
  margin:0px 2px 0px 0px;
  display:block;
  font:bold 12px/30px Arial,Sans-Serif;
  padding:0px 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 Simple Tab seperti ini:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/simpletab.js"></script>
<script type="text/javascript">
$(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.