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

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

avatar
  Подписаться  
Уведомление о