PrettyForm - hezké formuláře

Pro provázáné select boxy mi tam namátkou chybí podpora disabled u option a onchange u selectu.

Ani to nutně nesouvisí se závislostmi. Někdy do zadání nacpe marketing požadavek, aby některé položky byly vyšedlé a nešly vybrat, to aby zákazník viděl, že tam je něco dalšího a když si připlatí bude mu fungovat i to.

Ještě by mi z vlastností klasického html select boxu chybělo multiple a size u selectu a title u všeho.

Reaguji na joa:
V Exploreru 7 nevidím náhražku <select>u, jen nápis „Add location“.
Ke kódu se vyjádřím později.

Mám pocit, že už jsem něco obdobného (snad postavené na jQuery) viděl.

Nicméně, dojem z ukázky mi kazí následující věci (poměrně snadno řešitelné), ale když už si hraješ s formuláři, tak by mohli být perfektní:

1) Přidat <label for>y pro popisky jako „Firstname“, „Gender“ atd.
2) Zajistit přepínání položek type=radio klávesami ← a →.
3) Dořešit :focus u checkboxu.
4) Zajistit funkčnost bez obrázků!
5) U <select>u počítat se změnou velikosti písma.

Co se týče nápadů, tak by bylo šikovné umožnit nějak snadno přiřadit k <option>ům ikonky a hodila by se komponenta pro <input type=file>.

Ad 4) Třeba definovat jako pozadí kromě obrázku i barvu (odhaduji, že by to znamenalo vytvoření dalšího elementu jen pro obrázek), aby bylo při výběru položky znát, že se něco udělalo. Případně, ale to už je trochu extrémní, by šlo udělat nějaký IR ve stylu „nakreslení“ symbolů vhodnými entitami — třeba „√“ pro zatržený checkbox a „•“ pro vybrané radio. :–)

„S ikonkami počítám, parametr pro ně u addOption je“
Spíš bych si to představoval tak, že by položka dostala nějakou smysluplnou class (např. dle value), které by se obrázek klasicky přidal v CSS. Používat současné proměnlivé #uiSelectBox3_0 by nebylo dvakrát pohodlné.

joe:
„Obrázek má teď vlastní element <i> jako image :-)“
To se bude hádat s tagem <i> pro italic (kurzíva) ne?

joe:
Já to spíš myslel tak, že to znemožní použít tag <i> tak, abych vypsal text kurzívou...

Reakce na joa:
„Nastavovat barvu možné je, ale ne na každé stránce, která může být pod formulářem obrázek. Takže by tam mohl vzniknout problém.“
Stejně může být problém i s obrázkem, který splyne. :–) Šlo mi jen o to, že by to mohlo být v ukázce řešené.

„Vidíš nějakou výhodu nastavovat obrázek pomocí CSS, když je možné dát ho přímo do samotného textu?“
Pokud dobře rozumím, tak by mi v případě té třídy stačilo napsat příslušné CSS s obrázkem pro danou položku a v kódu by bylo stále pouze PrettyForm.makePrettier(). Pokud by měl být ten obrázek v HTML, tak ho budu muset ještě JavaScriptem přiřadit k položce, ne? Nebo ho snad chceš psát mezi <option> a </option>? Nebo mi něco uniká?

Zkoušel jsi, jak se ty formuláře chovají v mobilních prohlížečích?

Opera Mobile 10

Ten <select> je nějaký rozhozený a navíc z něj vůbec nelze vybírat. Jinak OK.

Opera Mini 5

• Ze <select>u vybírat lze, nicméně je taktéž rozhozen.
• Komponenta File je totálně rozhozena (nicméně vybrat zřejmě lze).

Reakce na joa:
Doporučil jsem někomu použití skriptu pro nahrazení <select>u a zjistili jsme, že se při jeho ovládání klávesnicí nemění hodnota skutečného formuláře (chybí tam kód, co by ji nastavil).

Plánuješ se tomu ještě někdy v dohledné době věnovat, případně nemáš náhodou už nějakou novější variantu skriptu, kde to funguje?

Reaguji na joa:
Náhrada <select>u zlobí ve starších Explorerech, pokud není explicitně vyplněná value v elementech <option>.
Ve všech prohlížečích je také schopná se dostat do nějakého nepěkného pastavu, pokud uživatel klikne do rozbalené plochy, ale mimo jakoukoliv položku (třeba na její border, nebo do prostoru marginu položky).

Doporučuji PrettyForm všude, kde někdo chce nahrazovat <select> navzdory mému silnému odporu k podobným požadavkům. Jakákoliv zpozorovaná nedokonalost mi sice dopřeje příjemný moment zadostiučinění, ale na druhou stranu je mi trochu líto uživatelů :-)

„Ten File, to Opera [Mini] asi nezvládá opacity.“

Reaguji na joa:
„Testoval jsem to v Opeře Mini a tam se to zobrazuje korektně (select box).“
Mobily bych na tvém místě opodmínkoval, aby se u nich <select> neměnil, protože v nich standardní <select> funguje většinou dost jinak než tvá napodobenina.

„Díky, tak to s PrettyFormem nevypadá tak špatně :))“
Pár desetitisíců návštěvníků už z formulářů zkrášlených tvým skriptem v tichosti chrochtalo blahem :-)

