« 1 2 »
Autor Zpráva
joe
Profil
Ahoj,

už nejednou jsem tu nakousnul, že dělám náhradu formulářových prvků - zkrátka hezké a všude stejné formuláře (rozuměj v každém prohlížeči - testováno na IE5.5+, Opera, FireFox, Safari a Chrome) pomocí JavaScriptu. Dostupné je zatím vytvoření pouze hezčího Select boxu a checkboxu. Daší ovládací prvky chystám, podle potřeby.

Uvádím sice, že se jedná o hezké prvky, nicméně jsem byl nucen odstranit grafiku, kterou pro prvky mám připravenou z důvodu použití na projektu, který ještě není spuštěn a nerad bych, aby se mé hezké formuláře objevily jinde dřív, než na mém webu :-)

Pokud máte zájem, podívejte se na prvky, kód nebo co vás napadne a můžete mi napsat sem nebo přímo na web, kde je pro to určená kniha.

Uvítám i nové nápady.

A proč jsem se vlastně rozhodl vytvořit něco takového? Zkrátka jsem nenašel ani jedno rozšíření, které by zvládlo to samé, co právě moje komponenty :-)

Webová stránka: javascript.webdream.cz

Děkuji za komentáře
Kajman_
Profil *
Pro provázáné select boxy mi tam namátkou chybí podpora disabled u option a onchange u selectu.
joe
Profil
Díky za tip, ale moc nechápu, k čemu by bylo dobré zrovna disabled u provázaných selectů :-)

Pokud už provázané select boxy, tak jednoduše ty položky skryju a nebudu je vůbec zobrazovat. Disabled tam přidat není problém, asi by bylo lepší to trochu upravit, než jak jsem to udělal teď, ale k čemu se daj vlastně zakázané položky použít? Zatím jsem to nikdy nepoužil a snad ani neplánuji.

PS: Pokud by mi to někdo otestoval na Linuxu nebo Mac OS, budu rád, nevím jak to chodí tam - díky.
Kajman_
Profil *
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.
Kajman_
Profil *
Ještě by mi z vlastností klasického html select boxu chybělo multiple a size u selectu a title u všeho.
joe
Profil
Dobrá, souhlasím s tím, i když ne vždy bych to tak osobně asi dělal - třeba při více položek by musely být ty klikatelné nahoře a ty zešedlé pod nimi, otázka je, jestli by to pak mělo vůbec nějaký smysl.

Máš ve všem pravdu, jenže to už se to dostává k tomu, že by ta funkce / konstruktor v JS obsahoval úplně vše - všechny gettry a settry na všechno, co si vzpomenu, všechny možné události, atd. a už se z toho stává něco většího, což by nebylo na škodu, ale nebylo to mým cílem. Ale ty nejdůležitější věci, co má klasický select box tam určitě dám.

Konkrétně u select boxu jsem si vymyslel jednu, myslím celkem dobrou vlastnost, no nechme se překvapit jestli se k tomu někdy dostanu.
joe
Profil
PrettyForm 0.9 beta

Novinky

- přidána komponenta Radio pro tvorbu výběru
- namísto odstraněných zbytečností přidány nové :-)
- fluent interface pro snažší zápis při tvorbě (především) vlastních komponent
- vylepšené chování jednotlivých prvků

Výhody oproti ostatním knihovnám

- možnost tvorby samostatných komponent (ne pouhé nahrazení klasických formulářových prvků za hezčí)
- použitelnost - jednoduchá ovladatelnost pomocí klávesnice (někde potřebuje ještě doladit)
- snadná úprava vzhledu (ve finální verzi bude pomocí CSS sprites)
- podpora i ve starších prohlížečích
- nezávislé na žádném frameworku

Ukázka: http://javascript.webdream.cz/demos/prettyForm-0.9beta/

Náhled zdrojového kódu, uvítám jakékoli vylepšení, nové nápady a chyby, ke kterým dochází. JavaScriptové odborníky prosím o zkouknutí kódu, snad to není tak hrozné, ale začíná se prodlužovat :-)
Chamurappi
Profil
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.
joe
Profil
Chamurappi:
Díky, narychlo jsem to opravil (nepočítal jsem s tím, že mi IE nic nevrátí na value u option, pokud bude chybět).

(Jinak třeba zrovna u toho selectu je u každé položky nastavené id, pravděpodobně by to šlo i bez toho a daleko lépe, vím o tom, zatím jsem se neměl k tomu to předělat)
Str4wberry
Profil
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>.
joe
Profil
Str4wberry:
Mám pocit, že už jsem něco obdobného (snad postavené na jQuery) viděl.

Existuje toho více, ale všechno na co jsem narazil mělo nějaký problém a nebo se mi nelíbilo jejich řešení.

