Основное
Делаем аккордион
Для создание простого аккордиона нужно всего лишь выбрать пары из элементов: заголовок и содержания. Итак, вначале, назначим класс каждому нужному названию и класс элементу с содержанием:
<h4 class="togglers">Заголовок 1</h4> <p class="elements">Тут содержание - текст - для заголовка 1</p> <h4 class="togglers">Заголовок 2</h4> <p class="elements">Тут содержание - текст - для заголовка 2</p>
Теперь можно просто перенести данные классов в переменные и запустить новый объект accordion.
//Назначаем заголовки, которые будут, по совместительству, и активными областями var zags_demo = $$('.togglers_1'); //Назначаем содержание, которое будет скрыто до активации соответствующего заголовка var content_demo = $$('.elements_1'); //определяем объект accordion //и передаем в качестве параметров назначенные выше переменные var DemoAccordionObject = new Accordion(zags_demo, content_demo);
Такое простое определение объекта даст следующий результат:
Заголовок 1
Содержание, находящееся под заголовком 1
Заголовок 2
Содержание, находящееся под заголовком
Заголовок 3
Содержание, находящееся под заголовком
Параметры
Как и при работе со всеми остальными объектами Mootools, у Accordion имеются параметры, которые нужно использовать, если настраиваете что-то большее, чем дефольтный Accordion. Встречайте! Параметры Accordion!
display
По умолчанию 0.
Этот параметр определяет, какой из элементов будет отображаться при загрузке страницы. По умолчанию параметр имеет значение 0, что означает, что при загрузке показывается первый элемент списка. Чтобы установить другой элемент, используйте любое другое значение (целое число). В отличие от параметра show, display отобразит элемент с небольшой анимацией.
var AccordionObject = new Accordion(toggles, content { display: 0 //значение по умолчанию });
show
По умолчанию 0.
Примерно, как и парамер display, show определяет, какой элемент будет отображаться при загрузке страницы. Однако, в отличии от display, он просто показывает, без какой-либо анимации.
var AccordionObject = new Accordion(toggles, content { show: 0 //значение по умолчанию });
height
По умолчанию true.
При значении true этот параметр определяет, будет ли контент показан с привязкой к высоте. Это стандартное выполнение эффектов Accordion, показанное немного выше.
var AccordionObject = new Accordion(toggles, content { height: true //значение по умолчанию });
width
По умолчанию false.
Назначение этого параметра похоже на праметр height, но вместо того, чтобы изменять высоту для отображения контента, изменяться будет ширина. При использовании ‘width’ со стандартным набором параметров (как показано выше), то расстояние между заголовком останется прежним, в зависимости от высоты контента. Сам же блок с контентом откроется слева направо для отображения контента в этом пространстве.
var AccordionObject = new Accordion(toggles, content { height: true //значение по умолчанию });
opacity
По умолчанию true.
Параметр определяет, будет или не бует приминяться эффект прозрачности при отображаении контента. Эффект этого параметра можно увидеть в примере выше – мы же там использовали обычное определение объекта, потому там и используются стандартные значения параметров.
var AccordionObject = new Accordion(toggles, content { opacity: true //значение по умолчанию });
fixedHeight
По умолчанию false.
Используется для установки фиксирвованной высоты. Нужное значение – число (можно установить на 100, чтобы задать высоту в 100 пикселей). Параметр следует использовать о свойством overflow каскадныйх таблиц стилей, когда необходимая фиксированная высота блока меньше, чем естественная высота блока с контентом.
var AccordionObject = new Accordion(toggles, content { fixedHeight: false //значение по умолчанию });
fixedWidth
По умолчанию false.
Не трудно догадаться, что этот параметр работает также, как и fixedHeight, только работает с шириной блока.
var AccordionObject = new Accordion(toggles, content { fixedWidth: false //значение по умолчанию });
alwaysHide
По умолчанию false.
Позволяет добавить управление к заголовкам блоков. При установке на true, при клике на заголовок открытого блока, блок закроется без того, чтобы открывать какой-либо другой блок. Смотрите этот параметр в работе в примере ниже.
var AccordionObject = new Accordion(toggles, content { alwaysHide: false //значение по умолчанию });
События
onActive
Срабатывает, когда подается команда на открытие элемента. В параметрах функции будет управляющий элемент, элемент, чей контент открывается и параметры.
var AccordionObject = new Accordion(toggles, content { onActive: function(toggler, element) { toggler.highlight('#76C83D'); //элемент управления подсветим зеленым element.highlight('#76C83D'); } });
onBackground
Срабатывает, когда элемент начинает закрываться. Передает все другие элементы, которые закрываются, но не открываются.
var AccordionObject = new Accordion(toggles, content { onBackground: function(toggler, element) { toggler.highlight('#DC4F4D'); //элемент управления подсветим красным element.highlight('#DC4F4D'); //элемент закрывающийся подсветим красным } });
onComplete
Как можно догадаться, это событие срабатывает, по завершению действия. Передает переменную с элементом контента. Возможно существуют лучшие методы получить доступ к контенту, поэтому, если кто-то их знает, пишите 
var AccordionObject = new Accordion(toggles, content { onComplete: function(one, two, three, four){ one.highlight('#5D80C8'); //отмечаем синим two.highlight('#5D80C8'); three.highlight('#5D80C8'); four.highlight('#5D80C8'); } });
Методы Accordion-a
.addSection();
Добавляет пару заголовок/контент в объект Accordion. Работает схоже с остальными методами, о которых уже шла речь в наших уроках. К переменной объекта прикрепляем .addSection, после чего нужно обратится к id заголовка, id контента и далее нужно указать, какое по счёту положение новая пара должна принять (0 – начало списка).
AccordionObject.addSection('togglersID', 'elementsID', 2);
Тут стоит заметить, что если таким образом добавлять объекты, то порядковый индекс нового объекта будет не 2, а +1 к индексу последнего элемента. Так, если у вас в списке 4 элемента (0-3), новый элемент, добавленный через .addSection();, будет 5-м, с индексом 4, соответственно.
.display();
Позволяет открыть определённый элемент по его порядковому номеру в массиве. Так, если бы мы выполнили код метода .addSection();, показанный выше, и после добавления элемента нам бы нужно было открыть добавленный элемент, то с .display(); нельзя использовать тот же самый индекс!
AccordionObject.display(4); // покажет только что добавленный элемент
Вкусняшки Accordion-овские
Ниже можно простестировать всё, о чём шла речь в этом уроке. Accordion – интересный и полезный плагин к библиотеке Mootools, который я уже несколько раз использовал для придания дополнительного удобства пользования рабочим сайтом. Мне понравилось – всё просто и очень гибко!
//определяем переменные массивов с заголовками и элементами с контента var zags = $$('.zag'); var content = $$('.content'); //создаем переменнцю объекта //с помощью ключевого слова "new" //передаем массив с заголовками //передаем массив с контентом //задаем параметры и события var AccordionObject = new Accordion(zags, content, { //далее определяем, что при загрузке страницы //будет показан контент, через метод "show" (по индексу) //но БЕЗ каких-либо эффектов - он просто откроется //также, обратите внимание, что если используете параметр "fixedHeight," //метод show не сработает при загрузке страницы. //"show" имеет приоритет перед "display" show: 0, //при загрузке страницы, эта строчка покажет контент (по индексу), //и контент будет открыт с приминением небольшого эффекта //как говорилось выше, show в приоритете перед display //display: 0, //имеет дефолтное значение //создается вертикальный аккордион height : true, //далее, создается для горизонтального аккордиона //он немного сложнее в использовании из-за необходимости использовать CSS width : false, //дефолтное значение //запустит немного прозрачности в эффект opacity: true, //дефолтное значение false, но можно указать и числовое значение - //закрепит высоту всех контейнеров //потребует использование overflow //не будет работать при загрузке страницы, если будет использоваться show fixedHeight: false, //может быть false или целое число //схоже с fixedHeight, //но используется с горизонтальными аккордионами fixedWidth: false, //позволяет закрывать открытые элементы alwaysHide: true, //обычное событие onComplete //передаёт переменную с элементом для каждого отдельного элемента с контентом onComplete: function(var1, var2, var3, var4, var5){ var1.highlight('#5D80C8'); //синий цвет var2.highlight('#5D80C8'); var3.highlight('#5D80C8'); var4.highlight('#5D80C8');//добавленный элемент $('onComplete').highlight('#5D80C8'); }, //это событие сработает, когда элемент будет открываться //передаст элемент, управляющий состоянием контента //и элемент контента, над которым производится действие onActive: function(toggler, element) { toggler.highlight('#76C83D'); //зеленый element.highlight('#76C83D'); $('onActive').highlight('#76C83D'); }, //событие срабатывает, когда элемент с контентом начинает закрываться //передаст всем остальным элементам //закрывающийся элемент или тот, что не открывается onBackground: function(toggler, element) { toggler.highlight('#DC4F4D'); //красный element.highlight('#DC4F4D'); $('onBackground').highlight('#DC4F4D'); } }); $('add_section').addEvent('click', function(){ //новая часть аккордеона - это стандартная аккордионная пара //переключатель и контент //указываем, куда нужно его установить AccordionObject.addSection('addToggler', 'addElement', 0); // в самое начало }); $('display_section').addEvent('click', function(){ //определяет, какой объект аккордиона первым отобразиться на странице //будет иметь приоритет над аналогичным параметром в разделе options AccordionObject.display(4); });
Далее, по цветам можно видеть, что происходит с нашими элементами при запуске объекта Accordion.
Заголовок 1
Этот элемент предназначен для содержания контента, который будет прятаться и открываться при нажатии на его заголовок.
Заголовок 2
Этот элемент предназначен для содержания контента, который будет прятаться и открываться при нажатии на его заголовок.
Заголовок 3
Этот элемент предназначен для содержания контента, который будет прятаться и открываться при нажатии на его заголовок.
Заголовок 4
Этот элемент предназначен для содержания контента, который будет прятаться и открываться при нажатии на его заголовок.
Добавочный заголовок
Этот элемент предназначен для содержания контента, который будет прятаться и открываться при нажатии на его заголовок.
Можно попробовать добавить новый элемент с помощью этой кнопки
Блог Михаила Шакина
Что говорит народ: