Class: Accordion

Клас Accordion створює групу елементів, які перемикаються при кліку на їх заголовки. Коли один Element з'являється, інші зникають.

Примітки:

• Accordion вимагає, щоб сторінка була в Standards Mode.
• Елементи Accordion будуть позбавлені відступів (padding) та рамок (borders) для коректного відображення переходу. Найкраща практика — використовувати елементи accordion як контейнери для елементів, стилізованих саме так, як вам потрібно.

Розширює:

Fx.Elements

Синтаксис:

var myAccordion = new Accordion(togglers, elements[, options]);

Аргументи:

1. togglers - (масив) Колекція елементів, які будуть клікабельними та запускатимуть відкриття секцій Accordion.
2. elements - (масив) Колекція елементів, до яких будуть застосовані переходи.
3. options - (об'єкт, опціонально) Всі Fx опції крім тих, що наведені нижче.

Опції:

• display - (ціле число: за замовчуванням 0) Індекс елемента, який показати на початку (з переходом).
• show - (ціле число: за замовчуванням 0) Індекс елемента, який показується спочатку.
• height - (булеве: за замовчуванням true) Якщо true, ефект переходу висоти відбуватиметься при перемиканні між відображеними елементами.
• width - (булеве: за замовчуванням false) Якщо true, перехід ширини відбуватиметься при перемиканні між відображеними елементами.
• opacity - (булеве: за замовчуванням true) Якщо true, ефект переходу непрозорості відбуватиметься при перемиканні між відображеними елементами.
• fixedHeight - (булеве: за замовчуванням false) Якщо false, відображені елементи матимуть фіксовану висоту.
• fixedWidth - (булеве: за замовчуванням false) Якщо true, відображені елементи матимуть фіксовану ширину.
• alwaysHide - (булеве: за замовчуванням false) Якщо true, можна буде закрити всі відображені елементи. Інакше один залишатиметься відкритим постійно.
• width - (булеве: за замовчуванням false) Якщо true, додасть перехід ширини до accordion. Попередження: потрібне володіння CSS, щоб це спрацювало!

Повертає:

• (об'єкт) Новий екземпляр Accordion.

Події:

active

• (функція) Function, який виконується, коли елемент починає показуватися.

Підпис:

onActive(toggler, element)

Аргументи:

1. toggler - (елемент) Перемикач для Element, що відображається.
2. element - (елемент) Element, що відображається.

background

• (функція) Function, який виконується, коли елемент починає ховатися.

Підпис:

onBackground(toggler, element)

Аргументи:

1. toggler - (елемент) Перемикач для Element, що відображається.
2. element - (елемент) Element, що відображається.

Приклади:

var myAccordion = new Accordion($$('.togglers'), $$('.elements'), {

    display: 2,
    alwaysHide: true
});

Демо:

• Accordion - http://demos.mootools.net/Accordion

Метод Accordion: addSection

Динамічно додає нову секцію до Accordion у вказаній позиції.

Синтаксис:

myAccordion.addSection(toggler, element[, pos]);

Аргументи:

1. toggler - (елемент) Element, що перемикає відкриття секції Accordion.
2. element - (елемент) Element, який має розкритися при кліку на перемикач.
3. pos - (ціле число, опціонально) Індекс, за яким ці об'єкти вставляються в Accordion (за замовчуванням — в кінці).

Повертає:

• (об'єкт) Цей екземпляр Accordion.

Приклади:

var myAccordion = new Accordion($$('.togglers'), $$('.elements'));
myAccordion.addSection('myToggler1', 'myElement1'); // add the section at the end sections.

myAccordion.addSection('myToggler2', 'myElement2', 0); //add the section at the beginning of the sections.

Метод Accordion: display

Показує конкретну секцію та ховає всі інші. Корисно при запуску accordion ззовні.

Синтаксис:

myAccordion.display(index);

Аргументи:

1. index - (змішаний) Індекс елемента для показу, або сам елемент для відображення.

Повертає:

• (об'єкт) Цей екземпляр Accordion.

Приклади:

// Make a ticker-like accordion. Kids don't try this at home.
var myAccordion = new Accordion('.togglers', '.elements', {
    onComplete: function(){

        this.display.delay(2500, this, (this.previous + 1) % this.togglers.length);
    }

});