1 - to je otázka HTML (příště bude dělat kvalitněji), ale máš pravdu, mělo by to tam být
2 - to mě nepotěšilo, taky jsem si včera na tom formuláři vedle zjistil, jak fungují normální radio inputy :)
3 - focus u takových prvků dávám textu, takže pokud je nastaven, je popisek orámovaný (jako přepínače). Pokud není, pak by bylo třeba vytvořit další obrázky s focusem
4 - tohle (asi) není možné. Nevím jak by jsi to chtěl zajistit?
5 - neměl by s tím být problém, teď to sice mám nastavené v pixelech, ale ani procenta tomu neublíží. Jen nefunguje zvětšení písma již na načtené stránce, správná šířka se nastaví až po obnovení.

S ikonkami počítám, parametr pro ně u addOption je, možná zbytečně, text se vkládá do innerHTML, takže je možné vkládat i HTML :-)

hodila by se komponenta pro <input type=file>.
Taky snad někdy bude.

Jinak samozřejmě díky za zkouknutí, kontrolu a prostě vše :)

EDIT: provedl jsem tam nějaké drobné úpravy
Str4wberry
Profil
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
Profil
Str4wberry:

Obrázek má teď vlastní element <i> jako image :-) 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.

Vidíš nějakou výhodu nastavovat obrázek pomocí CSS, když je možné dát ho přímo do samotného textu? Tzn. bude zobrazený i bez stylů :-)
TomasJ
Profil
joe:
Obrázek má teď vlastní element <i> jako image :-)
To se bude hádat s tagem <i> pro italic (kurzíva) ne?
joe
Profil
TomasJ:

Téměř jakýkoli tag jde nastylovat tak, jak člověk potřebuje. I když i při tvorbě volbě tagů pro nahrazení některých prvků jsem se sám divil, co s tím jsou za problémy (nevím z jakého důvodu, ale použití klasického seznamu UL - LI nefungovalo stejně, jako při použití DL - DT)
TomasJ
Profil
joe:
Já to spíš myslel tak, že to znemožní použít tag <i> tak, abych vypsal text kurzívou...
Str4wberry
Profil
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á?
joe
Profil
TomasJ:
Tak to máš pravdu, nepředpokládám vkládání tagu <i> do textu, ale vlastně to je jen otázka přestylování uvnitř položky. Dodělám do CSS.

Str4wberry:
Stejně může být problém i s obrázkem, který splyne. :–)
Tak to už je na každém, jaké obrázky si tam dá a jestli nechá nějaké výchozí, které zatím nejsou veřejné :-)

To už mi přijde jako moc velké hraní s tím, je to náhrada formulářových prvků za obrázky, tak se s tím už počítá :-)

Chápu to dobře, že to myslíš tak, že bych vzal třídu, co je nastavená na původním <option> a tu dal i té vytvořené položce? To by sice šlo, ale zase by to mohla celé totálně rozhodit, záleží co by měla v CSS všechno nastavené. Snad jedině zneužít k tomu nějaký atribut nebo použít úplně vlastní, jen nevím, jak je to pak s podporou prohlížečů a jestli se k nim z JS dostanu. Ale vím, že u validace v Nette mají tagy "vlastní nette atributy", kde jsou přímo psaná pravidla validování. A tam by se psal obrázek, ale nevím.

tak ho budu muset ještě JavaScriptem přiřadit k položce, ne?
Ano, musely by se projít všechny položky znovu a nastavit jim obrázek.

Nebo ho snad chceš psát mezi <option> a </option>?
To by možná také šlo a pak je stylem pro tag <option> skrýt.

Nebo mi něco uniká?
Ne :-)



Chamurappi:
Ke kódu se vyjádřím později.
Můžeš kdykoli, ale nemusíš to tak podrobně procházet. Hlavní je, že TO funguje :-) Ale určitě tam bude dost věcí, co by šlo napsat lépe. Každopádně předem díky za každou radu (a nejen Tobě).
joe
Profil
PrettyForm 0.9 beta 2

Novinky

- nová komponenta File (s vypnutým filtrem ve starších IE vzniká problém) + změna tlačítek
- vylepšené chování jednotlivých prvků
- podpora ← a → u Radio prvků
- přidán vzhled
- CSS sprites

Ukázka: http://javascript.webdream.cz/demos/prettyForm-0.9beta2/
Str4wberry
Profil
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).

joe
Profil
Str4wberry:
No popravdě :-) s mobilníma prohlížečema jsem nepočítal, to posunutí tlačítka u select boxu moc nechápu, je to absolutně pozicovaný. Asi tam bude problém s počítáním šířky toho select boxu, ale to mě zase nenapadá, proč by přetékal rámeček.

