26.12.2009 Tabien toteutus jQuerylla

Lisäsin blogini oikeaan reunaan tabit viimeisimpien ja suosituimpien kirjoitusten sekä kommenttien näyttämiseen. Näin sain oikean reunan pituutta hieman lyhennettyä. Vaihtoehtoina toteutukselle oli jQuery UI tai custom-toteutus. Hylkäsin jQuery UI:n, koska en tarvitse sen muita ominaisuuksia ja karsitun scriptin kooksikin tuli 19 kt.

Skriptistä tuli varsin yksinkertainen ja monikäyttöinen. Samalla skriptillä voi lisätä useamman tabi-elementin sivulle. Lisäksi sen pitäisi käyttäytyä hyvin myös käyttäjillä, joilla Javascript ei syystä tai toisesta ole käytössä. Mikäli Javascript ei ole päällä, toimivat tabien linkit normaaleina ankkurilinkkeinä. Tabien linkit voivat viitata nykyiselle tai jollekin toiselle sivulle.

Javascript

Toteutus hyödyntää jQuerya, joten se on pakollinen.

function tabsUI( tabContainer )
{
    this.tabContainer = tabContainer;

    this.hideTabContent = function()
    {
        $( this.tabContainer + ' .tabs a').each( function()
        {
            var elClass = $( this ).attr( 'class' );
            if ( elClass != 'active' )
            {
                var elID = $( this.hash ).get(0);
                $( elID ).hide();
            }
        });
    }

    this.hideTabContent();

    var thisObj = this;

    $( this.tabContainer + ' .tabs a' ).click(function(e)
    {
        e.preventDefault();
        $( thisObj.tabContainer + ' .tabs a.active' ).removeClass( 'active' );
        $( this ).addClass( 'active' );
        var hash = $( this.hash ).get(0);
        $(hash).show();
        thisObj.hideTabContent();
    });
}

Tabit saadaan toimintaan luomalla uusi tabsUI-objekti. Parametriksi annetaan tab-elementtejä ympäröivän elementin ID.

new tabsUI( '#tabbedListing' );

Tabien HTML-rakenne

Toteutuksen HTML näyttää seuraavalta. Pakollisia elementtejä ovat koko toteutusta ympäröivä elementti, jolla on ID sekä tabien href-attribuutilla #ankkuri, joka viittaa tabin sisältöjen ID-attribuuttiin. Lisäksi tabeja ympäröivällä elementillä täytyy olla CSS-luokkana tabs. Tabi, jolla on CSS-luokka active, jätetään oletuksena näkyviin.

<div id="tabbedListing">

    <div class="tabs">
        <a href="#tab1" class="active">Tab 1</a>
        <a href="#tab2">Tab 2</a>
        <a href="#tab3">Tab 3</a>
    </div>

    <div id="tab1">
        <!-- tab 1 content here -->
    </div>

    <div id="tab2">
        <!-- tab 2 content here -->
    </div>

    <div id="tab3">
        <!-- tab 3 content here -->
    </div>

</div>

Yhteenveto

Monimutkaisempien tabien toteutukseen jQueryn UI Tabs on varmasti mainio, sillä se sisältää valmiiksi tuen esimerkiksi Ajax-sisällöille, välimuistille ja erilaisille animoinneille ja efekteille. Perustabeihin riittää kuitenkin yksinkertaisempikin toteutus.

Aihe: Javascript | Trackback | Kommentit RSS | Jätä kommentti »
Tagit: HTML & CSS, Javascript, jQuery, jQuery UI