Efektivní tlačítka - Builder.cz - Informacni server o programovani

html_obecne

html_obecne

16. září 2002, 00.00 | Dejte svému webu nový rozměr. A to v podobě efektních tlačítek, checkboxů apod. Podíváme se i na to, proč toto téma není oblíbené.

Děláte–li více do webových stránek, tak jste si už asi zvykli na to, že ve formulářích se vyskytují tlačítka, radia aj. komponenty, které fungují trochu odlišně oproti operačnímu systému Windows®. Příkladem může být, že u checkboxu se po kliknutí na text, nezaškrtne daný checkbox. Šly by určitě najít lepší a další příklady, já se však chci zabývat tím, jak to napravit.

Řešení se nachází v překvapivě jednoduchém kódu. Stačí jen přidat atribut FOR s odkazem na danou komponentu. Fyzicky např. takhle:

Další nevýhoda vyvstává v podobě klávesových zkratek k jednotlivým komponentám. Tu lze řešit velmi elegantně přidáním atributu ACCESSKEY="[klávesa]". V popisku k této komponentě, pak lze podtržením zvýraznit dané písmeno, případně ho napsat do závorek za text.

Jediný problém s klávesovými zkratkami, který může nastat, je že se trefíte do klávesové zkratky, která je v menu daného prohlížeče. Ta má samozřejmě přednost. Bohužel to nelze zcela vyřešit tím, že byste přeskakovali tyto zkratky, protože v jiném prohlížeči budou jiné. A nemusí se jednat o zcela jiný prohlížeč, ale stačí např. anglická verze ku české.

Jak mi dochází, tak dalším problém bude implementace klávesové zkratky pro tlačítka. Nic mi sice nebrání, abych opět použil atribut ACCESSKEY. Vše by fungovalo OK, ale když se pokusím nějakým způsobem zobrazit v tlačítku, kterou že to klávesu může zmáčknout, zjistím, že veškerý text je a bude interpretován vždy jako text, takže žádný tag, ale text.

Řešení se nachází v podobě HTML tagu <BUTTON>, který je ve standardu 4.0 resp. XHTML 1.0. Jeho podpora v prohlížečích je následující: Internet Explorer 4, 5, 6; Mozilla 1; Netscape Navigator 6, 7; Opera 6. Osobně si myslím, že již delší dobu nastal vhodný čas, aby se klasický <INPUT... nahradil něčím výkonnějším.

Tento tag nám umožní vytvářet ještě efektnější tlačítka. Tím že se případný text zapisuje mezi párovaný tag BUTTON a smí obsahovat spoustu dalších tagů jako B, U, I či IMG si můžeme vytvořit tlačítko opravdu podle chuti.

Vrátím–li se implementaci klávesové zkratky, asi všichni tušíte, že stačí použít obyčejný tag U.

A řeklo by se, že je to vše. Omyl je pravdou. Teď teprve přichází na scénu to pravé ořechové — výjimky. Nebýt odlišného myšlení u Microsoftu, tak bych ani neměl o čem psát :o)

Výjimka první: použijete–li ve formuláři vícekrát BUTTON typu SUBMIT např. tlačítko OK a Cancel. Tak se pod IE (alespoň pod IE 6) nesprávně při kliknutí jednoho tlačítka odešlou hodnoty všech BUTTONů typu SUBMIT, což absolutně znemožní rozpoznat, které tlačítko bylo stisknuto. Že by se inspirovali konkurencí: Think different.

Řešení najdete v každé dobré učebnici JavaScriptu. Výjimka druhá: Byl–li v předchozím příkladě BUTTON a jeho atribut VALUE má hodnotu "Help3", tak u Microsoftu se pod VALUE skrývá "He<u>l</u>p 3", neboli obsah BUTTONu.

Takže, řešení bude o něco složitější, ale ne až tak, že byste ho nepochopili. Stačí jen do formuláře přidat skrytý INPUT s defaultní hodnotou (viz. atribut SENT). Při kliknutí SUBMIT BUTTONu přes metodu ONCLICK změnit hodnotu skrytého INPUTu. Příkladně při kliknutí tlačítka OK uložit okBtn apod. Skript na serveru pak v proměnné sent obdrží, jaké bylo zmáčknuto tlačítko.

Tento zápis má tu výhodu, že funguje, jak v IE, tak v Mozille, kde by to fungovalo i bez toho. O Opeře nemám ponětí.

Závěrem: Nevíte proč se s tím pachtit? Peníze. Po té co jsem toto zavedl na svém serveru, začalo mi chodit mnohem více objednávek se zaškrtanými checkboxy a také více objednávek obecně. Když je neprofesionální uživatel na něco zvyklý, tak ho nesmíte zklamat.