Příklad JavaScriptem "poháněných" záložek

Because tabs matters.

Struktura záložek je definována ve zdrojovém kódu s pomocí blokových elementů div. Tato struktura je uložena v nadřazeném elementu s atributem id a jeho jednoznačnou hodnotou.

Záložky lze přesouvat (lze explicitně povolit, nebo zakázat) a vnořovat do sebe. Na stránku je možné umístit neomezený počet záložek.

Implementační jazyk je JavaScript a záložky byly otestovány na prohlížečích: Mozilla Firefox 3.0.7, Google Chrome 4.0, Opera Browser 9.6.4, Microsoft Internet Explorer 6 a 7, Konqueror 4.2.00 a na prohlížečích s jádrem Webkit.

V prohlížečích MS Internet Explorer je omezení týkající se použití událostí onmousemove při přesunu záložek. Takže se záložky nepřesouvají průběžně, ale teprve při vymáčknutí levého tlačítka myši nad cílovou záložkou.

CSS kód záložek je založen na postupu uvedeném v článku:

BOWMAN, Douglas. Sliding Doors of CSS [online]. Poslední aktualizace 20. 10. 2003 [cit. 2009-03-11].
Dostupné z WWW < http://www.alistapart.com/articles/slidingdoors/>.

Návod k použití

Aby bylo možné záložky používat, je třeba do hlavičky stránky přidat následující deklarace. A je nutné přiložit adresář images s obrázky záložek.

        <link rel="stylesheet" media="screen" href="css/tabpanel.css" type="text/css" />
        <script type="text/javascript" src="js/tabpanel.js"></script>
    

Struktura záložek se v (X)HTML kódu vytvoří podle schématu:

        <div id="tabform1" class="tab-container">
           <div class="tab-container tab" title="Volitelný titulek">
                    ... jakýkoliv obsah, včetně dalšího kontejneru se záložkami
           </div>
           <div class="tab-container tab">
             <h1>Titulek záložky</h1>
        
                    Místo atributu name je možné definovat titulek
                    prvním výskytem elementu h1. Značku tohoto elementu
                    lze změnit v atributech třídy.
           </div>        
           <div class="tab-container shared">
                    ... sdílená část formuláře. Z tohoto elementu se nevytváří záložka.
           </div>
        </div>
    

Po vytvoření takové struktury stačí zavolat tento kód jazyka JavaScript.

        <script type="text/javascript">
            var tabPanel1 = new tabPanel('tabform1', true, 0, true, true);
        </script>
    

Jednotlivé parametry funkce: Object tabPanel(idContainer, setupAfterInstantiate, defaultSelected, preserveHs, tabMovable) mají význam:

• idContainer - string, hodnota atributu id obalujícího kontejneru
• setupAfterInstantiate - true || false, pokud je true, tak se v konstruktoru objektu automaticky provede instalace záložek, pokud je false, tak je nutné instalaci zařídit ručním voláním metod objektu (viz. zdrojový kód).
• defaultSelected - int, index záložky (indexováno od 0), která má být vybrána po vytvoření záložek. Index odpovídá pořadí, v jakém jsou uvedeny v (X)HTML kódu.
• preserveHs - true || false, pokud je true, tak jsou zachovány nadpisy vyznačující titulek záložky, tzn. že současně slouží jako nadpis v panelu záložky. Pokud je false, tak jsou tyto nadpisy označeny.
• tabMovable - true || false, pokud je true, tak lze záložky přesouvat mezi sebou držením tlačítka myši a tažením.

Při ručním instalaci lze nastavit více atributů objektu (použité třídy, atp.). Viz. zdrojový kód konstruktoru.

Autor

Jiří Pagáč
pagac (z@vináč) pagac (tečka.) cz
Naprogramováno v rámci předmětu WAP na FIT VUT BRNO ve školním roce 2008/2009.

Chyby hlaste, s detailním popisem, na můj e-mail.

Licence

Záložky je možné využívat jak pro nekomerční, tak i komerční účely a je možné zdrojový kód libovolně upravovat, pokud zůstane zachována hlavička ve zdrojovém kódu odkazující na původní projekt (tento).

Pokud vám to nebude vadit, tak mi dejte vědět, jak se vám líbí a kde je používáte. Tyto informace mám jen pro svou osobní statistiku, nijak je dále neuchovávám a nezpracovávám

Demo

Stažení

TabPanel v.2009-03-11

led: Sat 30 Jan 2010 2:00:00 PM CET