В этой статье речь пойдет о возможностях, которые предоставляет библиотека Scriptaculous для управления прозрачностью элементов web страницы.
Напомню, что Scriptaculous – это JavaScript библиотека, которая предоставляет широкие возможности для создания эффектов, элементов управления и т.п. Для своей работы Scriptaculous использует библиотеку более низкого уровня – prototype, которая значительно упрощает взаимодействие с элементами страницы, выполнение ajax запросов, работу с массивами и многое другое.
В состав Scriptaculous (версии 1.7.0) входит 7 файлов, каждый из которых может быть использован независимо от остальных. Такая структура позволяет сократить количество загружаемого кода.
Для управления прозрачностью элементов html страницы используется библиотека эффектов, которая находится в файле effects.js. Для решения нашей задачи нам нужны три файла: prototype.js, scriptaculous.js и effects.js.
Подключаем их в заголовке html страницы (файлы библиотеки находятся в папке lib):
<script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js?load=effects"></script>
Обратите внимание как подключен effects.js. Мы подключаем scriptaculous.js, а после знака «?» указываем команду «load» и имя нужного файла (effects) без расширения. Если нужно загрузить несколько библиотек, то их имена можно указать через запятую.
Теперь для управления прозрачностью мы можем использовать метод Opacity объекта Effect. При вызове этого метода мы должны указать:
1) элемент страницы, прозрачность которого нужно изменить;
и параметры:
2) duration – длительность изменения (в секундах);
3) from – начальное значение прозрачности (в диапазоне от 0.0 до 1.0);
4) to – конечное значение прозрачности.
Например:
new Effect.Opacity('note', {duration:2.5, from:0.0, to:1.0});
Заметьте, что этот эффект только изменяет прозрачность элемента на странице. Чтобы полностью убрать или добавить элемент на страницу, можно воспользоваться методами Fade и Appear. Параметры, которые нужно указать при их вызове, аналогичны методу Opacity. Причем, начальное и конечное значение прозрачности указывать не обязательно:
new Effect.Fade('noteTitle', {duration:1.5});
new Effect.Appear('noteTitle', {duration:1.5});
Теперь посмотрим, как все это можно использовать.
Создадим простенькую страницу с двумя текстовыми блоками и двумя кнопками:
<body> <div id="noteTitle">Этот текст идет до записи. Весь этот блок будет плавно исчезать при нажатии на кнопку.</div> <div id="note">Этот текст должен плавно появляться при открытии страницы</div> <p><input type="button" id="show" value="Показать блок" onclick="showBlock()" /></p> <p><input type="button" id="hide" value="Убрать блок" onclick="hideBlock()" /></p> </body>
Блок «note» у нас будет плавно появляться при загрузке страницы. А с помощью кнопок «show» и «hide» мы будем убирать или добавлять блок «noteTitle».
Теперь создадим JavaScript файл с функциями, которые будут вызываться при нажатии на кнопки:
window.onload = function() {
new Effect.Opacity('note', {duration:2.5, from:0.0, to:1.0});
}
function hideBlock() {
new Effect.Fade('noteTitle', {duration:1.5});
}
function showBlock() {
new Effect.Appear('noteTitle', {duration:1.5});
}
Примечание: этот файл должен быть указан в заголовке страницы (<script type="text/javascript" src="testEffects.js"></script>) вместе с библиотеками prototype и Scriptaculous.
В строках 1-3 мы присвоили функцию обработчику window.onload, который вызывается при загрузке страницы. В ней мы создали объект Effect и вызвали его метод Opacity. В параметрах метода указано, что прозрачность элемента «note» будет изменяться от 0 до 1 в течении 2.5 с.
Функции hideBlock() и showBlock() работают аналогичным образом. Главное отличие в том, что методы Fade и Appear не только изменяют прозрачность, но и полностью удаляют (добавляют) блок со страницы. При этом, все остальные элементы страницы смещаются.
Как видите, Scriptaculous предоставляет очень удобные средства управления прозрачностью объектов. Любая операция выполняется с помощью всего одной строки кода.
Естественно, описанные эффекты – это только незначительная часть возможностей библиотеки, о которых я обязательно расскажу в следующих выпусках блога.
Вы можете скачать файлы приведенного примера.
Постовой
Интересное предложение на стиральную машину WHIRLPOOL AWM 1000 в Одессе
Удобная посудомоечная машина ELECTROLUX ESF 2440S в Одессе
