Предисловие
Переключаемые вкладки, аккордеоны и прочие переключатели — всё это обычное явление в современном интернете.
Есть также большое число графических JS библиотек и фраймворков, в том числе реализующих данный функционал, перечислять даже не имеет смысла.
Ниже отличия от (и отсюда же преимущества над) широко известными
Суть/Абстракция
Есть некоторая группа содержимого из которого активным может быть только один элемент.
Таких групп на странице может быть несколько. Таким образом нужно работать с:
- названием группы
- названием элемента
- возможностью как-то задавать/переключать активный элемент.
Данный подход позволяет реализовать любой переключатель совершенно не привязанный к вёрстке. В чём состоит отличие от общеизвестных библиотек с готовым набором стилей, классов для реализации жёсткого заданного типа переключателя с фиксированным набором элементов.
Реализация/Использование
1) Для включения HTML элемента в группу ему добавляется атрибут data-content-of-group=«имя(ключ) группы»
2) Для указания ключа HTML элемента ему добавляется атрибут data-key-in-group=«имя(ключ) содержимого в группе»
пример
<div data-content-of-group="lessons" data-key-in-group="1">...</div>
3) Для активации/переключения активного элемента задаются элементы ссылки — links, аналогично определению содержимого, только будет использован атрибут data-link-of-group вместо data-content-of-group
пример
<a data-link-of-group="lessons" href="#" data-key-in-group="1"> Приступить к уроку 1</a>
Можно определять более 1 элемента и ссылки для 1 ключа содержимого.
Переключатель(и) начнут функционировать по завершению загрузки страницы. Клики по ссылкам реализованы через подписку на live(«click») — так что они будут работать сразу, в том числе для динамически добавленных элементов.
Активное содержимое(ые) и ссылка(и) имеет класс «active».
Все группы присутствующие на странице в момент завершения загрузки страницы проверяется на наличие активного элемента содержимого в группе (имеющего соответствующий css class). Если такового нет одно содержимое из группы становиться «активным».
Осталось добавить стили.
Задание стилей
Сам распространённый сценарий отображать только активное содержание.
Я обычно использую следующие стили:
.tabHidden{ display: none; } .tabsContainer .active{ display: block; }
добавляю класс tabHidden для элемента содержимого и оборачиваю элементы содержимого
<div class="tabsContainer">...</div>
Расширенное использование(Advanced Usage)
Привязка на события
keyContentSwitcher.tabChanged возникает после смены активного содержимого
Пример подписки на событие:
keyContentSwitcher.tabChanged("имя_группы", function(groupKey, key-in-group){ alert("произошла смена активного содержимого для группы "" + groupKey + """);})
keyContentSwitcher.beforeTabChanged возникает перед сменой активной вкладки. Можно запретить смену содержимого вернув false.
В обоих случаях key-in-group — имя активируемого ключа, для получения текущего активного ключа содержимого в beforeTabChanged обработчике можно вызвать функцию
keyContentSwitcher.getActiveKey(groupKey)
Если название группы не указанно при задании обработчика он будет вызываться для всех групп.
Использование вложенных переключателей
Частая ситуация когда внутри содержимого переключателя находиться ещё одна группа содержимого (подгруппа).
Часто эти элементы вызывают при инициализации (выборе первого активного содержимого группы) «тяжёлые» скрипты — аjax запросы, работа с графикой и тому подобное.
Поэтому для такой подгруппы правильнее будет активироваться только когда содержимое «родитель» будет показано. Для этого активизация группы подавляется.
Для подавления активации группы её нужно добавить в список подавляемых, указываемый при установки параметров.
keyContentSwitcher.applySettings({ignoredToActivateGroups:["игнорируемая_группа",...]});
Данный вызов должен быть осуществлён до завершения загрузки страницы.
При этом под активации подразумевается только лишь выбор активного содержимого для группы и срабатывание соответствующих обработчиков — если активное содержимое группы не выбрано.
Активация группы
Для автоматического выбора активного содержимого для динамически добавленной или группы используемой в списке подавления необходимо «активировать» группу. Активация группы производиться функцией
keyContentSwitcher.activateGroup("название_группы")
Если нужно активировать конкретное содержимое воспользуйтесь функцией
keyContentSwitcher.setActiveKey("название_группы", "ключ_содержимого")
Переименование атрибутов
В случаи конфликта имён — когда HTML атрибуты необходимые для функционирования библиотеки используется другой библиотекой;
а также по каким-либо другим причинам (например, я использовал изначально атрибуты _reg_tabGroupLink, _reg_tabGroupBody, _reg_tabKeys)
их можно переопределить, а также можно переопределить css класс определяющий что элемент «активный» при установке параметров
keyContentSwitcher.applySettings( {linkOfGroup : "link-of-group", contentOfGroup : "content-of-group", keyInGroup : "key-in-group", activeClass : "active", prefix: "data-"});
каждый используемый HTML атрибут задаётся как prefix + attributeName. Поэтому в случая конфликта имён достаточно переименовать только prefix.
prefix по умолчанию «data-» используется для валидности HTML вёрстки.
Другое
Часть функций не приведена для краткости — смотри в коде.
Примеры
Вертикальные Вкладки
Горизонтальные вкладки
Аккордеон
Вложенные вкладки
Переименование атрибутов
Динамическое содержание
Использование в реальном проекте (используется старая версия библиотеки — приведено для отображения возможностей библиотеки)
Использование нескольких содержимых и нескольких ссылок на одном ключе
Требования
Библиотеке требуется jquery начиная от версии 1.4
Проблем с браузерами и популярными JS библиотеками не выявлено.
Автор: kamilgarey
