gridtab плагин добавляющий табы на сайт

Как добавить табы на сайт. Обзор плагина GridTab

В этой записи мы с вами разберем плагин GridTab, который добавляет на сайт красивые табы. Плагин прост в подключение и легок в настройке. Плагин работает на jQuery.

Документация – https://gopalraju.github.io/gridtab/

Для подключения плагина необходимо подключить библиотеку jQuery. Для этого внутри тега head прописываем следующий код.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

Сам плагин не поддерживает удаленное подключение, поэтому все файлы необходимо скачивать и размещать в свой проект.

После этого мы подключаем файлы стилей внутри тега head.

<link rel="stylesheet" type="text/css" href="gopalraju-gridtab-15b62c4/gridtab/gridtab.min.css"/>

Далее подключаем jQuery скрипты

<script type="text/javascript" src="gopalraju-gridtab-15b62c4/gridtab/gridtab.min.js"></script>

Для добавления табов прописываем код. Тег dt задает заголовок таба, тег dd задает описание.

<dl id="gridtab-1">
<dt>Заголовок 1</dt>
<dd>Описание 1</dd>
<dt>Заголовок 2</dt>
<dd>Описание 2</dd>
<dt>Заголовок 3</dt>
<dd>Описание 3</dd>
</dl>

В конце тега, после основного кода, мы прописываем следующую конструкцию. Это скрипт настройки работы табов. Идентификатор может быть любой, мы используем #gridtab-1

<script>
$(document).ready(function() {
$('#gridtab-1').gridtab({
grid:3, //количество ячеек в одной строке
});
});
</script>

Дополнительные параметры

Базовые настройкиТипСтандартное значениеОписание
gridinteger4Число ячеек в строке
borderWidthinteger2Ширина внешней границы
tabBorderColorstring'#ddd'Цвет внешней границы
tabPaddinginteger25Внутренний отступ ячеек
contentBorderColorstring'#ddd'Цвет внешней границы контентной части
contentPaddinginteger25Внутренний отступ контентной части
contentBackgroundstring'#fff'Цвет заднего фона для контентной части
activeTabBackgroundstring'#fff'Цвет заднего фона для активной ячейки
responsiveArraynullArray of objects having breakpoints and settings object which is enabled at a given breakpoint.
selectorsObjectsee table belowОбъект с параметрами для настройки селекторов.
configObjectsee table belowОбъект с опциями, чтобы включить такие функции, как, установка первоначально активной вкладки, next/prev управления, кнопка закрытия, скорость перехода и т.д.
callbacksObjectopen:false, close:falseОбратные вызовы для открытых и закрытых состояний раздела содержимого.
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

66
Оставить комментарий

avatar
66 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
51 Авторы комментариев
RobertBreryRobertBrerytreantincRandycydayRandycyday Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

