piatok 7. októbra 2011

Alternatívy k dlhým rozbaľovacím zoznamom (CSS)

Ak chcete poskytnúť používateľom zoznam platných možností v HTML formulári, môžete vytvoriť rozbaľovací zoznam pomocou <select> a <option> elementov. Táto metóda funguje výborne pri krátkych statických zoznamoch s niekoľkými možnosťami. Takéto zoznamy sa ľahko naprogramujú, jednoducho používajú a umožňuje výber viacerých možností. V tomto krátkom HTML kurze sa na ne pozrieme podrobnejšie.

Avšak, ak použijete rozbaľovací zoznam pre naozaj veľký súbor hodnôt, môžete si vyrobiť viac problémov ako vyriešite. Napríklad, veľký počet elementov <option> na stránke predĺži dobu načítavania stránky. Samozrejme, že niekoľko rozbaľovacích zoznamov každý s 50 alebo 60 možnosťami nemá veľký vplyv na načítanie, ale niekoľko zoznamov na stránke každý s tisíckami možností, už bude mať citeľný vplyv.

Veľmi veľké rozbaľovacie zoznamy môžu byť tiež nemotorné z hľadiska rolovania. Dokonca i stredne dlhý zoznam môže obťažovať používateľa, ak sa potrebujete posunúť v abecednom zozname napríkla k písmenu U.

Alternatívy k dlhým rozbaľovacím zoznamom
V tomto článku nechceme tvrdiť, že rozbaľovacie zoznamy sú zlé. Niekedy však treba zvážiť aj iné alternatívy. Tu sú tri, ktoré vám môžu pomôcť obísť problémy s veľkými rozbaľovacími zoznamami:
  1. Pri rozsiahlych alebo niekoľkostlpcových dátach môžete uvažovať o vytvorení svojho vlastného rozbaľovacieho zoznamu. Vytvorte prehľadnú HTML tabuľku so zaškrtávacími políčkami alebo prepínačmi vnútri rolovacieho elementu (napr. <div> element s overflow atribútom nastaveným na scroll alebo auto). Podobný efekt môžete dosiahnuť pomocou <iframe> elementu.
  2. Spojte textové pole s rozbaľovacím zoznamom. Táto alternatíva sa môže pohybovať od jednoduchých po efektné riešenia. Pri jednoduchých riešeniach použite <input> a <select> elementy a pripojte návod, že používateľ má možnosť voľby. Na druhej strane, aby nedochádzalo k zámene spôsobenej rôznymi spôsobmi zadávania dát, zvážte zobrazenie iba textového poľa a pomocou JavaScriptu automaticky vyplniť zostávajúce odpovede. Ako používateľ začne písať, môžete zovraziť element <select> pre súvisiace možnosti. Ak chcete zobraziť neviditeľný prvok, prepnite style.visibility vlastnosť z hidden na visible.