Създайте отзивчиви притурки с GridTab

Винаги е по-лесно да се използват уебсайтове инструменти с отворен код вместо да преоткриваме колелото. Тези инструменти варират от библиотеки до по-малки плъгини, но можете да намерите решение за всичко.

Феноменалното jQuery GridTab плъгин е един прекрасен пример. Това ви позволява настройте персонализирана мрежа, определят точките на прекъсване, и създайте отговорен притурка за табулации който е подходящ за всеки уебсайт.

Можете да добавите свои собствени CSS класове или да работите със съществуващи такива, за да създадете функция за раздели, която отговаря на вашия дизайн. Този плъгин също поддържа навигационни елементи за контрол следващ / предишен и превключване между разделите.

Инсталацията е бриз и изисква само jQuery библиотека като зависимост. След като бъде инсталиран, можете да вземете GridTab от npm или да го изтеглите директно от GitHub.

Имайте предвид, че приставката за приспособления с раздели има стил по подразбиране, така че има отделна CSS стилова таблица върху файла с приставки на JS. Но винаги можете да обедините този CSS в свой собствен, за да намалите HTTP заявките.

За да инициализирате плъгина, просто прехвърляте общ размер на мрежата заедно с всеки незадължителен параметър (всички изброени в GitHub).

Ето един прост скрипт за инициализация:

 $ (document) .ready (функция () $ ('# gridtab-1'). gridtab (grid: 3);); 

Настройките включват потребителски селектори, отзивчиви стилове, настройки на граница / подложка / цвят, и разбира се, a функция за обратно извикване.

Може да сте любопитни да видите как работи всичко това и как изглежда във вашия браузър. Разгледайте “Демонстрации” раздел, за да видите a няколко примера, включително суров изходен код можете да копирате.

Повечето хора мислят за раздели като функции за малки профилни джунджурии. въпреки това, портфолио уебсайтове също може да се възползва решетки с функции с табове и плъгинът GridTab е най-добрият ресурс за забиване на този ефект.

Всичко, което трябва да знаете, включително пълна документация, може да се намери на главната страница на GridTab. Това включва и връзка към репо GitHub, за да можете да преглеждате източника и да започнете да персонализирате собствените си мрежи с табове.