Vytvářejte citlivé widgety s kartami GridTab

Vytváření webových stránek je vždy jednodušší open source nástroje spíše než znovu objevovat kolo. Tyto nástroje sahají od knihoven až po menší pluginy, ale můžete najít řešení v podstatě cokoliv.

Fenomén jQuery GridTab plugin Je to jeden dobrý příklad. To vám umožní nastavit vlastní mřížku, definovat body přerušení, a vytvořte citlivý widget s kartami který vyhovuje všem webovým stránkám.

Můžete přidat vlastní třídy CSS nebo pracovat s existujícími, abyste vytvořili funkci karty, která vyhovuje vašemu návrhu. Tento plugin také podporuje navigačních prvků pro další / předchozí ovládání a přepínání mezi kartami.

Instalace je hračkou a vyžaduje pouze Knihovna jQuery jako závislost. Jakmile je nainstalován, můžete chytit GridTab z npm nebo stáhnout přímo z GitHub.

Mějte na paměti, že tento plugin s kartami má a výchozí styl, tak to má samostatný styl CSS v horní části souboru JS plugin. Můžete však vždy sloučit tento CSS do své vlastní, aby se snížily požadavky HTTP.

Chcete-li plugin inicializovat, jednoduše přejdete celková velikost mřížky spolu s libovolný volitelný parametr (všechny uvedené na GitHub).

Tady je jednoduchý inicializační skript:

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

Nastavení obsahuje vlastní voliče, citlivé styly, nastavení okrajů / polstrování / barev, a samozřejmě funkce zpětného volání.

Možná budete zvědaví, jak to všechno funguje a jak to vypadá ve vašem prohlížeči. Podívejte se na “Dema” sekce a několik příkladů, počítaje v to zdrojový kód můžete kopírovat.

Většina lidí si myslí, že karty jsou funkce pro malé profily. nicméně, webové stránky portfolia může také využít mřížky s kartami a plugin GridTab je nejlepším zdrojem pro přiblížení tohoto efektu.

Vše, co potřebujete vědět, včetně kompletní dokumentace, najdete na hlavní stránce GridTab. To také zahrnuje odkaz na repozitář GitHub, takže můžete procházet zdrojem a začít upravovat vlastní mřížky s citlivými kartami.