artnv / switcher

Переключатель DOM-элементов как одиночных, так и коллекций, включая выборочные комбинации

Switcher.js

v0.5.2

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

Используется один обработчик событий на коллекцию NodeList, так же в методах используется кеширование, что минимизирует обращение к DOM.

Визуальные примеры: https://artnv.github.io/switcher/index.html

Примеры кода со страницы, находятся в директории /examples/

Содержание

Для лучшего понимания, читать последовательно!

Методы

• var x = Switcher.items() - Возвращает новый объект, с управляющими методами

  • x.addTabs() - Добавляет табы
  • x.addBlocks() - Добавляет блоки
  • x.turnOn() - Сначала выключает все элементы (или ранее включенный элемент), а потом включает один элемент (номер-индекс из аргумента)
  • x.turnOff() - Выключает все элементы
  • x.stop() - Блокирует реакцию табов на события
  • x.next() - Возобновляет реагирование табов на события

• Switcher.addEnemies() - Оставляет включенным только один объект, остальные отключает

• Switcher.addFriends() - Вызывается после .addEnemies(). Создает комбинации из объектов, которые будут работать параллельно не отключая друг друга

Свойства и методы внутри функций-обработчиков

• this.index - Свойство возвращает текущий индекс в NodeList, как табов, так и блоков
• this.stop() и this.next() - Одноименные синонимы методов что выше

Switcher.items()

Метод возвращает объект и принимает необязательный аргумент в виде объекта со свойствами.

var x = Switcher.items({
	eventMethod: "mouseover", // Реакция на события (названия из стандартного списка). По умолчанию - onclick
	backClickTurnOff: true // Свойство которое позволяет включать и отключать один и тот же элемент, при повторном событии. По умолчанию - false 
});

x.addTabs()

Этот метод добавляет табы, они реагируют на события и переключают как самих себя так и блоки. Табы можно использовать без блоков.

.addTabs() принимает три аргумента:

1. Строку с тегами указывающими на коллекцию элементов(NodeList), либо на одиночный элемент
2. Функция срабатывает при включении таба
3. Функция срабатывает при отключении таба

Функции-обработчики можно не добавлять. По умолчанию, у табов их нет, а у блоков display: block/none.

Внутри функций-обработчиков можно обращаться к активному табу через this. Так же внутри этих функций будут доступны свойства и методы this.index, this.stop()/.next(), как в табах, так и в блоках

var x = Switcher.items();

x.addTabs('ul li', function () {
	// Функция срабатывает при включении таба
	this.style.color = "red";
}, function () {
	// Функция срабатывает при отключении таба
	this.style.color = "black";
});

x.addBlocks()

Метод добавляет блоки, которые переключаются табами.

Все так же как и у табов, .addBlocks() принимает три аргумента:

1. Строку с тегами указывающими на коллекцию элементов(NodeList), либо на одиночный элемент. Количество элементов должно совпадать с количеством табов!
2. Функция срабатывает при включении блока
3. Функция срабатывает при отключении блока

x.addBlocks('#block span'); // Так же можно добавить функции-обработчики. Поведение такое же как и у табов

x.turnOn()

Метод включающий элемент по номеру, который передается в качестве аргумента. Отсчет с нуля. При включении сначала отключает все остальные элементы (или отключает ранее включенный из кеша).

x.turnOn() - Для включения и отключения элементов, запускает функции-обработчики, который ранее были переданы в методы .addtabs() и .addBlocks()

x.turnOn(0); // Включит первый элемент
x.turnOn(1); // Включит второй элемент, и отключит первый

x.turnOff()

Метод выключающий все элементы

x.turnOff()

x.stop() и x.next()

x.stop() - Блокирует реакцию табов на события. x.next() - Возобновляет реагирование.

Синонимы методов доступны внутри функций-обработчиков как this.stop() и this.next().

x.addBlocks('#block img', function() {
	
	var that = this;
	
	this.stop(); // Табы блокируются
	setTimeout(function() {
		this.next(); // Табы реагируют
	}, 5000)

}, function() {});

Switcher.addEnemies()

Метод принимает неограниченное количество объектов от Switcher.items(), в качестве аргументов.

При включении одного элемента у объекта или вызова метода .turnOn(), отключаются все элементы во всех объектах, которые были переданы в данный метод Switcher.addEnemies().

Попросту, включенным может быть один объект со своим табом и блоком. Остальные отключатся

Switcher.addEnemies(a, b, c, d); // Конфликтные объекты в качестве аргументов, которые будут отключат друг друга при включении

Switcher.addFriends()

Метод должен запускаться после Switcher.addEnemies(), который заставляет дружит конфликтные объекты. В качестве аргументов принимает неограниченное количество массивов, состоящих из объектов, которые ранее были переданы в метод Switcher.addEnemies(). Массивы как бы комбинации групп-друзей.

Switcher.addEnemies(a, b, c, d); // При включение одного элемента, все объекты будут отключатся, кроме активного
Switcher.addFriends([a, c], [x, y, z]); // Комбинация, которая работает параллельно, не отключая друг друга.

this.index

Свойство доступное в функциях-обработчиках, как в табах, так и в блоках, ссылающиеся на порядковый номер в коллекции NodeList. Отсчет с нуля.

x.addBlocks('ul li', function () {
	
	console.log(this.index);
	
});