Switcher.js

Это библиотека для переключения элементов на веб-странице. В минифицированном виде весит 3кб!

На этой странице демонстрируется функционал, а описание методов и свойств в readme: https://github.com/artnv/switcher

1. Простое переключение

Используются методы .addTabs() и .addBlocks(), а для включения таба по умолчанию метод .turnOn(1)где "1" это позиция элемента, который будет включен. Отсчет с нуля.

2. Табы без блоков

Можно просто использовать .addTabs(), для элементов не требующих блоков

3. Простое переключение и отключение

Для отключение элемента при повторном нажатии следует передать объект со свойством switchers.items({backClickTurnOff: true})

4. Переключение с событием mouseover

Так же можно назначить и другой обработчик событий, передав одно из стандартных свойств в качестве аргумента: "onclick", "mouseover" и т.д. switchers.items({eventMethod: "mouseover"})

5. Привязка к одиночному элементу

Во всех вариантах привязка осуществлялась автоматически, последовательно, к позиции элемента из коллекции NodeList. А сейчас привязывается к id-табу и к id-блоку. Это удобно для произвольного расположения на странице

6. Индекс элемента

Внутри передаваемых функций-обработчиков .addTabs("#id a", Функция включения, Функция отключения) и .addBlocks("#id ul li", Функция, Функция), будет доступно свойство как внутри таба так и внутри блока: this.index – оно содержит позицию элемента в текущей коллекции

7. Вертикальный вариант

Один из вариантов расположения. Табы и блоки можно располагать произвольно на странице

8. С анимацией

Анимация не часть функционала, но ее легко сделать

9. Анимация с блокировщиком

this.stop() – блокирует реакцию табов на события, пока не завершится действие внутри блока и не вызовется метод this.next() Эти методы доступны внутри функций-обработчиков, так же как и свойство this.index

10. Работа методов .addEnemies() и .addFriends()

И так, добавляем все объекты в .addEnemies(a, b, c, d), порядок и количество аргументов не ограниченно. Теперь они будут конфликтовать между собой, т.е. если один включится, то все остальные выключатся.

А, .addFriends([a, c]) следует вызывать после .addEnemies(a, b, c, d). Этот метод заставляет дружить конфликтные объекты, например если запустится объект a, он не отключит объект c, но отключит все остальные. В качестве аргументов следует передавать массивы состоящие из объектов, например: .addFriends([a, c], [b, d, d], [e, f, g, k]). Группы из массивов образуют неконфликтные комбинации

В этом примере все объекты добавлены в .addEnemies(1, 2, 3, 4), а первый и третий в addFriends([1, 3])

11. Объединение нескольких табов и блоков

Более реальный пример использования