markup-javascript.com » Prototype http://markup-javascript.com Блог web-технолога Tue, 15 Mar 2011 13:35:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Аккордеон на prototype http://markup-javascript.com/2009/08/01/akkordeon-na-prototype/ http://markup-javascript.com/2009/08/01/akkordeon-na-prototype/#comments Sat, 01 Aug 2009 18:15:57 +0000 Алексей http://markup-javascript.com/?p=553 Изначально на блоге я собирался писать статьи равноценно, о наиболее развитых фреймверках и плагинам к ним, но так повелось, что о jQuery я пишу чаше, было пару статей по mootools и совсем нечего по prototype. В сегодняшней статье я хочу это поправить.

Что я заметил из своего опыта – в prototype хорошо реализованы функции анимации, всегда эффекты в этом фреймверке выглядят более плавно чем в том же jQuery. prototype не самый легкий для изучения, ИМХО много чего в нем и не хватает… но темнемение он используется в некоторых популярных CMS и поэтому часто востребован клиентами!

Для фреймверка существуют большое количество различных плагинов, но наиболее часто востребованы самые популярные эффекты – лайтбокс, галерея, аккордеон. Именно на последний и хочу обратить ваше внимание.

Я всегда в своих проектах на prototype использую популярный плагин Accordion v2.0 разработанный командой stickmanlabs (а плагин LightWindow v2.0 вообще шедевр). Скрипт позволяет делать мультивложенные аккордеоны, поддерживает два вида “горизонтальный” и “вертикальный”, хороший плагин… поэтому не буду вам показывать свои версии аккордеона на prototype :P

Но для чего же тогда я все это затеил спросите вы… не для рекламы конечно, просто есть в данном плагине три маленьких неудобства, которые мне приходилось исправлять в некоторых моих проектах.
Неудобства:

  1. плагину необходимо свойство overflow для слайд-элемента, что не позволит вам сделать всякие выпадающее из аккордеона штучки, типа попапов и т.п.
  2. неудобная активация открытого элемента аккордеона
  3. активация плагина только для элементов с ID

Поэтому мне пришлось слегка модифицировать этот плагин. Теперь свойство overflow ставить необязательно, оно ставится само при анимации а в открытом состоянии убирается, что вам может пригодится. Для активации нужного элемента – достаточно поставить класс. И самое удобное – теперь не нужно создавать кучу ID и применять скрипт для каждого если на странице нужно сделать несколько аккордеонов, теперь можно вставлять нужный вам объект выбранный селектором.

Пример модифицированного скрипта:

Вы можете открыть пример в новом окне.

JavaScript код примера:

<script type="text/javascript" src="javascript/prototype.js"></script>
<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]. Если у вас на сайте есть несколько аккордеонов с одним классом можно воспользоваться таким кодом:

<script type="text/javascript">
    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>

Надеюсь мои исправление кому-то пригодятся !!! Удачи.

Скачать плагин

]]> http://markup-javascript.com/2009/08/01/akkordeon-na-prototype/feed/ 6