No Perscription 20 Mg Cialis [url=https://apcialisle.com/#]cialis prices[/url] Buy Fluconazole No Prescription Buy Cialis Happy Male Viagra

StepFoush
Гость

Levothyroxine 0.2mg [url=http://apcialisle.com/#]Cialis[/url] Uk Propecia Without Prescription Buy Cialis Comprar Cialis Generico En Valencia

StepFoush
Гость

Isotretinoin Website [url=http://apcialisle.com/#]Cialis[/url] Viagra Torrino Cialis Kamagra Sur Femme

JanleF
Гость

Fish Flex Cephalexin Ok For Dogs [url=https://apcialisle.com/#]Buy Cialis[/url] Acheter Prescription Cialis Drugs Interacting With Cephalexin

StepFoush
Гость

Lasix Mexico [url=https://apcialisle.com/#]purchase cialis online cheap[/url] Keflex Dose For Adult Step Throat cheap cialis Prezzo Levitra 10 Mg Per

JanleF
Гость

Viagra Online Tesco [url=https://apcialisle.com/#]buy cialis 5mg[/url] Cialis Generico Alta Qualita canadian cialis Cialis 20 Mg Composizione

JanleF
Гость

Allergic To Keflex [url=https://buyciallisonline.com/#]Cialis[/url] Tips To Lasting Longer Cialis Kamagra Australia Sydney

JanleF
Гость

Online Clomid No Prescription [url=https://apcialisle.com/#]п»їcialis[/url] Viagra Nl Apotheke when will cialis go generic Cialis Con Priligy

JanleF
Гость

Breast Cancer Cephalexin [url=https://apcialisle.com/#]Cialis[/url] Keflex Four Times cialis 5mg best price Vente De Cialis En France

JanleF
Гость

Levitra 10 Mgen Bayer [url=http://cialibuy.com/#]cialis no prescription[/url] Cialis Original buy cheap cialis online Cialis Se Puede Tomar Alcohol

Genarodrisy
Гость
Genarodrisy

can you buy viagra over counter uk pain meds online without doctor prescription buy viagra from canada

Brianrix
Гость
Brianrix

real viagra sale online http://tadmedz.com buy cialis in uk

Mauriceprert
Гость
Mauriceprert

cheap viagra for sale http://cialisxtl.com buy cialis 5mg

Allenploft
Гость
Allenploft

cialis tadalafil cheapest online https://viagrawithoutdoctorspres.com order viagra from boots

JanleF
Гость

Can Amoxicillin Treat Bladder Infections [url=https://abcialisnews.com/#]buying cialis online safe[/url] Cialis Acquistp buy cialis 5mg Viagra Jovenes

Israelevago
Гость
Israelevago

buy black cialis online https://edpillsphrm.com buy generic viagra online canada

JanleF
Гость

Reputable Suppliers Of Generic Viagra [url=https://buyciallisonline.com/#]Cialis[/url] Amoxicillin 250 Mg Sta Buy Cialis Wii Amoxicillin Clear Up My Gingervitis

Thomasneomo
Гость
Thomasneomo

buy viagra sweden https://www.sildwithdoctorprescription.com buy cialis in uk

Michealfrapy
Гость
Michealfrapy

viagra sale toronto http://kaletra24.com – cheap kaletra buy viagra tablets online

Michealfrapy
Гость
Michealfrapy

how to order cialis from canada http://alexa24ph.com – viagra pills can buy viagra vietnam

Michealfrapy
Гость
Michealfrapy

cheap cialis daily http://aralenph.com – aralen order viagra from canada online

Michealfrapy
Гость
Michealfrapy

buy cialis without doctor prescription http://hydroxychloroquine24.com – hydroxychloroquine 200 mg price in india where to buy cialis in canada

Michealfrapy
Гость
Michealfrapy

very nice site cheap viagra http://hydroxychloroquine24.com – plaquenil generic order cialis in canada

JanleF
Гость

Cialis Arginine Interaction [url=https://buyciallisonline.com/#]generic cialis online canada[/url] Comparaison Prix Viagra Cialis Levitra buy cialis from canada El Amoxil

Michealfrapy
Гость
Michealfrapy

buy levitra online cheap http://alexa24ph.com – buy sildenafil cheap viagra generic online

Michealfrapy
Гость
Michealfrapy

can you buy cialis online in australia http://hydroxychloroquine24.com – plaquenil for sale online pharmacy viagra

Michealfrapy
Гость
Michealfrapy

real viagra for sale http://hydroxychloroquine24.com – hydroxychloroquine cheap cialis in uk

Michealfrapy
Гость
Michealfrapy

hard sale evolution viagra salesman http://alexa24ph.com – buy viagra cialis 5 mg

Michealfrapy
Гость
Michealfrapy

best place to buy generic viagra online http://zithazi.com – Azithromycin order genuine viagra online

Michealfrapy
Гость
Michealfrapy

viagra for men for sale http://aralenph.com – cheap chloroquine cheap levitra no prescription

Michealfrapy
Гость
Michealfrapy

how to use cialis 20mg tablets http://aralenph.com – buy alaren when will cialis go generic

Michealfrapy
Гость
Michealfrapy

daily cialis pills http://alexa24ph.com – canadian pharmacy viagra best place buy viagra online

Harryjab
Гость
Harryjab

viagra
legal order viagra online canada

Harryjab
Гость
Harryjab

viagra
levitra for sale no prescription

Harryjab
Гость
Harryjab

buy sildenafil
cialis cheap paypal

Harryjab
Гость
Harryjab

cheap viagra
buy levitra canada online

Harryjab
Гость
Harryjab

how much is viagra
buy black cialis online

Harryjab
Гость
Harryjab

viagra without a doctor prescription
buy cheap cialis in canada

Harryjab
Гость
Harryjab

viagra without a doctor prescription
safe place order cialis

Harryjab
Гость
Harryjab

buy sildenafil
order real cialis

Harryjab
Гость
Harryjab

viagra
ordering cialis online legal

Harryjab
Гость
Harryjab

viagra without a doctor prescription
how to buy viagra or cialis

Harryjab
Гость
Harryjab

viagra without doctor prescription
order viagra no prescription

Harryjab
Гость
Harryjab

generic viagra 100mg
viagra sale over counter

Andrealese
Гость
Andrealese

cialis in canada cialis

MichealLogUe
Гость
MichealLogUe

tiujana cialis cialis online

MichealLogUe
Гость
MichealLogUe

taking l-citrulline and cialis together buy cialis online

EldenEvist
Гость
EldenEvist

https://sildenafilprof.com female viagra pills

EldenEvist
Гость
EldenEvist

https://sildenafilprof.com levitra vs viagra

DavidNak
Гость
DavidNak