Nevím jestli jsou i nějaké simulátory, nepoužívám místo telefonu počítač :-) tak jestli se můžu zeptat, nějaké jiné knihovny na podobný princip tam fungují dobře (hlavně ten select)?

Ten File, to Opera asi nezvládá opacity.

Každopádně díky za testování... bylo by dobré, kdyby to fungovalo i v mobilech.
Str4wberry
Profil
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).
_this.reference.options[_this.selectedIndex].selected = true;

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?
Chamurappi
Profil
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.
if(window.operamini) return;
joe
Profil
Díky za reakce, nebýt Chamurappiho zmínění o PrettyFormu, málem bych na něj zapomněl.

Pár věcí bych tam asi změnil, až bude čas, když teď tak na to koukám.

Testoval jsem to v Opeře Mini a tam se to zobrazuje korektně (select box). Jen jsem nepochopil z jakého důvodu je po ťuknutí na konkrétní položku v otevřeném seznamu zvýrazněný celý otevřený seznam... (na iPhonu).
Na iPhonu se taky špatně zobrazí input pro výběr souboru (iPhone < 5 neumí odesílat soubory ve formulářích)

Náhrada <select>u zlobí ve starších Explorerech, pokud není explicitně vyplněná value v elementech <option>.
Mám pocit, že tohle jsem tam řešil, pokud ne, tak to tam přidělám, díky za povšimnutí

Ve všech prohlížečích je také schopná se dostat do nějakého nepěkného pastavu
Otestuji, opravím...

Doporučuji PrettyForm všude, kde někdo chce nahrazovat <select> navzdory mému silnému odporu k podobným požadavkům
Díky, tak to s PrettyFormem nevypadá tak špatně :))

Za tuhle větu mě nebudeš mít rád - uvažoval jsem nad tím, že bych to nasadil na jQuery :-) a nějak optimalizoval. Tedy spíš "optimalizoval"... používám jQuery (jako řada lidí) skoro na každém projektu.
Chamurappi
Profil
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.
joe
Profil
Chamurappi:
S mobilama máš pravdu, i když se mi ten "ajfouní" select box graficky moc nelíbí, nedá se nic dělat. Výhodou je jeho chování, a taky že je vektorový.

K čemu by tam bylo?
V případě, že bych zůstal u takového celkem jednoduchého skriptu, tak asi k ničemu :-) Ale jak jsem hledal UI framework v jiném vláknu, líbí se mi Kendo UI, postavené na jQuery, ale bohužel není zdarma. Pár takových komponent, které se hodí bych si rád napsal, ne všechno jak mají mi vyhovuje.

Já ho už poslední dobou nevyužívám ani na projektech, kde vím, že stejně přilinkované bude
:-) Máš tedy své funkce k hledání elementů v DOMu, k testování tříd, hledání rodičů, sourozenců, apod. věci, co nabízí a zjednodušují některé fw (třeba to jQuery, doufám že ne MooTools :-))?
Chamurappi
Profil
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.
joe
Profil
Chamurappi:
Po několika minutovém zkoumání kódu jsem už ani nepochopil původní myšlenku, jak jsem to s tim PrettyFormem myslel :-) Nicméně jsem tam našel i části, ke kterým se to nikdy nedostane, například

function f (p) {
  if (p === null) {
    throw "...";
  }
}

Takže jak budu mít chvíli času a někdy se k tomu dostanu, vyházím nesmysly z kódu a odeberu nahrazování na mobilech, které se detekují.

Jak vypadá chování na WP7/8 nevím, ještě jsem si to nikde nevyzkoušel, ale možná si s tím budu co nejdřív hrát, protože iPhone mi nějak nesedí a neumí nebo nemá takové věci, co měly telefony před deseti lety :-) Grafika formulářových prvků na iOS se mi nelíbí, ale například ta funkčnost s tím select boxem je dobrá, i proto se někdy používá místo menu na mobilních telefonech právě select.

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.

Krátký while to (asi) je, ale otázka je, proč ho psát vždycky, když je potřeba :-) líbí se mi nástroje, které mi usnadní výběr elementů z DOMu a když je selektor stejný jako v CSS, tak to nikoho nenutí učit se dva způsoby hledání elementů. A přijde mi celkem zbytečné psát věci znovu, které již existují, jsou odzkoušené a daleko víc promyšlené než bych je napsal, a taky se používají jednoduše. Právě proto si myslím, že díky tomu se jQuery stalo tak používanou knihovnou.

A kdybych zapřemýšlel víc, 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).
Chamurappi
Profil
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.
Tori
Profil
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.
« 1 2 »

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: