Существует множество способов привлечь внимание посетителей к элементам web страницы. К ним относятся: выделение с помощью цвета, размера и начертания шрифтов, добавление рамок и фоновых изображений, взаимное расположение элементов и множество других способов.
Но иногда возникают ситуации, в которых необходимо привлечь внимание пользователя к элементу только на небольшой промежуток времени. Например, при возникновении какого-нибудь события. Сегодня я покажу один из возможных вариантов решения этой задачи.
Идея очень простая.
При возникновении определенного события (например, нажатия на кнопку или ссылку), фон элемента мгновенно изменяет цвет, а затем, плавно возвращается к исходному.
Для реализации этого эффекта воспользуемся библиотекой scriptaculous, о которой я уже неоднократно писал.
Для создания подсветки элемента используется метод Highlight объекта Effect. Метод принимает два параметра. Первый – название элемента, к которому будет применен эффект. Второй – массив с параметрами эффекта. Тут можно задать:
duration – длительность эффекта (время, в течении которого цвет фона будет возвращаться к первоначальному);
startcolor – цвет, который будет установлен в начале эффекта (по-умолчанию используется желтый);
endcolor – цвет, в который будет переходить startcolor (по-умолчанию, используется цвет фона, установленный до применения эффекта);
restorecolor – цвет фона после завершения эффекта.
Теперь посмотрим, как можно использовать этот эффект. Допустим, нам нужно, чтобы при нажатии на ссылку подсвечивался какой-нибудь элемент страницы.
Взгляните на разметку страницы:
<head>
<title>Подсветка элементов (Script.aculo.us)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="testHighlight.js"></script>
<link rel="stylesheet" type="text/css" href="styles_highlight.css" />
</head>
<body>
<div id="pageTitle">Заголовок страницы</div>
<p><a href="#" onclick="highlightBlock('pageTitle')">Подсветить заголовок</a></p>
</body>
</html>
Прежде всего, мы подключили библиотеки prototype, scriptaculous и файл с нашими javascript функциями (строки 4, 5 и 6). Сама страница содержит текстовый блок с названием pageTitle и ссылку, нажатие на которую вызывает функцию highlightBlock(elementId). В качестве единственного параметра функция принимает имя блока, к которому нужно применить эффект.
function highlightBlock(elementId) {
new Effect.Highlight(elementId, {duration:3});
}
Как видите, всего три строки кода.
Теперь посмотрим пример поинтереснее. Добавим на страницу несколько элементов, которые нужно подсветить.
<div id="textBlock"> С помощью эффекта Highlight (из библиотеки Scriptaculous) мы можем подсветить как весь блок, так и отдельные его части. Для этого необходимо иметь возможность обращаться к <span class="h">отдельным элементам</span> внутри данного блока. То есть, если мы хотим <span class="h">подсвечивать</span> только некоторые фразы, они должны находиться внутри каких-нибудь тегов, например, <span>. Эффект <span class="h">подсветки</span> состоит в том, что фон элемент мгновенно изменяет цвет, а потом в течении указанного времени плавно возвращается к исходному. </div>
Как видите, мы добавили текстовый блок, внутри которого находятся фразы, выделенные с помощью тега <span class="h">. Вот эти фразы и будем подсвечивать.
В этот раз JavaScript функция немного сложнее:
function highlightHClass(className) {
var elements = $$('.' + className);
elements.each(
function(el) {
new Effect.Highlight(el, {duration:3, startcolor: "#ff0000", endcolor: "#ffffff"});
}
);
}
Прежде всего, создаем массив элементов, которые нужно подсветить. Для этого мы используем функцию $$() из библиотеки prototype (подробно о ее использовании я писал в статье Изменяем стили элементов web страницы).
После этого мы применяем эффекты ко всем найденным элементам (строки 3-7). Здесь мы используем расширения библиотеки prototype для работы с массивами. В строке 3 вызван метод each(), которому в качестве параметра передается анонимная функция. Этот метод просто вызывает эту функцию для каждого элемента массива, т.е. его работа аналогична обычному циклу. Параметром анонимной функции (строка 4) является текущий элемент массива. Сама функция выполняет только одну операцию – подсвечивает элемент.
Как видите, минимум кода и неплохой результат.
Вы можете скачать исходные файлы примера.
Постовой
Так хочется в отпуск! Только нужно решить где его провести 😉
