[Grafika] [WebTip] [Fotografování] [Galerie] [MujMac] [Printing]
  Redakce: info@builder.cz   Inzerce: reklama@grafika.cz
Diskuzní fóra
.Net (1045)
ASP (1479)
ActiveX (92)
Allegro (278)
Assembler (1022)
C++ Builder (8298)
C/C++ (1390)
Databáze (3038)
Delphi (10162)
DelphiX (1397)
DirectX (540)
Java (2830)
JavaScript (3948)
OpenGL (435)
Php (26687)
PowerBuilder (1860)
Problémy a algoritmy (2389)
Programování v Linuxu (859)
Python (40)
Visual Basic (2737)
Visual C++ (4008)
Wap (138)
Web (4111)
Win32 (2144)
Textová inzerce
Aaron
10% sleva
na digitální fotoaparáty
videokamery
a příslušenství

Vinohradská ulice 41 PRAHA 2 http://ad.grafika.cz/adclick.php?bannerID=414&dest=+http%3A%2F%2Fwww.aaron.cz&ismap=
Služby Builder.cz
  • Bazar - koupím(3) Nový
       - shanim PC XT
       - Kúpim C++ Builder
  • Bazar - prodám(6) Nový
       - EmailSearch + EmailSender
       - JBuilder 4 Enterprise na prodej
  • Hledám práci(22) Nový
       - Programátor PHP, MySQL
       - Správce WIN2000 a WIN9x siti , MS SQL2000, WEBmaster
  • Nabízíme práci(7) Nový
       - Hledáme programátora (ASP/PHP)
       - Programátor
  • Projekty(8) Nový
       - Univerzální interentový obchod
       - Hledam Windows webhosting, ev pevnou linku (Praha 4)
  • Nejčtenější články!
    Ovládejte spotřebiče přes sériový port (7. díl)
    Optimální kód v Delphi
    Efektivní tlačítka
    Sdílení paměti pomocí mapování souborů (3. díl)
    Interní vzkazy - I
    Registr Windows 2000
    Učíme se Win API - 27.
    OpenGL -10.díl Náčítání modelů ze souborů
    Platnost proměnné
    Interní vzkazy - II
    Podmínky
    Nejnovější články!
    Podmínky
    Efektivní tlačítka
    Interní vzkazy - II
    Učíme se Win API - 27.
    OpenGL -10.díl Náčítání modelů ze souborů
    Platnost proměnné
    Interní vzkazy - I
    Registr Windows 2000
    Ovládejte spotřebiče přes sériový port (7. díl)
    Sdílení paměti pomocí mapování souborů (3. díl)
    Efektivní tlačítka
    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.


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

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

    Komentáře k článku
    Petr Krut 17.09.8:14 odeslani formulare
    Švec Petr 17.09.15:44 RE: odeslani formulare
    Dfox 16.09.20:11 button a label
    Švec Petr 17.09.15:46 RE: button a label
    Mem 16.09.14:28 Opera ocividne malo podporuje "IE standard" ;-) ...
    Švec Petr 16.09.14:38 RE: Opera ocividne malo podporuje
    skim 16.09.19:31 RE: RE: Opera ocividne malo podporuje
    humpa 16.09.21:00 RE: RE: Opera ocividne malo podporuje
    Švec Petr 17.09.15:53 RE: RE: RE: Opera ocividne malo podporuje
    pepa 18.09.17:36 svecpetr.com
    ondra 19.09.13:09 RE: RE: Opera ocividne malo podporuje
         





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