Tworzenie niestandardowego menu wyboru jest jednym z najczęstszych wymagań w tworzeniu stron internetowych. Lista rozwijana Wybierz pozwala użytkownikowi wybrać jedną wartość z predefiniowanej listy. Może się zastanawiasz:

„Dlaczego muszę tworzyć niestandardowy komponent listy rozwijanej wyboru, jeśli istnieje już znacznik wyboru HTML? Mogę zastosować styl CSS i to wszystko!”

Niestety, menu wyboru stylu nie jest takie proste. Natywny element HTML select nie pozwala nam na stylizowanie tagów opcji.

W dzisiejszych czasach listy rozwijane wyboru pojawiają się w wielu różnych odmianach. Możesz znaleźć różne biblioteki javascript i frameworki css , które mają własną implementację dla niestandardowych list rozwijanych wyboru. Sprawdzają się w różnych przeglądarkach i są wysoce niezawodne. Często nie trzeba używać żadnych bibliotek ani struktur, ponieważ w wielu przypadkach utworzenie niestandardowego menu wyboru jest łatwe

W tym poście na blogu chcę się z wami podzielić, w jaki sposób można zbudować funkcjonalne menu wyboru bez korzystania z bibliotek i frameworków. Możesz zastosować stylizację, aby wybrać opcje i dodać tam niestandardowe komponenty.

Zanim zaczniesz tworzyć własne menu wyboru, powinieneś zapytać następujące pytania:

Czy lista rozwijana wyboru będzie zawierać setki lub tysiące opcji?

Czy użytkownicy mogą wybrać wiele opcji?

W obu przypadkach należałoby użyć biblioteki zewnętrznej, ponieważ własna implementacja może zająć dużo czasu. Jeśli potrzebujesz listy rozwijanej z setkami opcji, powinieneś zapewnić użytkownikom funkcję wyszukiwania. Jeśli lista zawiera tysiące opcji, powinieneś użyć techniki „okienkowania”. Aby uzyskać więcej informacji, przejdź do menu rozwijanego wyboru zaawansowanego.

Przykład listy rozwijanej wyboru niestandardowego

Tutaj możesz zobaczyć domyślny element wyboru, może wyglądać nieco inaczej w zależności od używanej przeglądarki.

W tym samouczku domyślny element wyboru zamienimy na następujący:

HTML

Tradycyjnie, gdy musisz utworzyć niestandardowe menu wyboru, użyj następującej struktury.

Ponieważ nie możemy użyć tagu select, mamy więcej opcji wyboru struktury html . Możemy użyć elementów ul i li lub div z span. Wybierzmy strukturę div i span.

CSS

Warto Zacznij od resetowania css, co zmniejsza niespójności przeglądarki. Zdecydowałem się na reset css Erica Meyera:

Źródło: https://meyerweb.com/eric/tools/css/reset/

Wolę używając modelu box, gdzie szerokość = szerokość elementu + dopełnienie + obramowanie.

Najpierw dodaliśmy kilka podstawowych stylów dla elementów HTML. <div class=”custom-select”> pozycja jest względna, ponieważ musimy zastosować pozycjonowanie bezwzględne dla listy rozwijanej.

Następny CSS jest używany jako strzałka w dół.

Możesz zobaczyć przejście i transformację właściwości CSS3. Przejście służy do pojawiania się i zanikania listy rozwijanej. Transformacja służy do animacji strzałki, której kierunek reprezentuje stan listy rozwijanej.

JavaScript

Nie musisz używać bibliotek innych firm do manipulowania domenami. Do prostego menu potrzebne są tylko podstawowe zdarzenia javascript.

Dodaliśmy funkcję kliknięcia do opakowania. Funkcja kliknięcia przełącza klasę .open, która określa, czy lista opcji jest otwarta, czy zamknięta. Wewnątrz funkcji kliknięcia wyszukujemy <div class=”custom-select”> według this.querySelector(".custom-select"). This funkcja wewnętrznego kliknięcia reprezentuje kliknięty element. Nie sprawdzamy całego dokumentu przez document.querySelector(".custom-select") na wypadek, gdybyśmy mieli więcej menu w DOM.

W powyższym fragmencie kodu javascript iterujemy wszystkie opcje i dodajemy kliknięcie funkcja, która zmienia wybraną opcję poprzez dodanie klasy .selected. Ponownie, w funkcji kliknięcia odpytujemy w ramach klikniętej opcji (this we fragmencie), na wypadek gdybyśmy chcieli zmienić obsługę zdarzeń, aby obsługiwały wiele menu rozwijanych na jednej stronie.

Ostatni fragment jest opcjonalny i pozwala na zamknięcie listy rozwijanej, jeśli użytkownik ją opuści.

Wiele rozwijanych menu wyboru na jednej stronie

Jeśli chcemy użyć wielu rozwijanych menu wyboru na jednej musimy dołączyć odbiornik kliknięć do wszystkich elementów .custom-select-wrapper i zamknąć wszystkie listy rozwijane, jeśli użytkownik je opuści.

Zaawansowane menu wyboru

Jeśli potrzebujesz listy rozwijanej wyboru z setkami opcji lub wielokrotnego wyboru, możesz sprawdzić niektóre z dostępnych bibliotek. W tym artykule możesz zobaczyć porównanie najpopularniejszych bibliotek.

W przypadku, gdy musisz poradzić sobie z tysiącami opcji, nie możesz wyrenderować DOM z tysiącami elementów opcji.Jeśli nie możesz użyć żadnego zaplecza, będziesz musiał użyć techniki „okienkowania”.

Co to jest technika „okienkowa”?

Zamiast renderować tysiące elementów z listy w Kiedyś „okienkowanie” lub wirtualizacja skupia się na renderowaniu tylko elementów widocznych dla użytkownika. Możesz sprawdzić to, co Brian David Vaughn mówi o implementacji techniki „okienkowania”, która jest łatwa do wdrożenia i może zapewnić ogromny wzrost wydajności.

Podsumowanie

Mam nadzieję, że ten wpis na blogu pomoże Ci zbudować niestandardowy składnik listy rozwijanej wyboru. Najpierw musisz wiedzieć, czy lista rozwijana wyboru zawiera wiele opcji, czy też użytkownicy mogą wybrać wiele opcji. Jeśli potrzebujesz podstawowego komponentu select, post na blogu opisuje całą implementację w HTML, CSS i JavaScript. Możesz sprawdzić kod źródłowy na Github.