Ion.Tabs 1.0.2
Легкий и удобный плагин для создания вкладок(табов) с поддержкой скинов

Обратная связь и поддержка

В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub

Поддержать

Поддержите разработку ion.RangeSlider «Патреон»
Bitcoin 13vdgT6EoAVupdGuLhE4ABW245NTixAj1G

Реклама

Описание

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

Демо

Рамочный скин Плоский скин
  • Информация
  • Описание
  • Полезности

В кабинете, где я провожу своё рабочее время, нет окон на улицу, поэтому освещение целиком и полностью лежит на лампах дневного света, смонтированных на потолке. Увы, но у меня довольно чувствительные глаза, поэтому замечаю мерцание и к концу дня ощущаю себя несколько разбитым. Частично проблему решил покупкой качественной настольной лампы, а затем и специальных компьютерных очков с жёлтыми линзами.

Недавно коллега по работе рассказал о том, что в стандартных светильниках используются дешёвые ПРА (пускорегулирующие аппараты), и что при желании их можно заменить на более продвинутые ЭПРА (электронные ПРА). Преимущества перед обычным пуском заключаются в быстром зажигании ламп, отсутствии характерного звука от дросселя, фильтре, убирающем мерцание, а также более щадящем отношении к лампам.

Прочитав описание на википедии, а также впечатлившись рассказами коллеги, на следующий же день купил две ЭПРА (себе и жене), первые попавшиеся в местной барахолке для ламп типа T8 мощностью 18 Вт. Один поставил сразу, и тут же заметил, что не вижу раздражающего мерцания, а лампы стали светить ярче. Через пару дней подключил второй ЭПРА в светильник над рабочим местом жены, заодно решил сфотографировать весь процесс. Возможно, вам данная статья покажется тривиальной и дилетантской, но лично мне и нескольким моим коллегам эти знания были в новинку.

  • История
  • Миссия
  • Прогресс
  • Фотогалерея
  • Контакты

Перед началом работ замерил световой поток, вышло около 405-407 люкс. Хотя устанавливаю ЭПРА в основном с целью избавиться от мерцания, точнее увеличить его частоту, но изменения в яркости также интересны, ведь в электронном пуске заявлен больший КПД.

Итак, рассеиватель снят, лампы выкручены, теперь на потолке висит «голый» светильник. В нём переходник для кабеля питания, идущего под навесным потолком (торчит из дырки по центру), две ПРА, а также дополнительные преобразователи напряжения (не силён в электрике, поэтому не знаю наверняка их роль). Всё это богатство соединено с контактами для ламп при помощи проводов и щедро сдобрено годами копившейся пылью.

Выключив верхний свет и открутив зажимы с питания (если будете делать, не забудьте оголённые контакты на время работ защитить изолентой), вытащил светильник из навесного потолка и положил его на пол. Верная помощница тут же протёрла его от пыли / грязи, так как при установке предыдущего ЭПРА я знатно угваздался (на фото только начало помывки).

Отломав кусачками крепления, вытащил из светильника всю ненужную начинку, предварительно отсоединив от устройств провода, так как они понадобятся в дальнейшем. Единственное, что осталось и не пригодилось — это переходник для кабеля питания. В прошлой установке использовал его, так как в той проводке не оказалось земли. В этот раз заземление было, поэтому подключил провода напрямую к ЭПРА, потому что переходник заземляет только корпус светильника.

Дрели и сверла под рукой не было, поэтому отверстия в тонкой жести прокрутил отвёрткой и острым саморезом. Понадобилось сделать две новых дырки под габариты креплений нового ЭПРА. После чего прикрутил устройство двумя широкими и короткими обрубленными шурупами, держится крепко и на умеренно сильные дёргания не поддаётся.

window.event "ionTabsChange"
Result 1
callback "onChange"
Result 2

Зависимости

Использование

Подключаем библиотеки:

  • jQuery
  • ion.tabs.min.js

Подключаем стили:

  • normalize.min.css (желательно, если он у вас еще не подключен)
  • ion.tabs.css

Не забываем про скин. 2 скина включены в архив:

  • ion.tabs.skinBordered.css
  • ion.tabs.skinFlat.css

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

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

<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("селектор"):

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

Параметры

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

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

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

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

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

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

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

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

Переключение вкладки извне: $.ionTabs.setTab(group, tab);:

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

История обновлений

  • 01.11.2013 - Исправлен баг с методом setTab
  • 19.10.2013 - Исправлено несколько мелких багов, проведена оптимизация кода, исправлены неточности в описании
  • 15.09.2013 - Релиз плагина

Скачать

Поддержать

Поделиться

comments powered by Disqus
Fork me on GitHub