„Za tuhle větu mě nebudeš mít rád“
Ta věta je pro mé potřeby poněkud diskvalifikující. Lidé v mém okolí vnímají jQuery jako přítěž, za což možná částečně můžu já, ale tahat framework kvůli takové malichernosti by pro ně bylo tak či tak nepřijatelné.

„uvažoval jsem nad tím, že bych to nasadil na jQuery :-)“
K čemu by tam bylo? Vždyť to máš tak jednoduše napsané, že by to ani framework nezkrátil.

„používám jQuery (jako řada lidí) skoro na každém projektu“
Já ho už poslední dobou nevyužívám ani na projektech, kde vím, že stejně přilinkované bude. Práci by mi sice nepatrně usnadnit mohlo, ale výsledek by nebyl přenositelný na místa, kde jQuery nebude.

Reaguji na joa:
„i když se mi ten "ajfouní" select box graficky moc nelíbí“
Ve WP7 se při rozťuknutí <select>u stránka skryje a celou plochu displeje pokrývají možnosti. Nevypadá to moc pěkně, ale dobře se do toho trefuje. Při multiple mají položky u sebe zaškrtávátka.

Myslím, že by se na prvky uživatelského rozhraní s rozklikávacími plochami mělo nahlížet úplně jinak, než se běžně nahlíží. Na HTML mi připadá trošku hloupé, že vůbec existuje <select>. Logičtější by mi přišlo, kdyby existovalo obecné rozklikávací… něco. Protože na stránce se můžou rozklikávat i menu s odkazy, i nějaké panýlky s podrobnostmi o čemsi atd. — a v takovém rozklikávacím panýlku můžou být klidně standardní zaškrátávátka či přepínače, což by ve výsledku fungovalo jako <select>, ale uživatel by nepotřeboval znát další formulářový prvek. Rozklikávací věci umožňují ušetřit místo, ale zase jsou méně uživatelsky přítulné než nerozklikávací, což si u <select>u někteří lidé neuvědomují, protože si myslí, že má blíž k <input>u než k popup menu. A někteří si to zase naopak uvědomují a zneužívají <select> na rozklikávací menu. Jeden zadavatel po mně chtěl dát do stránky <select>, ten zkrášlit tvým PrettyFormem a na onchange dát přesměrování :-)

Před pár lety jsem si napsal javascriptový kalendářík, podobný té Kendo UI věci. Rozklikneš, vybereš, nebo kliknutím mimo zavřeš, podobně jako u <select>u. Po jisté době se ovšem objevil požadavek, aby stejný kalendářík na jiném místě fungoval i bez rozklikávání. S tím jsem nepočítal, musel jsem jej trochu překopat. Poučení je, že svazovat rozkliknutelnost čehokoliv s druhem sdělované informace není dobrý nápad.

Kdyby existovalo v HTML obecné rozklikávátko, mohly by si s tím mnohem lépe poradit i mobily (klidně i ty hloupější).

„Máš tedy své funkce k hledání elementů v DOMu, k testování tříd, hledání rodičů, sourozenců, apod.“
Někde mám zkratkovou funkci pro hledání podle ID. Míval jsem i vlastní funkci na hledání podle (zjednodušeného) XPathu, ale postupně jsem ji přestal používat. Hledat elementy, které si nemůžu poznačit ídéčkem, většinou nepotřebuju, protože mám pod kontrolou buď HTML, nebo lidi dělající HTML.
Na práci s třídami mám několik funkcí, ty používám opravdu hodně a těším se na dobu, až bude spolehlivá podpora classListu.
Hledání rodičů/sourozenců bývá většinou jeden krátký while, na to jsem si ani nikdy nenapsal funkci.

Reaguji na joa:
„protože iPhone mi nějak nesedí a neumí nebo nemá takové věci, co měly telefony před deseti lety :-)“
To tě windowsí telefony také moc nenadchnou, protože do jisté míry přebírají politiku „my víme, co uživatel (ne)potřebuje“, se kterou udělal díru do světa jejich sok :-)

„Krátký while to (asi) je, ale otázka je, proč ho psát vždycky, když je potřeba :-)“
Protože je opravdu krátký a protože ve své surové podobě není potřeba zase tak často, zpravidla dovnitř while nastrkám víc podmínek.

„líbí se mi nástroje, které mi usnadní výběr elementů z DOMu“
V drtivé většině případů nic kromě hledání podle ID nepotřebuji. I v prostředích, kde můžu počítat s podporou document.querySelector, tuto metodu používám jen výjimečně. Prohledávání DOMu se přeceňuje.

„určitě by ten kód šel stáhnout daleko víc pří použití jQuery a nemusel by k tomu být další soubor (Core.js)“
• Core.addError se nikdy nevolá.
• Core.hasClass, což je prakticky jednořádková funkce, bys s jQuery nahradil za .hasClass.
• Core.addClass, což je prakticky jednořádková funkce, bys s jQuery nahradil za .addClass.
• Core.removeClass, což je prakticky jednořádková funkce, bys s jQuery nahradil za .removeClass.
• Core.addEvent se nikdy nevolá.
• Core.fireEvent se nikdy nevolá.
Víc toho v Core.js není. Ty tři funkce jsem si přilepil na začátek PrettyForm.js, protože víc věcí stavěných na tvém Core.js stejně asi využívat nebudu.

joe:
Neplánujete přidat závislé checkboxy? Řídící checkbox by mohl být třístavový (= je zaškrtnutá jen část závislých prvků). Jestli to už jde, tak se omlouvám, v ukázce to není a kód jsem zatím nestudovala.