Vytvoření rozevírací komponenty vlastního výběru je jedním z nejběžnějších požadavků ve vývoji webu. Rozbalovací nabídka Vybrat umožňuje uživateli vybrat jednu hodnotu z předdefinovaného seznamu. Možná vás zajímá:

„Proč musím vytvořit vlastní rozevírací komponentu pro výběr, pokud již existuje značka pro výběr HTML? Mohu použít nějaký styl CSS a je to!“

Bohužel rozevírací nabídka pro výběr stylů není tak přímočará. Nativní prvek pro výběr HTML nám neumožňuje značky možností stylování.

V dnešní době se vybrané rozevírací nabídky objevují v mnoha různých variantách. Najdete různé knihovny javascriptů a rámce css , které mají vlastní implementaci pro rozevírací seznamy pro vlastní výběr. Osvědčily se funkce mezi prohlížeči a jsou vysoce spolehlivé. Mnohokrát nemusíte používat žádné knihovny nebo rámce, protože v mnoha případech je vytvoření rozevíracího seznamu pro vlastní výběr snadné úkol.

V tomto příspěvku na blogu se s vámi chci podělit o to, jak můžete vytvořit rozbalovací nabídku funkčního výběru bez použití knihoven a rámců. Můžete použít styling pro výběr možností a přidat tam vlastní komponenty.

Než začnete s rozbalovacím seznamem custom select, měli byste se zeptat následující otázky:

Bude mít rozbalovací nabídka select stovky nebo tisíce možností?

Mohou uživatelé vybrat více možností?

V obou případech budete muset použít knihovna třetích stran, protože vlastní implementace může trvat hodně času. Pokud potřebujete rozevírací nabídku se stovkami možností, měli byste uživatelům poskytnout vyhledávací funkci. Pokud má rozbalovací nabídka tisíce možností, měli byste použít techniku „okna“. Další informace najdete v části Pokročilé Výběr rozevíracího seznamu.

Příklad rozevíracího seznamu Výběr

Zde můžete vidět výchozí prvek výběru může vypadat trochu jinak v závislosti na prohlížeči, který používáte.

V tomto výukovém programu změníme výchozí vybraný prvek na tento:

HTML

Tradičně, když potřebujete vytvořit vlastní rozbalovací nabídku, měli byste použijte následující strukturu.

Protože nemůžeme použít značku select, máme více možností výběru struktury html . Můžeme použít prvky ul a li nebo div s span prvky. Pojďme se rozhodnout pro div a span strukturu.

CSS

Je to dobrý nápad začněte css resetem, který snižuje nekonzistence prohlížeče. Rozhodl jsem se pro reset CSS Erica Meyera:

Zdroj: https://meyerweb.com/eric/tools/css/reset/

Dávám přednost pomocí box-modelu, kde width = šířka prvku + polstrování + okraje.

Nejprve jsme přidali několik základních stylů pro html prvky. <div class=”custom-select”> pozice je relativní, protože pro rozevírací seznam musíme použít absolutní umístění.

Další šipka se používá pro rozevírací šipku.

Můžete vidět přechod a transformaci vlastností CSS3. Přechod se používá k rozevíracímu a zeslabovacímu rozevíracímu seznamu. Transformace se používá k animaci šipky, jejíž směr představuje stav rozevíracího seznamu.

JavaScript

K manipulaci s domem nemusíte používat knihovny třetích stran. Pro jednoduchou rozevírací nabídku potřebujete pouze základní události JavaScriptu.

Přidali jsme do obálky funkci kliknutí. Kliknutím na funkci přepnete třídu .open, která představuje otevření nebo zavření seznamu možností. Ve funkci kliknutí klikáme <div class=”custom-select”> podle this.querySelector(".custom-select"). This uvnitř funkce kliknutí představuje kliknutý prvek. Nejsme dotazováni na celý dokument pomocí document.querySelector(".custom-select") v případě, že máme více rozevíracích seznamů uvnitř DOM.

Ve výše uvedeném fragmentu javascript iterujeme všechny možnosti a přidáváme kliknutí funkce, která změní vybranou možnost přidáním třídy .selected. Opět platí, že uvnitř funkce kliknutí se dotazujeme v rámci možnosti kliknutí (this ve fragmentu), pro případ, že bychom chtěli změnit obslužné rutiny událostí tak, aby podporovaly více rozbalovacích nabídek na jedné stránce.

Poslední úryvek je volitelný a umožňuje uzavírací rozevírací seznam, pokud uživatel z rozevíracího seznamu klikne.

Rozbalovací nabídky s více výběry na jedné stránce

Chceme-li použít více výběrů z výběru na jedné stránku, musíme připojit posluchače kliknutí ke všem prvkům .custom-select-wrapper a zavřít všechny rozbalovací nabídky, pokud uživatel z rozevíracího seznamu klikne.

Pokročilé Vyberte rozbalovací nabídku

Pokud potřebujete rozbalovací nabídku se stovkami možností nebo více možností, můžete zkontrolovat některé z dostupných knihoven. V tomto článku si můžete prohlédnout srovnání nejpopulárnějších knihoven.

V případě, že potřebujete řešit tisíce možností, nemůžete vykreslit DOM s tisíci prvků možností.Pokud nemůžete použít žádný back-end, budete muset použít techniku „oken“.

Co je technika „oken“?

Spíše než vykreslení tisíců prvků ze seznamu na jednou se „okno“ nebo virtualizace zaměřuje na vykreslení pouze položek viditelných pro uživatele. Tuto diskusi Briana Davida Vaughna o implementaci techniky „okna“, kterou lze snadno implementovat a poskytnout obrovské zvýšení výkonu, můžete zkontrolovat.

Závěr

Doufám, že vám tento příspěvek na blogu pomůže vytvořit vlastní rozevírací komponentu. Nejprve musíte vědět, zda rozbalovací nabídka pro výběr obsahuje mnoho možností nebo zda uživatelé mohou vybrat více možností. Pokud potřebujete základní vybranou komponentu, blogový příspěvek popisuje celou implementaci v HTML, CSS a JavaScriptu. Zdrojový kód můžete zkontrolovat na Githubu.