[Grafika] [WebTip] [Fotografování] [Galerie] [MujMac] [Printing]
  Redakce: info (at) builder.cz   Inzerce: reklama (at) grafika.cz
Diskuzní fóra
.Net (68471)
ASP (1591)
ActiveX (168)
Allegro (136)
Assembler (3926)
C++ Builder (23160)
C/C++ (44499)
Databáze (30680)
Delphi (78808)
DelphiX (1655)
DirectX (1464)
Java (39508)
JavaScript (12598)
Matematické programy (2178)
OOP a UML (732)
OpenGL (6920)
Php (65224)
PowerBuilder (464)
Problémy a algoritmy (10473)
Programování v Linuxu (2000)
Právo a programování (3384)
Python (1353)
Ruby (136)
Visual Basic (12078)
Visual C++ (12956)
Wap (56)
Web (10895)
Web servery (5549)
Win32 (13553)
Windows CE (865)
XML/XSL (1860)
Textová inzerce
Služby Builder.cz
  • Bazar - koupím(0)
  • Bazar - prodám(0)
  • Hledám práci(0)
  • Nabízíme práci(0)
  • Projekty(0)
  • Efektivní tlačítka
    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é.
    Autor: Petr Švec
    Rubrika: HTML
    Publikováno: 16.09. 2002
     Tisk článku
    Poslat odkaz emailem
     

    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:

    <INPUT TYPE="CHECKBOX" ID="C1" NAME="C1" VALUE="YES">
    <LABEL FOR="C1">Klikni na text</LABEL>

    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.

    <INPUT TYPE="BUTTON" NAME="btnHelp" VALUE="Help (h)" ACCESSKEY="h">

    <INPUT TYPE="CHECKBOX" ID="C1" NAME="C1" VALUE="YES" ACCESSKEY="k">
    <LABEL FOR="C1"><u>K</u>likni pro zaškrtnutí</LABEL>


    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.

    <BUTTON TYPE="BUTTON" ID="btnHelp3" NAME="btnHelp3" VALUE="Help3" ACCESSKEY="l">
    <LABEL FOR="C3">He<u>l</u>p 3</LABEL>
    </BUTTON>

    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.

    <FORM id="myfrm" name="myfrm" action="index.php" method="POST">
    <INPUT TYPE="hidden" NAME="sent" VALUE="None">
    Klasický input:
    <input type="submit" id="nextBtn" name="nextBtn" value="sent" onclick="myfrm.sent.value='sent';"><br>
    Button #1:
    <button type="submit" id="okBtn" name="okBtn" value="okBtn" accesskey="o" onclick="myfrm.sent.value='okBtn';"><label><u>O</u>K</labe></button><br>
    Button #2:
    <button type="submit" name="cancelBtn" value="sent" accesskey="c" onclick="myfrm.sent.value='cancelBtn';"><label><u>C</u>ancel</label></button>
    </FORM>

    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.


    Zpět na začátek stránky

    Autor: Petr Švec
    Klikni pro další články autora

    Hodnocení článku
    1 | 2 | 3 | 4 | 5
    Aktuální známka: 2.70
    (Počet známek: 8082)

    Komentáře k článku
    Elijen09.03.10:40Pro autora
    Aros16.08.17:05RE: Pro autora
    pata02.04.13:58Kod
    BoneFlute29.11.10:09Javascript to neřeší.
    Mblo03.10.10:54Neni to jen problem opery
    Švec Petr04.10.14:22RE: Neni to jen problem opery
    Petr Krut17.09.8:14odeslani formulare
    Švec Petr17.09.15:44RE: odeslani formulare
    Dfox16.09.20:11button a label
    Švec Petr17.09.15:46RE: button a label
    Mem16.09.14:28Opera ocividne malo podporuje "IE standard" ;-) ...
    Švec Petr16.09.14:38RE: Opera ocividne malo podporuje
    skim16.09.19:31RE: RE: Opera ocividne malo podporuje
    humpa16.09.21:00RE: RE: Opera ocividne malo podporuje
    Švec Petr17.09.15:53RE: RE: RE: Opera ocividne malo podporuje
    pepa18.09.17:36svecpetr.com
    fISH12.04.15:11RE: svecpetr.com
    Jano17.04.16:04RE: svecpetr.com
    ondra19.09.13:09RE: RE: Opera ocividne malo podporuje
         





    info@builder.cz
    Vydává Grafika Publishing, s.r.o.
    Copyright (c) 1997-2002 Všechna práva vyhrazena