Май - Xakep Online

coding
Постепенное уменьшение прозрачности текста Обычная и нажатая кнопка
Здесь используется классический прием
jQuery — цепочка вызовов. Первой в ней идет
конструкция $(this), обозначающая текущий
элемент, на котором сработало событие — клик
мышкой. Parent() выбирает прямого родителя
(в нашем случае тэг li. children()) и, как несложно
догадаться, служит для получения всех
дочерних элементов. Из них нам надо убрать
слой с классом collapsible, что делает метод
not. Теперь осталось вызвать toggle, который
либо спрячет, либо покажет ветку меню, в зависимости
от ее видимости (смотри рисунок).
Свежие новости
Возможно, этот код покажется тебе несколько
усложненным, но зато мы легко сможем использовать
его и при создании раскрывающихся
новостей. Например, у нас есть заголовки или
краткий вариант сообщения; пользователь щелкает
по нему и получает открывшуюся новость
(смотри рисунок).
Стрелкой я показал, как именно новость будет
открываться. Теперь напишем HTML, который
будет похож на наше меню:
Описание одной новости
HTML
Заголовок новости
Текст новости
JavaScript будет тем же самым, разве что я
добавлю в него немного наворотов, которые
сделают код более юзабельным. Применим
анимацию «разворачивание», которая реализуется
методом slideToggle с параметром
slow, чтобы действие происходило медленно.
При загрузке страницы свернем все новости и
припишем к заголовку на три символа больше.
На практике эти три символа лучше заменить
картинкой.
СворачиваниЕ/разворачиваниЕ
новостей
JavaScript
$(".collapsible").click(function()
{
$(this).parent().children
().not(".collapsible").
slideToggle("slow");
});
$(".collapsible").parent().
children().not(".collapsible").
hide();
$(".collapsible").append("
>>>");
Анимация
«Что может быть бесполезней, чем всякая
анимация на сайте?» — думал я в детстве.
На первый взгляд подобные мысли кажутся
логичными. Но тогда зачем в состав фреймворка
(каркаса) включили такой функционал?
В нем должно быть только самое нужное, все
остальное надо вынести в плагины! Но если
посмотреть на любой современный динамический
сайт, особенно с применением идеологии
AJAX, то станет понятно, что анимация
может быть и полезна. Когда добавляется
новое сообщение в чате или приходит новое
письмо в почтовой системе, посетителю
надо ясно указать на эти события. Почтовую
систему мы писать не будем, а как работает
метод animate, посмотрим на более простом
примере.
При клике пользователя по кнопке удалим
все параграфы — содержимое тэгов p. Если
вызывать метод hide, то посетитель не поймет,
что произошло («Бац, и все исчезло!»). Мы же
плавно погасим текст, уменьшая (по правде
говоря, увеличивая) его прозрачность (смотри
соответствующий рисунок).
Чтобы использовать метод animate, ему надо
передать два параметра. Первый — это массив
изменяющихся свойств, второй — скорость
изменения:
Анимация: затухание текста
JavaScript
$("#hide").click(function() {
$("p").animate({
opacity: 'hide' }, 5000);
});
Тултипы
В продолжение темы анимации рассмотрим
два специализированных метода — slideDown
и slideUp — для сворачивания и разворачивания
элементов соответственно. Именно при
помощи этих эффектов и будут появляться
наши всплывающие подсказки. Определим,
что тултипом у нас будет элемент, который
следует за ссылкой и имеет класс tooltip.
Подсказка может содержать информацию о
ресурсе, на который она ведет, что поможет
посетителю принять решение о том, стоит ли
по ней переходить. Показывать мы ее будем
при наведенном на ссылку курсоре (смотри
рисунок).
Чтобы обработать событие hover, надо указать две
функции, которые будут вызваны при входе курсора
мышки в область элемента и выходе из нее:
Показываем тултип
JavaScript
$(".tooltip").prev("a").hover(
function() { $(this).next(".
tooltip").slideDown(); },
function() { $(this).next(".
tooltip").slideUp(); }
);
Здесь мы использовали новые методы prev
и next, которые возвращают предыдущий
и последующий элементы соответственно.
Последним будет примечание о необходимости
скрыть все тултипы при загрузке страницы.
Если ты дочитал до этого момента, то знаешь,
как это сделать.
Классы
Переходим к одной из фундаментальных
возможностей в арсенале jQuery — к работе
xàêåð 05 /101/ 07
/
129