Библиотека Scriptaculous содержит массу красивых и полезных эффектов, которые удобно использовать в web приложениях. О некоторых из них я уже писал в предыдущих статьях (например, Подсветка элементов web страницы и Использование Scriptaculous для изменения прозрачности элементов web страницы). Любой из этих эффектов представляет ценность сам по себе, но только использование их комбинаций позволяет раскрыть возможности библиотеки в полной мере.
В этой статье я расскажу, как создавать группы из нескольких эффектов и управлять их выполнением.
Прежде всего, немного теории. Scriptaculous позволяет применить несколько эффектов к одному и тому же блоку web страницы двумя способами:
1) последовательно (эффекты будут применяться по очереди);
2) параллельно (т.е. все выбранные эффекты будут работать одновременно).
Рассмотрим небольшой пример. Допустим, у нас есть web страница с текстовым блоком, к которому мы хотим применить два эффекта:
1) подсветки (Highlight);
2) и перемещения (MoveBy).
Разметка страницы предельно простая:
<body> <div id="textBlock">…</div> <p><input type="button" id="runParallel" value="запустить параллельно" onclick="runParallel()" /></p> <p><input type="button" id="runSerial" value="запустить последовательно" onclick="runSerial()" /></p> </body>
Как видите, страницы содержит один блок (textBlock) и две кнопки, нажатия на которые вызывают javascript функции runParallel() и runSerial(). Эти функции будут запускать наши эффекты параллельно и последовательно.
Теперь представим, что мы написали такой код:
new Effect.Highlight('textBlock', {startcolor:"#DFDC00", endcolor:"#FFFFFF", duration: 2});
new Effect.MoveBy('textBlock', 0, 100, {duration: 2});
Как вы думаете, в каком порядке они будут выполнены?
Правильный ответ: “В большинстве случаев параллельно”. Почему в “большинстве случаев”? Потому что, если мы не задали последовательность выполнения явно, то она может зависеть от браузера.
Отсюда простой вывод: “Если используете несколько эффектов, всегда указывайте, в каком порядке их выполнять”.
Параллельное выполнение эффектов
Гарантировать одновременное выполнение эффектов можно с помощью метода Parallel, который создает контейнер для эффектов. В первом параметре этого метода нужно указать все эффекты, которые мы хотим применить, причем в параметры каждого эффекта обязательно добавьте sync: true, а также уберите duration.
Во втором параметре метода передается массив с настройками. Вот здесь и нужно задавать время работы эффектов.
В результате наша функция runParallel() будет выглядеть следующим образом:
function runParallel() {
new Effect.Parallel(
[
new Effect.Highlight('textBlock', {startcolor:"#DFDC00",
endcolor:"#FFFFFF", sync: true}),
new Effect.MoveBy('textBlock', 0, 100, {sync: true})
],
{duration: 2}
);
}
Последовательное выполнение эффектов
Тут тоже ничего сложного. Нужно создать очередь (queue) и добавить в нее эффекты.
Создается очередь с помощью параметра queue в настройках эффекта. В качестве значения этому параметру нужно передать массив из двух элементов: position и scope.
1) position – указывает куда будет вставлен данный эффект. Может принимать два значения: end (эффект будет вставлен в конец очереди) и front (в начало).
2) scope – задает название очереди. С его помощью можно создать несколько очередей с эффектами.
Теперь посмотрим наш пример:
function runSerial() {
new Effect.Highlight('textBlock', {startcolor:"#DFDC00",
endcolor:"#FFFFFF", duration: 2,
queue: {position: 'end', scope: 'myqueue'}});
new Effect.MoveBy('textBlock', 0, 100, {duration: 2,
queue: {position: 'end', scope: 'myqueue'}});
}
Как видите, мы создали очередь под названием myqueue и добавили в ее конец оба наших эффекта.
При добавлении эффекта в конец очереди предыдущие эффекты смещаются вперед. Поэтому в нашем случае сначала блок будет подсвечен, а затем, перемещен.
Если изменить значения параметра position на front, то эффекты будут выполнены в обратном порядке.
Естественно, никто не ограничивает вас двумя эффектами. Вы можете использовать практически любое количество встроенных эффектов в различных сочетаниях для получения нужного результата.
Если что-то не получилось, скачайте архив с файлами примера.
Постовой
Не нужно запускать болезнь. Главное помнить, что профилактика болезней гораздо лучше чем их лечение.
