Obrázková zatržítka pomocí JavaScriptu
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:
|
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…
|
…jejichž zdrojový kód vypadá takto:
|
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:
|
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:
|
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):
|
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.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
10 nejpopulárnějších programovacích jazyků a jejich využití
9. listopadu 2023 -
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
AI v programování: Jak používat GitHub Copilot (část 2)
19. února 2024
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024