Buduj responsywne widżety z kartami za pomocą GridTab

Zawsze łatwiej jest budować strony internetowe za pomocą narzędzia open source zamiast wymyślać koło. Narzędzia te obejmują zarówno biblioteki, jak i mniejsze wtyczki, ale można znaleźć rozwiązanie zasadniczo dla każdego.

Fenomenalny Wtyczka jQuery GridTab jest jednym dobrym przykładem. To pozwala skonfigurować niestandardową siatkę, zdefiniuj punkty przerwania, i utwórz responsywny widget z kartami to pasuje do każdej strony internetowej.

Możesz dodać własne klasy CSS lub pracować z istniejącymi klasami, aby utworzyć funkcję pasującą do Twojego projektu. Ta wtyczka obsługuje również elementy nawigacyjne dla kontroli następnej / poprzedniej i przełączanie między kartami.

Instalacja jest prosta i wymaga tylko Biblioteka jQuery jako zależność. Po zainstalowaniu możesz pobrać GridTab z npm lub pobrać bezpośrednio z GitHub.

Pamiętaj, że wtyczka widgetu z kartami ma Domyślny styl, więc ma oddzielny arkusz stylów CSS na górze pliku wtyczki JS. Ale zawsze możesz scalić ten CSS w swój własny, aby zmniejszyć żądania HTTP.

Aby zainicjować wtyczkę, wystarczy przekazać całkowity rozmiar siatki wraz z dowolny opcjonalny parametr (wszystkie wymienione na GitHub).

Oto prosty skrypt inicjalizacyjny:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Ustawienia obejmują selektory niestandardowe, responsywne style, ustawienia obramowania / dopełnienia / koloru, i oczywiście funkcja zwrotna.

Możesz być ciekawy, jak to wszystko działa i jak wygląda w przeglądarce. Sprawdź “Dema” sekcja, aby zobaczyć kilka przykładów, włącznie z surowy kod źródłowy możesz skopiować.

Większość ludzi myśli o kartach jako funkcjach dla widgetów o małym profilu. jednak, portfolio stron internetowych może również skorzystać siatki z funkcjami z kartami a wtyczka GridTab jest najlepszym źródłem do zabijania tego efektu.

Wszystko, co musisz wiedzieć, w tym pełna dokumentacja, można znaleźć na głównej stronie GridTab. Obejmuje to również link do repozytorium GitHub, dzięki czemu można przeglądać źródło i dostosowywać własne siatki z kartami.