Всем привет, это вторая статья и серии плагинов под названием Ion. Сегодня расскажу о плагине с помощью которого можно быстро и легко создать вкладки(табы). У плагина Ion.Tabs настроек практически нет, одна настройка и пару callback событий, но они весьма полезны.

Особенности плагина

  • Поддерживает несколько групп вкладок на одной странице.
  • Генерирует события и выполняет функции обратного вызова.
  • Поддерживает несколько видов сохранения позиции вкладок, в том числе и для нескольких групп на одной странице.
  • Очень легкий в настройке и стилизации. Поддерживает скины.
  • Имеет публичные методы для управления извне.
  • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).

Подключение

1
2
3
4
5
6
<link rel="stylesheet" href="ion.tabs.css">
<link rel="stylesheet" href="normalize.min.css"> <!--желательно, если он у вас еще не подключен)-->

<!-- И по желанию можно подключить какой-нибудь скин который есть в архиве -->

<script src="ion.tabs.min.js"></script>

Инициализация

Создаем следующую HTML стуктуру:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="ionTabs" id="tabs_1" data-name="Tabs_Group_name">
    <ul class="ionTabs__head">
        <li class="ionTabs__tab" data-target="Tab_1_name">Имя вкладки 1</li>
        <li class="ionTabs__tab" data-target="Tab_2_name">Имя вкладки 2</li>
        <li class="ionTabs__tab" data-target="Tab_3_name">Имя вкладки 3</li>
    </ul>
    <div class="ionTabs__body">
        <div class="ionTabs__item" data-name="Tab_1_name">
            Контент вкладки 1
        </div>
        <div class="ionTabs__item" data-name="Tab_2_name">
            Контент вкладки 2
        </div>
        <div class="ionTabs__item" data-name="Tab_3_name">
            Контент вкладки 3
        </div>

        <div class="ionTabs__preloader"></div>
    </div>
</div>

Чтобы запустить вкладки, вызываем плагин $.ionTabs(«селектор»):

1
2
$.ionTabs("#tabs_1");
$.ionTabs("#tabs_1, #tabs_2, #tabs_3"); //если хотите запустить несколько групп вкладок

Параметры

ПараметрПо умолчаниюОписание параметра
typehashНе обязательный параметр, позволяет выбрать тип запоминания позиции вкладок:
hash — сохраняет позицию вкладок в адресную строку в виде хэша (см. пример в адресной строке). Позволяет передавать позицию вкладок по ссылке.
storage — сохраняет позицию вкладок в Local Storage. Позиция вкладок сохраняется только в пределах одного компьютера.
none — позиция вкладок нигде не сохраняется, при обновлении страницы будет открыта первая вкладка в каждой группе.

Функции обратного вызова и события

ПараметрПо умолчаниюОписание параметра
onChangeВызывается каждый раз при переключении вкладки, возвращает объект с названием группы, названием вкладки и ID атрибует выбранной вкладки.
window.event ionTabsChangeЛибо вы можете подписаться на событие ionTabsChange.
Событие получает тот же самый объект с данными что и функция onChange.

Пример инициализации вкладок с параметрами:

1
2
3
4
5
6
$.ionTabs("#tabs_1, #tabs_2", {
    type: "storage",                    // hash, storage или none
    onChange: function(obj){            // функция обратного вызова
        console.log(obj);
    }
});

Подписаться на событие переключения вкладок можно так:

1
2
3
4
5
$(window).on("ionTabsChange", function(e, obj){
    console.log(obj.group);
    console.log(obj.tab);
    console.log(obj.tabId);
});

Публичные методы

Переключение вкладки извне:

1
2
3
$(".myButton").on("click", function(){
    $.ionTabs.setTab("Tabs_Group_name", "Tab_1_name");
});

Возможно вас это заинтересует
comments powered by HyperComments