Simple Tab is a jQuery plugin to transform a group of elements into a tab widget.
Simple Tab ialah plugin jQuery untuk mengubah sekelompok elemen menjadi sebuah widget tabulasi:
Dasar Penggunaan
Berbeda dengan plugin tabulasi yang lainnya, plugin ini relatif lebih gampang dalam hal implementasi alasannya Anda tidak akan lagi direpotkan dengan pembuatan markup tabulasi yang rumit. Biarkan jQuery yang melaksanakan semuanya, sementara yang perlu Anda lakukan hanyalah membuat beberapa elemen <div> di dalam sebuah kontainer saja menyerupai 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 bermetamorfosis elemen tab di atas badan tab.
Selanjutnya ialah arahan CSS dasar:
.simpleTab { width:400px; margin:50px auto; color:black; text-align:left; } .simpleTab .tab-wrapper { margin:0; padding:0; height:30px; } .simpleTab .tab-wrapper li { margin:0; padding:0; float:left; list-style:none; display:inline; } .simpleTab .tab-wrapper 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 .tab-wrapper a.activeTab { background-color:yellow; color:black; z-index:3; }Setelah kerangka tercipta, seleksi grup elemen yang Anda buat dan terapkan plugin SimpleTab menyerupai ini:
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/simple-tab.min.js"></script> <script> $(function() { $('#tab').simpleTab(); }); </script>Pengaturan Lanjutan
Ada beberapa opsi pemanis di dalamnya yang dapat Anda atur sesuai dengan kebutuhan:
$('#tab').simpleTab({ active: 1, fx: null, showSpeed: 400, hideSpeed: 400, showEasing: null, hideEasing: null });| Opsi | Keterangan |
|---|---|
| active | Digunakan untuk memilih tab ke berapa yang akan ditampilkan dikala pertama kali |
| fx | Digunakan untuk memilih tipe efek animasi dikala 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 memilih kecepatan pembukaan konten tab |
| hideSpeed | Digunakan untuk memilih kecepatan penutupan konten tab |
| showEasing | Digunakan untuk memilih tipe easing dikala pembukaan konten tab |
| hideEasing | Digunakan untuk memilih tipe easing dikala penutupan konten tab. |