Управление выполнением кода во время работы эффектов Scriptaculous
Недавно столкнулся с интересной особенностью работы эффектов в scriptaculous, о которой и хочу рассказать.
Примечание. Для тех, кто не слышал о scriptaculous, поясню. Это очень удобная JavaScript библиотека, которая значительно упрощает работу с элементами web страницы, позволяет создавать различные визуальные эффекты, элементы управления, поддержку drug&drop и т.п. В общем, советую попробовать.
Возвращаюсь к возникшей проблеме.
Нужно было применить эффект подсветки к блоку текста, а затем удалить этот блок.
На первый взгляд, кажется, что задача решается двумя строками кода:
-
new Effect.Highlight(‘textBlock’, {startcolor:"#FFFFFF", endcolor:"#FF0000", duration:2});
-
$(‘textBlock’).remove();
В первой строке создается эффект подсветки и применяется к элементу с id= 'textBlock'.
Параметры эффекта:
startcolor – цвет блока в начале эффекта;
endcolor – цвет блока в конце эффекта;
duration – длительнось эффекта в секундах.
Во второй строке функция remove() удаляет блок.
Но, оказалось, что этот код не работает. Т.е. блок удаляется до того как отработает эффект.
Проблема заключается в том, что эффекты работают параллельно с основным кодом страницы.
Решение
Специально для таких ситуаций каждый эффект scriptaculous имеет четыре свойства: beforeStart, beforeUpdate, afterUpdate, afterFinish (думаю, названия говорят сами за себя). Значением этих свойств должно быть имя функции, которую нужно выполнить на соответствующем этапе работы эффекта.
В качестве параметра эта функция принимает объект с информацией об эффекте и блоке, к которому он применяется.
Например, описанная задача решается как:
-
new Effect.Highlight(‘textBlock’,
-
{startcolor:"#FFFFFF",
-
endcolor:"#FF0000",
-
duration:2,
-
afterFinish: function(o) {
-
o.element.remove();
-
}
-
});
Как видите, значением параметра afterFinish является анонимная функция, в которой и выполняется удаление текстового блока.
Примечание. Свойство element, параметра функции (o), позволяет работать с блоком страницы, к которому применяется эффект.
Если вы хотите больше узнать о библиотеке scriptaculous, советую почитать:
1) официальный сайт (англ.);
2) раздел JavaScript этого блога;
3) статью «Подсветка элементов web страницы»;
4) книгу «Prototype and Scriptaculous in Action» (англ.).
Кстати, если книга кому-нибудь нужна, пишите в комментариях, могу выслать на eMail или выложить для скачивания.
Удачи!
Понравилась статья? Подпишитесь на продолжение 
!
Опубликовано в HTML, JavaScript
