Obrázková zatržítka pomocí JavaScriptu

27. března 2001

•

Pokud je naším úkolem vytvořit formulář s několika hodnotami stylu ano/ne (zapnuto/vypnuto), většinou k tomu použijeme sérii checkboxů neboli „zatržítek“. Následující skript ukazuje, jak lze místo zatržítek použít elegantně vypadající zamačkávací tlačítka podobná nástrojovému pruhu ve starších verzích Windows. Skript je určen pro mírně pokročilé.

Jako vždy si nejprve předvedeme malou ukázku. Sérii čtyř tlačítek v následujícím formuláři můžete pomocí myši zapínat/vypínat podobně, jako u klasického checkboxu. Stiskem OK si ověříte nastavení tlačítek (editační pole je ve formuláři pouze „pro ozdobu“):

Skript, kterým jsme tlačítka vytvořili a obsluhovali, využívá několika mírně pokročilých technik, jako je překlápění obrázků a práce s objekty. Můžete jej však použít „tak jak je“, i pokud jste úplnými začátečníky. V dalším textu budeme pruh se zamačkávacími tlačítky pro jeho podobnost s nástrojovým pruhem Windows nazývat „Toolbar“.

Toolbar vytvoříme jako nový objekt pomocí konstruktoru:

function createToolbar( objectName, formName ) {
    this.length = 0
    this.objectName = objectName
    this.formName = formName
    this.name = new Array
    this.status = new Array
    this.HiImages = new Array
    this.LoImages = new Array
    this.Add = toolbarAdd
    this.Draw = toolbarDraw
    this.Click = toolbarClick
}
var myToolbar = new createToolbar( "myToolbar", "Demo" );

Parametry na vstupu konstruktoru jsou objectName, určující jméno proměnné, která obsahuje právě vytvořený Toolbar (tuto poněkud nestandardní konstrukci využijeme později při vytváření handleru události onClick na jednotlivých tlačítkách toolbaru), druhým parametrem je formName, který určuje jméno formuláře, v němž bude později Toolbar umístěn.

Úkolem popsaného konstruktoru je především inicializace členských proměnných objektu, převážně polí, jejichž význam je následující:

length – určuje počet tlačítek Toolbaru
objectName, formName – uchovávají paramerry předané konstruktoru, viz. výše
name – pole se jmény jednotlivých tlačítek
status – pole se stavem jednotlivých tlačítek (zapnuto/vypnuto)
HiImages, LoImages – do těchto polí vytvoříme objekty typu Image, obsahující všechny obrázky použité pro vzhled Toolbaru. Je to typický příklad techniky používané pro překlápění obrázků

Zbylé řádky konstuktoru definují metody objektu – jejich kód si ukážeme níže.

Nyní do objektu myToolbar přidáme tlačítka. Učiníme tak voláním metody Add…

myToolbar.Add( "RecycleBin", "binhi.gif", "binlo.gif" );
myToolbar.Add( "Image", "imghi.gif", "imglo.gif" );
myToolbar.Add( "MSIE", "msiehi.gif", "msielo.gif" );
myToolbar.Add( "Tools", "toolhi.gif", "toollo.gif" );

…jejichž zdrojový kód vypadá takto:

function toolbarAdd( name, hiimg, loimg ) {
    this.length++
    this.name[this.length] = name
    this.status[this.length] = false
    this.HiImages[this.length] = new Image();
    this.HiImages[this.length].src = hiimg;
    this.LoImages[this.length] = new Image();
    this.LoImages[this.length].src = loimg;
}

Metoda Add v podstatě pouze plní členské proměnné objektu myToolbar, jejichž význam jsme si popsali výše. Druhý a třetí parametr určuje cestu k souborům s obrázky tlačítek ve vystouplém a stlačeném stavu.

V příslušném místě HTML stránky vytvoříme formulář, jehož jméno se musí shodovat se jménem, předaným konstruktoru objektu myToolbar. V rámci tohoto formuláře vytvoříme i samotnou vizuální prezentaci Toolbaru, a to voláním jeho metody Draw. Zde je HTML kód formuláře i volání metody Draw:

<form name="Demo" onSubmit="ShowResults(this)">
<p>
<script>
    myToolbar.Draw()
</script>
</p>
<p>
    <input type="text" name="nazev" size="20">
    <input type="submit" value="OK" name="B1">
</p>
<p> </p>
</form>

Kód metody Draw:

Metoda Draw vytvoří jednořádkovou tabulku; v každé buňce tabulky pak obrázek, zarámovaný do HTML odkazu. U obrázku neurčujeme jeho velikost – předpokládáme, že obrázky (předané jako parametry metodě Add) jsou všechny stejné velikosti. Jméno obrázku je určeno prvním parametrem metody Add, při klinutí na obrázek (potažmo odkaz) je volána metoda Click objektu Toolbar (zde využijeme jméno proměnné, které jsme předali jako první parametr konstruktoru objektu). Dále kromě obrázku vytvoříme skryté pole formuláře, opět s názvem odpovídajícím prvnímu parametru metody Add. Toto pole je nutné k provázání dat o stavu tlačítka (stlačeno/uvolněno) s formulářem.

Metoda Click, volaná po stisku příslušného tlačítka Toolbaru, vypadá takto:

function toolbarClick( index ) {
    this.status[index] = !this.status[index];
    var field = eval(‚document.forms["‘ + this.formName + ‚"].‘ + this.name[index] );
    if(this.status[index]) {
        document.images[this.name[index]].src=this.LoImages[index].src;
        field.value = 1
    } else {
        document.images[this.name[index]].src=this.HiImages[index].src;
        field.value = 0
    }

Metoda Click má na starost tři úkoly, za prvé invertovat interní příznak o stisku/uvolnění tlačítka v členské proměnné objektu Toolbar status, za druhé zobrazit podle stavu tlačítka odpovídající obrázek a za třetí provázat stav tlačítka s adekvátním skrytým polem formuláře (jež nám vytvořila metoda Draw).

Kód samotného Toolbaru je tím kompletní. V obvyklé aplikaci bychom vyplněný formulář odeslali serverovému skriptu nebo komponentě, v tomto příkladě byla pro událost odeslání formuláře (událost onSubmit) použita pomocná JavaScriptová funkce ShowResults, kterážto zobrazuje hodnoty pro nás zajímavých polí formuláře (ano, jsou to ona skytá pole vytvořená metodou Draw). Zde je – pro úplnost – její kód (ještě jednou připomínám, že pro funkčnost samotného Toolbaru není potřeba):

function ShowResults( theForm ) {
    with(theForm) {
        alert( "Hodnoty poli:\n RecycleBin="+RecycleBin.value+"\n Image="+Image.value+"\n MSIE="+MSIE.value+"\n Tools="+Tools.value)
    }
}

A to je vše k dnešnímu, tentokrát poněkud hutnějšímu, příkladu. Určitě najdete celou řadu možností pro další vylepšení, namátkou definované rozestupy mezi tlačítky, víceřádkový Toolbar, kontextová nápověda při „najetí“ myší nad tlačítko a další.

Přeji vám příjemný den.