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
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.
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);}});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