Třístavový checkbox pomocí JavaScriptu
V některých HTML formulářích lze výhodně použít jednoho z prvků uživatelského rozhraní, které zavedly Windows 95 – třístavového zatržítka neboli checkboxu. Tento článek ukazuje způsob, jak takový formulářový prvek nasimulovat pomocí JavaScriptu.
V následujícím formuláři je uvedena trojice třístavových checkboxů. Kromě klasických dvou hodnot („zatržen“ a „prázdný“) cykluje checkbox ještě přes třetí hodnotu „zatržen šedivý“ – tato hodnota se ve Windows používá typicky při měnění vlastností více objektů, kdy každý z objektů má vstupní vlastnost nastavenu jinak. Po stisku tlačítka „OK“ se zobrazí potvrzovací okénko s výpisem hodnot všech tří checkboxů.
Zdrojový HTML kód jednoduchého formuláře může vypadat nějak takto:
|
Formulář se jmenuje „test“ a v jeho těle je na příslušných místech volána funkce Create3State, která, jak už název napovídá, vytváří 3stavový checkbox. Funkce přijímá trojici parametrů, prvním je jméno formuláře, v němž se má checkbox nacházet, druhým je jméno vytvářeného prvku a třetím výchozí stav, na který funkce právě vytvořený checkbox nastaví (jde o číslo v rozmezí 1…3).
|
Funkce Create3State vytváří dva HTML prvky. Prvním je skryté (HIDDEN) pole formuláře se jménem field_name – to bude obsahovat aktuální hodnotu checkboxu; druhým prvkem je obrázek checkboxu, zapouzdřený kvůli obsluze do HTML odkazu. Při kliknutí na obrázek, respektive odkaz, je volána další JavaScriptová funkce Click3State. Ta jednak „překlopí“ hodnotu skrytého prvku formuláře na další hodnotu v pořadí, za druhé pak změní obrázek checkboxu, aby správně signalizoval aktuální stav. Protože se jedná o záslužnou činnost, zaslouží si funkce Click3State trochu mediální pozornosti:
|
Jak vidno z druhé části kódu této funkce, předpokládá se existence „jakýchsi“ objektů typu Image se jmény s1 až s3. Tyto objekty pochopitelně musíme nainicializovat, například takovýmto kódem:
|
Příklad vyžaduje fyzickou existenci 3 obrázků (jednotlivé stavy checkboxu) se jmény state1.gif až state3.gif ve stejném adresáři jako je HTML stránka, při změně jejich umístění je potřeba změnit příslušný kód nejenom v inicializaci objektů s1..s3, ale také v kódu funkce Create3State.
Posledním kódem, použitým v příkladu, je funkce Validate, která při odeslání formuláře vypisuje hodnotu všech 3 checkboxů do alert okénka – jde tedy o „DEBUG“ pomůcku, kterou zřejmě při běžném provozu provozu nevyužijete. Pro úplnost si ale ukážeme i její kód:
|
A to je k dnešnímu příkladu vše. Kromě 3stavového checkboxu lze pochopitelně drobnou modifikací kódu pro různé aplikace vytvořit checkbox čtyřstavový, pětistavový atd. ad libitum. Rovněž lze modifikovat rozsah hodnot, ukládaných do skrytého pole (máte-li raději „zero based“ hodnoty či potřebujete úplně jiné n-tice hodnot).
Přeji vám příjemný den.
Mohlo by vás také zajímat
-
Jak lze snadno upravovat soubory v PDF?
14. září 2023 -
inPage AI: Jak na generování obsahu
18. července 2024 -
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023 -
AI na dosah ruky: Jak je to s AI v osobních zařízeních?
22. ledna 2024
Nejnovější
-
Jak se chránit před podvody na internetu – část 2
14. října 2024 -
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