Как добавить табы на сайт. Обзор плагина 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>

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