Egoblog.cz - Petr Kobelka

Nette Form a Tlačítko s Ikonkou

Chcete používat Nette Form a tlačítka s ikonkami? Jde to celkem jednoduše, jen mít dobrý nápad. Více najdete v článku


PHP | Komentáře (1) | Shlédnuto 1931 × | Vloženo: 16. července 2015

Nette Form a Tlačítko s Ikonkou

Hlavní motivací pro vyřešení problému, jak v Nette forms používat tlačítka s ikonkami byla motivace zlepšit UX naší aplikace. Celý proces řešení problému nespočíval ani tolik v tom vše vygooglit, nebo nafít na Nette fórech, ale dostat dobrý nápad. V tomto postu se o svůj nápad s vámi podělím a vysvětlím, proč funguje.

Celé řešení je ověřené na Nette 2.2+ (ne 2.3.!) ale předpokládám, že by neměl být problém, aby bylo řešení použito i na Nette 2.3.

Proč Nette používá input a ne submit

Stačí zadat do google text "nette submit s ikonkou" a najdete několik více či méně ne/úspěšných řešení, které se zabývají ikonkou v tlačítku. Řešení které vám pro Nette představím zatím funguje bezvadně a bez problémů. Jak je vidět z nadpisu, nette používá prvky input=submit a neopoužívá datum. David Grudl to ve svém postu (který jsem zatím) nenašel, zdůvodňuje kompatibilitou mezi různými internetovými priohlížeči. Konkrétně šlo o něco, že button v různých prohlížečích posílal nejednotné informace, zatímco input=submit se chová prediktivně.

Ukázka bez ikonky a s ikonkou - motivace

Tlačítko bez ikonky vypadá např. takto

zatímco tlačítko s ikonkou vypadá např. takto:

Co říkáte, které je podle vás "hezčí" a pro uživatele lepší (intuitivnější)?

Výsledek řešení tlačítka s ikonkou

Můj figl, který funguje spočívá v tom, že v Nette formuláři zadefinujete tlačítko typu input, např metodou addSubmit('moje-tlacitko') a následně do formuláře vložíte <button>, který bude mít stejný atribut name, jako má tlačítko ve formuláři: např. <button name="moje-tlacitko"> a je to.

Tohle řešení mi funguje v aktuálních prohlížečích a neměl jsem zatím žádný problém s odchycením isSubmited()->name, které by vracelo něco, co nemá.

Jedinou možnou nevýhodou je, že je třeba formulář vykreslovat ručně, nebo si upravit render. osobně všechny formuláře navrhuji kvůli bootstrapu ručně, takže pro mě osobně to takový problém není.

Ukázka zdrojového kódu

<a href="/muj-odkaz" class="btn btn-default btn-big">
  <span class="glyphicon glyphicon-arrow-left"></span> Zpět
</a>

Líbí se vám řešení? Podělte se o něj s ostatními. Nebo mi napište do komentáře.

 

 

Podobné články jako "Nette Form a Tlačítko s Ikonkou"

Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

1
Petr Steinbauer | vloženo 11. prosince 2016
Pro formuláře které nemůžete vypisovat ručně dostanete HTML do odesílacího tlačítka takto:

$form->addSubmit('addToCart')
->getControlPrototype()
->setName('button')
->setHtml('');

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.