Formulář á la Windows v JavaScriptu

Pro zpřehlednění dlouhých formulářů na webových stránkách lze s výhodou použít prvku přebraného z dialogů Windows, takzvaných „Tabs“ neboli záložek. Tento článek vám ukáže, jak takový dialog se záložkami vytvořit pomocí relativně jednoduchého JavaScriptu. Za jednoduchost se ovšem platí, takže tento příklad pracuje pouze na prohlížečích Internet Explorer.

Začneme jako vždy funkční ukázkou. V ní naleznete dialog pro zadávání několika skupin osobních údajů: jména, adresy a koníčků. Příslušná formulářová pole jsou rozdělena do tří skupin, mezi nimiž lze přepnout kliknutím na „ouška“ jednotlivých záložek. Po kliknutí na tlačítko „OK“ se místo odeslání formuláře zobrazí obsah zadaných polí.

Obrázky a HTML kód

Nejprve si musíme připravit všechny potřebné obrázky pro „ouška“ záložek. Pro každou záložku potřebujeme 2 obrázky, jeden pro záložku „vpředu“, druhý pro záložku „vzadu“. Obrázky pojmenujeme 1_hi.gif až 3_hi.gif pro záložky vpředu a 1_lo.gif až 3_lo.gif pro záložky vzadu. Mohou vypadat například takto:

Ještě potřebujeme jeden obrázek s tenkou linkou (zde nazvaný dbt.gif), kterým doplníme horní část dialogu na plnou šířku. Obrázek může vypadat třeba takto:

Dalším krokem bude vytvoření HTML kódu pro formulář. Následující relativně dlouhý kód obsahuje většinou samé formátování tabulek, zajímavosti si vysvětlíme vzápětí:

<form>
<table border=“0″ cellpadding=“5″ cellspacing=“0″ bgcolor=“#C6C6C6″>
    <tr><td>
        <table border=“0″ cellpadding=“0″ cellspacing=“0″> <tr>
                <td align=“center“><font size=“2″><a href=“javascript:SwitchTo(1)“><img border=“0″ name=“t1″ src=“1_hi.gif“></a></font></td>
                <td align=“center“><font size=“2″><a href=“javascript:SwitchTo(2)“><img border=“0″ name=“t2″ src=“2_lo.gif“></a></font></td>
                <td align=“center“><font size=“2″><a href=“javascript:SwitchTo(3)“><img border=“0″ name=“t3″ src=“3_lo.gif“></a></font></td>
                <td width=“200″ align=“center“ background=“dbt.gif“><font size=“2″>&nbsp;</font></td>
        </tr></table>
    </td></tr>
    <tr><td height=“150″ valign=“top“ align=“left“>
        <span id=“s1″ style=“position:absolute;;visibility:visible“>
        <table border=“0″ cellpadding=“0″ cellspacing=“0″>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td>&nbsp;&nbsp;Jméno:&nbsp; </td><td><input type=“text“ name=“name“ size=“20″></td></tr>
            <tr><td>&nbsp;&nbsp;Příjmení:&nbsp; </td><td><input type=“text“ name=“surname“ size=“20″></td></tr>
        </table>
        </span>
        <span id=“s2″ style=“position:absolute;;visibility:hidden“>
        <table border=“0″ cellpadding=“0″ cellspacing=“0″>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td>&nbsp;&nbsp;Ulice a čp:&nbsp; </td><td><input type=“text“ name=“street“ size=“20″></td></tr>
            <tr><td>&nbsp;&nbsp;Město:&nbsp; </td><td><input type=“text“ name=“city“ size=“20″></td></tr>
            <tr><td>&nbsp;&nbsp;PSČ:&nbsp; </td><td><input type=“text“ name=“zip“ size=“8″></td></tr>
        </table>
        </span>
        <span id=“s3″ style=“position:absolute;;visibility:hidden“>
        <table border=“0″ cellpadding=“0″ cellspacing=“0″>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td>&nbsp;&nbsp;Oblíbené zvíře: &nbsp; </td><td><input type=“text“ name=“animal“ size=“20″></td></tr>
            <tr><td>&nbsp;&nbsp;</td><td><input type=“checkbox“ name=“beer“ value=“1″> Pijete pivo?</td></tr>
        </table>
        </span>
    </td></tr>
    <tr><td align=“right“><input type=“submit“ value=“ OK “ name=“Button“>&nbsp;</td></tr>
</table>
</form>

Tři části tohoto formuláře, reprezentující jednotlivé záložky, jsou zarámovány do elementů span, přičemž s využitím vlastnosti visibility je na počátku první záložka nastavena jako viditelná, ostatní dvě jsou skryté. Přepínání jednotlivých záložek zajišťuje JavaScriptová funkce SwitchTo(iTab), která je volána po kliknutí na „ouška“ záložek; tedy obrázky se jmény t1 až t3 (viz začátek kódu).

Použitý JavaScript

Funkce SwitchTo(iTab) skryje posledně zobrazenou záložku. Zobrazí tu, která se má zobrazit, a její číslo si poznamená do pomocné proměnné iLastTab. Kromě toho také příslušným způsobem změní obrázky na ouškách záložek. Samotné přepínání obrázků a záložek je odděleno do samostatných funkcí se jmény ChangeImage a ChangeTab. Celý uvedený JavaScript vložíme nejlépe do hlavičky stránky:

function ChangeTab(number,fVisible){
    var strAttr = fVisible ? „visible“ : „hidden“;
    if(document.all) {
        var obj = eval(„document.all.s“ + number);
        obj.style.visibility=strAttr;
    }
}
function ChangeImage(number,fVisible){
    var i = eval(„document.images(‚t“ + number + „‚)“);
    i.src= fVisible ? “+number+’_hi.gif‘ : “+number+’_lo.gif‘
}
var iLastTab = 1;
function SwitchTo(iTab) {
    ChangeTab(iLastTab,false);
    ChangeImage(iLastTab,false);
    iLastTab=iTab;
    ChangeTab(iTab,true);
    ChangeImage(iTab,true);
}

Pro správnou funkci příkladu je potřeba zabezpečit, aby byly jednotlivé záložky (elementy span) pojmenovány s1 až sn, kde „n“ je počet záložek. Obdobně pojmenujeme obrázky „oušek“ záložek t1 až tn.

A co na to kompatibilita?

Jak již bylo řečeno úvodem, tento příklad pracuje pouze na prohlížečích Internet Explorer. (Pozn. red.: A také v Opeře 6.) Vzhledem k tomu, že práce s elementy span je v každém prohlížeči značně odlišná (tedy nejenom mezi prohlížeči řady Internet Explorer a Navigator, ale i mezi jednotlivými verzemi Navigatoru, o jiných prohlížečích nemluvě), lze v tomto případě docílit trochu univerzálnějších řešení pouze za cenu několikanásobně složitějšího kódu. To ovšem neznamená, že takové řešení neexistuje. Určitě se mezi čtenáři najde dost takových, kteří se tento oříšek pokusí rozlousknout, k čemuž vám přeji hodně štěstí.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.