Аккордеон на prototype
значально на блоге я собирался писать статьи равноценно, о наиболее развитых фреймверках и плагинам к ним, но так повелось, что о jQuery я пишу чаше, было пару статей по mootools и совсем нечего по prototype. В сегодняшней статье я хочу это поправить.
Что я заметил из своего опыта – в prototype хорошо реализованы функции анимации, всегда эффекты в этом фреймверке выглядят более плавно чем в том же jQuery. prototype не самый легкий для изучения, МХО много чего в нем и не хватает… но темнемение он используется в некоторых популярных CMS и поэтому часто востребован клиентами!
Для фреймверка существуют большое количество различных плагинов, но наиболее часто востребованы самые популярные эффекты – лайтбокс, галерея, аккордеон. менно на последний и хочу обратить ваше внимание.
Я всегда в своих проектах на prototype использую популярный плагин Accordion v2.0 разработанный командой stickmanlabs (а плагин LightWindow v2.0 вообще шедевр). Скрипт позволяет делать мультивложенные аккордеоны, поддерживает два вида “горизонтальный” и “вертикальный”, хороший плагин… поэтому не буду вам показывать свои версии аккордеона на prototype :P
Но для чего же тогда я все это затеил спросите вы… не для рекламы конечно, просто есть в данном плагине три маленьких неудобства, которые мне приходилось исправлять в некоторых моих проектах.
Неудобства:
- плагину необходимо свойство overflow для слайд-элемента, что не позволит вам сделать всякие выпадающее из аккордеона штучки, типа попапов и т.п.
- неудобная активация открытого элемента аккордеона
- активация плагина только для элементов с ID
Поэтому мне пришлось слегка модифицировать этот плагин. Теперь свойство overflow ставить необязательно, оно ставится само при анимации а в открытом состоянии убирается, что вам может пригодится. Для активации нужного элемента – достаточно поставить класс. самое удобное – теперь не нужно создавать кучу ID и применять скрипт для каждого если на странице нужно сделать несколько аккордеонов, теперь можно вставлять нужный вам объект выбранный селектором.
Пример модифицированного скрипта:
Вы можете открыть пример в новом окне.
JavaScript код примера:
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
var _accordion = new accordion($$('.accordion')[0], {
classNames : {
toggle : 'accordion_toggle',
toggleActive : 'accordion_toggle_active',
content : 'accordion_content',
selectToggle : 'selected'
}
});
}
</script>
Если вы сравните код примера с кодом оригинала на официальном сайте – вы заметите, добавился параметр selectToggle в котором указывается название класса для активации нужного пункта в аккордеоне. Также отличается строчка var _accordion = new accordion($$(‘.accordion’)[0], {… в ней указан объект через селектор $$(‘.accordion’)[0]. Если у вас на сайте есть несколько аккордеонов с одним классом можно воспользоваться таким кодом:
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
$$('.accordion').each(function(acc){
var _accordion = new accordion(acc, {
classNames : {
toggle : 'accordion_toggle',
toggleActive : 'accordion_toggle_active',
content : 'accordion_content',
selectToggle : 'selected'
}
});
});
}
</script>
Надеюсь мои исправление кому-то пригодятся !!! Удачи.
Скачать плагин
6 Коментариев to Аккордеон на prototype
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Подскажите пожалуйста вот тут http://futsal.dp.ua/turnir/chempionat_a.html шедевр LightWindow v2.0( как Вы говорите), не применяет opacity по отношении ко всей странице (при клике на картинку yuotube). Хотя на локальной странице всё работает правильно. Почему?
звиняюсь за беспокойство! Уже разобрался.
Паодскажите, где в настройках изменять вид аккордеона? В Вашем примере вертикальный вид, а мне нужен горизонтальный. Если можно, опишите подробней все настройки.
Этот плагин был недавно обновлен, последнюю версию вы сможете скачать сдесь accordion2. В вкладке “How to Use” вы можете посмотреть описание параметров.
Приятный акордион
спасибо
Неплохо будет если еще укажете вариант, если у пользователя запрещено выполнение скриптов. Слишком часто сталкиваешься с ситуацией, когда меню построено с использованием Аккордеона, и без выполнения скриптов дизайн сайта разваливается.