Membuat sebuah website diperlukan kesabaran dalam hal mendesign tampilan Awal (Front end) agar pengunjung tidak merasan bosan dan akan kembali lagi keesokan harinya, untuk mempercantik website yang telah kalian buat biasanya tidak lepas dari peran javascript agar website telihat lebih professional. Salah satu Component yang biasanya digunakan pada sebuah website untuk membuat halaman group dengan memanfaatkan Tabs dengan Tabs website akan telihat lebih Indah dengan Tabs juga dapat menghemat sebuah halaman.

Tabs banyak digunakan untuk menggroupkan sebuah data yang begitu banyak dan ingin di tampilkan pada satu halaman yang sama, dengan ini Tabs akan sedikit menggunakan ruang pada website kita. Pada artikel kali ini kita akan membuat Tabs yang simple namun tetap menampilkan sisi keindahan, Tabs yang akan kita bangun disini tetap akan memanfaatkan jquery sebagai framework javascript. Plugin Tabs yang kita buat masih sederhana akan tetapi sudah cukup untuk memenuhi kebutuhan, plugin ini jangan di bandingkan dengan jqueryUI yang sudah mendukung ajax dalam pengambilan tiap halaman (mudah2an kedepannya akan dapat melakukan hal tersebut).

1. Buat  halaman seperti dibawah ini beri nama index.html

<html>
    <head>
        <title>Isoweb jquery Tabs</title>
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" /> // file css
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> // menggunakan jquery versi Online
        <script type="text/javascript" src="assets/js/isoweb.tabs.js"></script> // Plugin isoweb Tabs
        <script type="text/javascript">
            $(function(){
                $.isoTabs({ // cara menggunakan plugin Isoweb Tabs
                     click    : "#tabs-nav a"
                    ,list    : "#list-tabs"
                    ,show    : "#tabs1"
                });

                Atau dengan cara

                $.isoTabs(); // Simple sekali bukan cukup menuliskan 1 baris javascript

            });
        </script>
    </head>
    <body>
        <ul id="tabs-nav" class="tabs-nav">
            <li><a href="#tabs1">Populer</a></li>
            <li><a href="#tabs2">Terkini</a></li>
            <li><a href="#tabs3">Komentar</a></li>
            <li><a href="#tabs4">Tags</a></li>
        </ul>
        <div class="list-tabs" id="list-tabs">
            <div id="tabs1">
                <ul>
                    <li><a href="http://www.iso.web.id" target="_blank">www.iso.web.id</a></li>
                    <li><a href="http://www.wolusiji.com" target="_blank">http://www.wolusiji.com</a></li>
                    <li><a href="#">List 1</a></li>
                    <li><a href="#">List 2</a></li>
                </ul>
            </div>
            <div id="tabs2">tabs2</div>
            <div id="tabs3">tabs3</div>
            <div id="tabs4">
                <a href="#" style="font-size:18px">Surabaya</a>
                <a href="#" style="font-size:12px">Jatim</a>
                <a href="#" style="font-size:15px">vaksin</a>
            </div>
        </div>
    </body>
</html>

2. Kemudian buat file css seperti dibawah

ul.tabs-nav{margin:0 0 0 5px;padding:0;height:28px;}
ul.tabs-nav li{float:left;padding:0;margin:0;list-style-type:none;}
ul.tabs-nav a{float:left;font-size:13px;font-weight:bold;display:block;padding:5px 15px;text-decoration:none;border-bottom:0px;border-right:1px solid #ECEDE8;height:18px;color:#333;outline:0;background:url(../image/bg-title.jpg) repeat-x;}
ul.tabs-nav a:hover{background-color:#FCD2D2;color:#7a0303;}
ul.tabs-nav a.active{background:#FFF;border-bottom:1px solid #FFF;border-right:1px solid #ECEDE8;color:#7a0303;cursor:default;}
.css-panes div{display:none;border:1px solid #666;border-width:0 1px 1px 1px;min-height:150px;padding:15px 20px;background-color:#ddd;font-weight:bold;}
.list-tabs{border-top:1px solid #D8D8D8;padding:0 8px;background-color: #FFF;}
.list-tabs ul{margin:0;padding:0!important;}
.list-tabs li{list-style:none;background: url(../image/icon-bullet.gif) no-repeat left center;padding:0 0 0 15px;}
.list-tabs a{color:#2D4D89;text-decoration:none;font-size:12px;}
.list-tabs a:hover{color:#BB0000;}

CSS hanya digunakan untuk mempercantik tampilan Tabs yang kita buat.

3. kita buat Plugin sederhana untuk menangani event pada saat klik pada header Tabs buat dengan nama isoweb.tabs.js

/*
 * Date     : 14-12-2012
 * Author    : Airlangga bayu seto
 * Email    : [email protected]
 * Website    : http://www.iso.web.id
 */

 
(function($){
    $.isoTabs = function(option){
        var opsi = $.extend({ // extend nama variabel yang dikirim
             click : "#tabs-nav a" // default Key click bila dikosongi
            ,list  : "#list-tabs" // default key List bila dikosongi
            ,show  : "#tabs1" // default key show bila dikosongi
        }, option);
       
        var list = opsi.list.substr(1) // deklarasi variabel list dan kurangi 1 karaker dari depan
        var click = opsi.click.substr(1) // deklarasi variabel click dan kurangi 1 karaker dari depan
       
        $(opsi.click).click(function(){ // ketika ada event klik pada header Tabs
            var hr = $(this).attr("href"); // ambil value dari attribute href
            $("#"+click).removeClass("active"); // hapus class active pada semua header Tabs
            $("#"+ list+" div").hide(); // hidden semua content Tabs
            $("#"+list+" "+hr).show(); // Tambilkan Content sesuai object yang di klik
            $(this).addClass("active"); // sisipkan class active pada header Tabs
           
            return false;
        });
       
        $("#list-tabs div").hide(); // hidden semua content Tabs
        $(opsi.show).show(); // Tampilkan content saat pemanggilan plugin
        $("#tabs-nav a[href="+opsi.show+"]").addClass("active"); // sisipkan class active default header Tabs
    }
})(jQuery);

 

Penggunaan pun sangat mudah, tidak ribet.

Apa kegunaan Json Key Click, List dan Show saat pemanggilan plugin isowebTabs

Click Maksudnya disini Key yang digunakan sebagai tolak ukur Klik untuk menjalankan suatu event

List Maksudnya pendeklarasian Content yang akan ditampilkan

Show Adalah Content yang pertama kali ditampilkan secara default, Misalkan kalian ingin menampilkan Tab ke 2 secara otomatis plugin akan menampilkan Tab bagian ke 2 decara default.

Bila kalian menggunakan Tabs diatas tanpa merubah susunan kode HTML kalian cukup memanggil dengan $.isoTabs(); sudah cukup mewakili karena secara default sudah dideklarasikan.

Mengapa Tabs ini dibuat? kan sudah banyak Tabs2 yang lain, memang banyak sekali plugin2 tabs bila kalian search google, Tapi Plugin ini saya buat khusus untuk sobat isoweb untuk mempermudah pengcodean.

Kedepannya isoweb akan mempunyai Archive sendiri untuk masalah pencodean, agar sobat semua dapat membantu sobat isoweb daam hal pengcodean.

 

Untuk Archive File silahkan ikuti link dibawah

DOWNLOAD