Interaktywny projekt

Jak stylizować «Wybierz poziomy za pomocą DropKick

Jeśli chodzi o stylizowanie stron internetowych, nic nie jest tak trudne jak formy. A jeśli chodzi o stylizację formy - prawie - nic nie jest tak trudne jak z CSS, ale istnieją duże ograniczenia dotyczące tego, ile możemy osiągnąć dzięki samemu CSS. Często jedyną realną opcją jest stylizacja za pomocą JavaScript, a jako forma stopniowego ulepszania, nie jest to coś, z czego musimy się wystrzegać.

W tym artykule będziemy używać DropKick utworzyć listę rozwijaną. Co to jest dropkick to przekształcenie

Pierwszą rzeczą, którą musimy zrobić, to skonfigurować a

Dzwonię do DropKick

Kiedy już skonfigurujemy nasze w coś możemy być pewni stylizacji za pomocą CSS. Ponadto nasze wartości zostały wstawione do nowych atrybutów danych HTML5 (z nazwą data-dk-dropdown-value).

Możemy teraz stylizować nasze rozwijanie za pomocą CSS lub użyć jednego z motywów DropKick, jeśli wolimy; w chwili pisania tego tekstu dostępne są trzy motywy, domyślny, ciemny połysk i jasny połysk. Jednak większość ludzi będzie chciała używać własnych stylów, które pasują do potrzeb ich projektu.

Rozszerzanie DropKick

Rozszerzenie DropKick to prosty proces. Na przykład, jeśli chcemy wykryć, kiedy wprowadzana jest zmiana w liście rozwijanej, możemy dodać procedurę obsługi zdarzeń zmiany, jak na przykład: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Końcowe przemyślenia

Jestem pewien, że istnieje tysiąc sposobów na stylizację wybranego menu bez użycia jQuery, ale te, które używają tylko CSS, walczą przegrywając z domyślnymi ustawieniami przeglądarki. Prostota tej wtyczki i ogromna elastyczność, którą oferuje, oraz stopniowe ulepszanie, które oferuje, oznacza, że ​​DropKick jest doskonałym rozwiązaniem.

Czy używałeś DropKick w projekcie? Czy masz preferowaną metodę stylizacji