A legördülő ablakok használata a weboldalunkon javítja a képernyő általános minőségét és kialakítását.
A legördülő ablak így alternatívaként és bizonyos esetekben jobb lehetőségként működik, mint a rádiógombok és a jelölőnégyzetek. Várjunk csak, micsoda? Azt mondtuk, hogy a rádiógombok és a jelölőnégyzetek alternatívája? De, csak a rádiógombnak kellett volna, nem?
A rádiógomb nem tesz lehetővé egynél több választást, a jelölőnégyzet viszont egy vagy több választást tesz lehetővé. A felhasználó csak egy opciót választhat ki a legördülő listából, ezért funkcionalitásában csak a rádiógombra hasonlít, és nem a jelölőnégyzetekre, igaz? Nos, itt jön a képbe a többszörös kiválasztás koncepciója egy kiválasztó dobozban.
Hogyan tehetem lehetővé a felhasználók számára, hogy több opciót válasszanak ki egy kiválasztó dobozból?
A webdesigner szemszögéből nézve a felhasználó számára a több opció kiválasztásának lehetővé tétele egy kiválasztó dobozból meglehetősen egyszerű és egyértelmű. Csak hozzá kell adnunk a <select> elemhez a “multiple” attribútumot. Most ahhoz, hogy több opciót is kiválaszthassunk, a select elemhez hozzá kell adnunk egy size attribútumot is. Ezáltal a kijelölőmező dobozként fog kinézni, nem pedig csak egy legördülő ablakként.
A felhasználónak lenyomva kell tartania a Ctrl billentyűt (Windowsban) és a Command billentyűt (Macen) a lehetőségek kiválasztásához.
<select name="Country" multiple size="5"> <option value="USA">USA</option> <option value="Russia">Russia</option> <option value="India">India</option> <option value="Britain">Britain</option></select>Jegyezzük meg ezeket a pontokat
-
A “multiple” attribútum egy Boolean attribútum, amely ha jelen van, azt jelenti, hogy több lehetőség is választható.
-
A webdesigner szemszögéből nézve a legördülő ablakból történő egyszeri és többszörös választás HTML-kódja némileg különbözik, a végfelhasználó szemszögéből nézve azonban ez a különbség nem látható a weboldalon. A kiválasztó doboz elrendezése vagy stílusa egyik esetben sem változik. Ezért a felhasználónak meg kell mondani, hogyan választhat ki több opciót a dobozból.
-
A fent említett pont miatt jobb választás a jelölőnégyzeteket választani a többszörös kiválasztás helyett, ha a választási lehetőségek száma kevesebb.
-
A több opció kiválasztásának módja a legördülő listából eltérő az egyes operációs rendszerekben. Míg a Windows rendszerben a vezérlőgombot (Ctrl) használjuk a kiválasztáshoz, addig a Mac rendszerekben a parancsgomb teszi a dolgát.
A legördülő ablak bővítése
Amint láthatjuk, a HTML natív kiválasztó doboza meglehetősen korlátozott, különösen a több opció kiválasztásához. Itt jön a képbe a JavaScript és a rendkívül hatékony könyvtárak. A select2 jQuery komponens lehetővé teszi a tervező számára, hogy testre szabja a kiválasztó doboz általános elrendezését, valamint olyan magas hasznosságú opciókat is beépítsen, mint többek között a keresés, a dinamikus betöltés és a címkézés.
A select2 támogatja a többszörös választást?
A select2 támogatja a többszörös választást a legördülő listában. A többszörös kiválasztás engedélyezéséhez csak a ‘multiple’ attribútumot kell felvenni.
Ez az előnye, hogy a felhasználónak nem kell a Ctrl vagy Command billentyűt lenyomnia több opció kiválasztásához.
<script>$(function(){ $(".js-example-basic-multiple").select2();});</script><select class="js-example-basic-multiple" multiple="multiple"> <option value="US">United States</option> <option value="IND">India</option> <option value="GBR">Great Britain</option></select>A Select2 más fejlesztéseket is tartalmaz. Például ahhoz, hogy korlátozza a felhasználó által megadható választási lehetőségek számát, csak adja hozzá a MaximumSelectionLength értéket a Select2 beállításaihoz, így:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});A Select2-ről bővebben a dokumentációban
olvashat.