Stranger than Fiction

В этом пособии я постараюсь на наглядных примерах рассказать об использовании некоторых визуальных эффектов из библиотеки script.aculo.us.

В качестве примера мы сделаем альтернативную Web 2.0 версию страницы “О группе Догма” с применением script.aculo.us эффектов.

Реквизит

Для создания нашей страницы нам потребуются свежая библиотека script.aculo.us.

Приступим

Чтобы не отвлекаться на разметку и стилевое офомление, в качестве шаблона для нашей страницы мы будем использовать пример из статьи Sliding Doors of CSS, Part II. После небольших изменений-дополнений наш шаблон готов — смотрим Пример 1.

В элементах div с идентификаторами (id) kostya, tair, anton, andrei и dima будет содержаться информация о соответствующих участниках группы Догма, а в элементе с идентификатором about — информация о группе в целом.

После добавления информации, страница выглядит уже поинтереснее (Пример 2).

Переключение табов

Так как в функции переключения табов, назовём её switchTab, используется одна замечательная функция из библиотеки prototype (поставляется вместе со script.aculo.us), то нам необходимо подключить эту библиотеку:

<script type="text/javascript" src="prototype.js"></script>

Замечательная функция, о которой я упоминал выше, выглядит очень лаконично — $() и является своеобразным аналогом метода getElementById(), с одним лишь отличием, что может принимать несколько атрибутов и возвращает массив нод.

Текущий активный таб имеет идентификатор “current”, таким образом, нашей функции по переключению табов необходимо выполнить следующее:

1. Найти таб с id="current" и “выключить” его, удалив атрибут id
2. “Включить” нужный таб, добавив к нему атрибут id со значением "current"

Что и делает наша функция:

function switchTab(t) {
    var tabs = $('header').getElementsByTagName('li');
    for (i = 0; i < tabs.length; i++) {
        var tab = tabs[i];
        if (tab.id.indexOf('current') > -1) {
            tab.removeAttribute('id');
        }
    }
    t.parentNode.id = 'current';
}

Отдельно стоит сказать про последнюю строчку функции: t.parentNode.id = 'current';. Поскольку эта функция вызывается при событии onclick ссылки, например

<li><a href="#" onclick="switchTab(this); return false;">Костя</a></li>

атрибут id должен добавляться не к ссылке, а к родительскому элементу li.

Посмотреть функцию switchTab в действии можно в Примере 3.

Переключение панелей

Теперь, когда наши табы переключаются, самое время реализовать переключение панелей с информацией. Для этого, у всех элементов div внутри контейнера content, кроме контенера about (т.к. он у нас показывается первым), необходимо установить атрибут style со значением "display: none":

<div id="kostya" style="display:none;">
    ...
</div>

<div id="tair" style="display:none;">
    ...
</div>

<div id="anton" style="display:none;">
    ...
</div>

<div id="andrei" style="display:none;">
    ...
</div>

<div id="dima" style="display:none;">
    ...
</div>

Теперь мы немного изменим функцию switchTab так, чтобы она не только переключала табы, но и панели с информацией тоже. Для этого мы будем передавать ей ещё один аргумент — идентификатор панели, на которую нужно переключиться.

Дополнительная функциональность, которую следует добавить:

1. “Найти” видимую панель, то есть ту, у которй значение style.display не равно "none"
2. Показать панель, идентификатор которой передан, как аргумент функции. Показать, естественно, с эффектом!

Реализуется всё следующим образом:

Мы “перебираем” все элементы внутри контейнера content и, если значение style.display элемента не равно "none", то мы присваиваем ему это значение:

var panes = $('content').getElementsByTagName('div');
for (i = 0; i < panes.length; i++) {
    var pane = panes[i];
    if (pane.style.display.indexOf('none') == -1) {
        pane.style.display = 'none';
    }
}

После того, как мы “спрятали” старую панель, показываем новую:

new Effect.Appear(p);

Финальная версия — Пример 4.

Во второй части пособия рассказывается о том, как добавить Ajax к этой странице.