Лаборатория Кода

JQuery на практике, или мой топ5 ++ JQuery методов

Библиотека JQuery обладает довольно обширным массивом методов и позволяет создавать галереи, или, скажем, анимацию иллюстрированных спецпредложений — со сложными динамическими эффектами. Для этих случаев обычно используются готовые скрипты, которые можно свободно скачать в интернете и установить на сайт. Подобно тому, как мы монтируем CMS в качестве движка сайта, а не выдумываем велосипед, вполне логично обращаться к нарощенным продуктам кодинга. Однако, иногда требуется снабдить дизайн выборочными динамичными эффектами, и знания их окажутся весьма кстати.

В этой статье я хочу рассказать о своём наборе JQuery-методов, который прижился в реальной практике, на примере одного из сайта своей работы. Для новичков в JQuery (среди них, кстати, не исключены профессиональные веб-дизайнеры или программисты) — может упростить понимание общих принципов работы с этим приложением. Для владельцев сайтов — послужить в качестве идейного плацдарма.

В статье рассмотрены методы:

  • Анимация объектов (.animate ())
  • Динамичная смена классов CSS (.css())
  • Динамичная смена содержимого (картинки) (.attr())
  • Действие по таймеру (setInterval)
  • Затухание и возгорание текста (.fadeIn() и .fadeOut())

В конце текста вы найдёте небольшую шпаргалку-словарик методов (написан для себя).

Следует уточнить, что в статье сознательно обходятся JQuery-методы, связанные с AJAX, т.к. это, вероятно, тема отдельной записи.

Библиотека JQuery — установка

Для начала, нам потребуется подключить библиотеку JQuery. Для этого, можно скачать последнюю версию с официального сайта Скачать JQuery , или использовать запрос к гугловской базе. Подключаем скрипт в <HEAD></HEAD>:

<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
...
</head>
...

Анимация объекта + определение длины окна

Метод .animate (динамичное преображение объекта).

jquery yа практических примерах - динамичные эффекты веб-дизайна сайта Стиль выплывающего объекта в CCS-файле: В данном примере, для того, чтобы произвести анимацию выплывающей сбоку области, мы должны сначала определить длину окна (минус отступ слева на 40 пикс.). Для этого используем строку кода:

var bod_width = $(window).width() - 40;

После определения, создаем анимацию объекта с id=»dialogWindow» при щелчке мыши на кнопке «Каталог» с атрибутом id «go».

$("#go").click(function(){

 $("#dialogWindow").animate({
    width: bod_width+"px",
    left: "40px",
    opacity: 1,
    marginLeft: "0"
  }, 250 );

});

А теперь все вместе. Подключение в BODY будет выглядеть следующим образом:

<script type="text/javascript">
/* Определение длины окна. */
   var bod_width = $(window).width() - 40;

/* Анимация объекта c id="dialogWindow" при нажатии кнопки с id="go". */
$("#go").click(function(){

 $("#dialogWindow").animate({
    width: bod_width+"px", /* Устанавливаем длину dialogWindow. */
    left: "40px", /* Отступ слева на 40 точек - пикселей. */
    opacity: 1, /* Сбрасываем прозрачность. */
    marginLeft: "0"
  }, 250 ); /* И в самом конце - установка времени по таймеру на 250 милисекунд. */

});

</script>

Второй пример анимации: увеличение картинки при подведении курсора.

динамическое увеличение картинки при подведении курсора - jquery animate

Принцип примерно тот же. Код анимации будет выглядеть следующим образом:

.animate({
    width: 270+"px",
    opacity: 1,
    marginLeft: "-15px",
    marginTop: "-15px"
  }, 600 );

Смена стилей (классов)

Методы .removeClass() (удаление класса) и .addClass() (добавление класса).

динамическая смена стилей в веб-дизайн - практика jquery

В CSS-файле задаем класс .price и .price.over (у меня к ним действует картинка-подклака с белым и красным кругом). Далее пишем код, который будет обрабатывать наведение курсора на круг.

<script type="text/javascript">

jQuery(function($) {
 $(".price").hover(
  function () {
    $(this).addClass("price over");
  },
  function () {
    $(this).removeClass("price over");$(this).addClass("price");
  }
);
});

</script>

Таким образом, при подведении «мыши» к цене, выделяется красным возможность «Купить сейчас». Если курсор уйдёт в сторону, ценник снова отобразится неактивным — с белой подкладкой.

Смена содержимого через объединяющий родительский элемент

Метод .attr(…, …) (подстановка / смена атрибута) через методы .parents() (обозначение родителя) .find() (находить).

замена картинки - смена содержимого - динамический дизайн сайта - jquery в примерах

Примерная структура в документе:

<div class="catalog_item_photos">
<table>
  <tr>

        <td colspan="3" class="big_photo_container">
<a class="flink" href="url_1" >
<img src="url_1" />
</a>
        </td>
  </tr>

  <tr>

        <td class="thumb_container" >
<a href="url_1" class="thumb" >
<img src="url_1" />
</a>
        </td>

        <td class="thumb_container" >
<a href="url_2" class="thumb">
<img src="url_2" />
</a>
        </td>

        <td class="thumb_container" >
<a href="url_3" class="thumb">
<img src="url_3" />
</a>
        </td>

  </tr>
</table>
</div>

Объединяющим является блок с классом «.catalog_item_photos». Т.к. таких иллюстрационных контейнеров на странице несколько (для каждого товара), мы будем обращаться к дочерним элементам того из них, по миниатюрке какого щёлкнули «мышкой». Для этого используется «$(this).parents(‘.catalog_item_photos’)». Внутри родителя начинаем поиск дочернего элемента с классом «.catalog_item_photos_big», используя .find(). Неразрывно от запроса родителя, добавляем к строке запись: «‘.find(‘.catalog_item_photos_big’)». И, наконец, производим смену атрибута src (собственно, адрес картинки заменяем на тот, который был в ссылке «.attr(‘href’)» ). Да, тавтологии концовка не миновала: «.attr(‘src’, $(this).attr(‘href’));».

Обратите внимание на структуру и url_1, url_2, url_3.

По типичной схеме мы переставляем адрес ссылки на большую картнику ( «<a class=’flink’ href=’url_1′>…<img class=’catalog_item_photos_big’ src=’url_2′></a>» заменяем на «<a class=’flink’ href=’url_2′>…<img class=’catalog_item_photos_big’ src=’url_2′></a>» ). Если родитель остался тот же, то теперь в нём мы ищем ссылку с классом «.flink», и будем заменять атрибут ‘href’ на тот же ‘href': «.find(‘.flink’).attr(‘href’, $(this).attr(‘href’));».

<script type="text/javascript">
jQuery(function($) {
$('.catalog_item_photos a.thumb').click(function() {
        $(this).parents('.catalog_item_photos').find('.catalog_item_photos_big').attr('src', $(this).attr('href'));
        $(this).parents('.catalog_item_photos').find('.flink').attr('href', $(this).attr('href'));
        return false;
});

});
</script>

Действие по таймеру и затухание-возгорание текста

Методы setInterval() (установка временного интервала — таймера), .text() (подстановка текста), .fadeIn() (возгорание) и .fadeOut() (затухание).

Упрощённый внешний вид блока в документе:

<div align="left"><B>НОВОСТИ</B>:
<span style="display: inline;" id="message_top">Вниманию пользователей сайта www.westskate.ru</span>
</div>

Создаём простенькую функцию (slidingSwitch()), основанную на массиве (mess_tab) строк, которые будут сменяться по таймеру. Они будут вкладываться в элемент с id #message_top. Последовательность смены определяется условным порядковым номером. Когда он доходит до «5», сбрасываем на «0» и начинаем заново. Чтобы обозначить затухание и возгорание в этом переходе, используем метод .fadeOut(), установив время затухания на 700 миллисекунд. Внутри него происходит собственно смена строки на новую, с возгоранием последней также в интервале 700 миллисекунд.

Функция будет выглядеть следующим образом:

function slidingSwitch(){
  if(next == 5) next = 0;
  next = next + 1;

  $("#message_top").fadeOut(700, function () {
  $('#message_top').text(mess_tab[next]).fadeIn(700);
  });
}

Для того, чтобы задать время, по которому будет вызываться эта функция, используем setInterval, установленный на 8 секунд:

$(function() {
  setInterval( "slidingSwitch()", 8000 );
});

Скрипт полностью:

<script language="javascript">

var mess_tab = new Array();
var next = 1;

          mess_tab[1] = 'Вниманию пользователей сайта www.westskate.ru';
          mess_tab[2] = 'Жвачки для рук с меняющимися свойствами (неогамы) уже в продаже!';
          mess_tab[3] = '3D пазлы: новые цвета и новые модели. Выбери уровень!';
          mess_tab[4] = 'В продажу ожидаются Хендгамы - жвачки для рук с уникальными свойствами';
          mess_tab[5] = 'Горячее! Интеллектуальные головоломки Неокубы теперь на Westskate';

function slidingSwitch(){
  if(next == 5) next = 0;
  next = next + 1;

  $("#message_top").fadeOut(700, function () {
  $('#message_top').text(mess_tab[next]).fadeIn(700);
  });
}

$(function() {
  setInterval( "slidingSwitch()", 8000 );
});

</script>

Приложение 1.

Словарик-шпаргалка по JQuery-методам

.add
Добавление элементов к группе соответствющих элементов.
Пример:
$(«p»).add(«div»).addClass(«widget»);
var pdiv = $(«p»).add(«div»);

.addClass()
Добавление заданного класса, CSS

.after()
Вставка контента после означенного элемента.

.animate()
Движение, преображение объекта с анимационным эффектом.

.attr()
Получение значения атрибута, подстановка атрибута для соответствующего элемента.

.click()
Обработка события щелчка «мыши» для указанного элемента.

.dblclick()
Обработка события двойного щелчка «мыши» для указанного элемента.

.contents()
Получение дочерних элементов для соответствющего элемента.

Пример:
$(«#frameDemo»).contents().find(«a»).css(«background-color»,»#BADA55″);

.css()
Получение параметров стиля, подстановка стилей CSS для элемента.

.each()
Выполнение для каждого соответствующего повторяющегося элемента.

$(‘li’).each(function(index) {
alert(index + ‘: ‘ + $(this).text());
});

.empty()
Очистка указанного элемента от всех дочерних, включая текст и другое содержание.
$(‘.hello’).empty();

event.pageX
Позиция курсора «мыши» относительно левого края документа.

event.pageY
Позиция курсора «мыши» относительно верхнего края документа.

.fadeIn()
Вывод элемента с эффектом возгорания (постепенное появление).

.fadeOut()
Скрытие элемента с эффектом затухания.

.fadeTo()
Регулировка прозрачности к элементу.

Синтаксис: .fadeTo( duration, opacity [, easing] [, callback] )
[Параметры в скобках: продолжительность, прозрачность, простота перехода, операция после выполнения]

Пример:
$(‘#clickme’).click(function() {
$(‘#book’).fadeTo(‘slow’, 0.5, function() {
// Animation complete.
});
});

.filter()
Выборка в JQuery по фильтрам.
Например, для чётных строк в перечне (списке), установим серый фон:
$(‘li’).filter(‘:odd’).css(‘background-color’, ‘silver’);
Odd значит нечётный, однако по причине того, что отсчёт будет вестись по индексу с 0, то результат выпадает на чётные строки. Для нечетных, «:odd»
Примечание: Хорошо подходит для создания эффекта «зебры» в таблице (чередование полос).

.find()
Определение дочернего элемента в родителе.

.height()
Определение высоты элемента, CSS.
Примечание: Удобно использовать в веб-дизайне, рассчитанном на «гибкость» элементов соразмерно окну обозревателя.

.hide()
Скрыть элемент.

.hover()
Событие: курсор «мыши» подведён к элементу.

:gt() Селектор — Выборка
Выбрать все элементы после определенного порядкового номера (индекса).
Пример:
Зачеркнуть текст после 4-го столбца.
$(«td:gt(4)»).css(«text-decoration», «line-through»);.

.mousedown()
Обработка события движения курсора «мыши» вниз по элементу.

.mouseenter()
Обработка процесса вступления курсора «мыши» с элемента.

.mouseleave()
Обработка процесса покидания курсора «мыши» с элемента.

.mousemove()
Обработка события движения курсора «мыши» по элементу.

.mouseout()
Обработка события отсутствия курсора «мыши» с элемента.

.mouseover()
Обработка события наведения курсора «мыши» с элемента.

.mouseup()
Обработка события движения курсора «мыши» вверх по элементу.

.next()
Применение к следующему за указанным элементом.

.parent()
Получение родителя каждого элемента в наборе указанных элементов, соответствующих параметрам выбора.

:parent Селектор
Выбор всех элементов по родителю одного из элементов, включая текст.

.parents()
Получение дочерних элементов из каждого элемента, соответствующего родителю, — опционально фильтруется по селектору.

.removeAttr()
Удаление атрибута у заданного элемента.

.removeClass()
Удаление заданного класса, группы классов у соответствующего элемента(ов), CSS

.replaceWith()
Замена содержания элемента на новое.
Синтаксис: .replaceWith( Новый контент )
Может быть использовано с функцией.
Синтаксис: .replaceWith( function() {
return $(this).contents();
}); )

.resize()
Динамичное изменение размера.

.scroll()
Скроллинг (прокрутка) элемента.

.scrollLeft()
Скроллинг по левому краю.

.scrollTop()
Скроллинг по верхнему краю.

.show()
Отобразить выбранные элементы.
Примечание: может применяться в скриптинге в паре с методом .hide() (скрыть).

.slideDown()
Эффект слайдинга вниз.

.slideToggle()
Отображение или скрытие элементов с эффектом слайдинга.

.slideUp()
Эффект слайдинга вверх.

.text()
Получение и замена текста в элементе.

.toggleClass()
Добавление или удаление одного и более классов в зависимости от значения сменяющегося аргумента в любом из сопутствующих элементов, CSS

.val()
Получение значения у полей формы, подстановка значения в поля формы.

.width()
Получение длины элемента, CSS.

Этот материал опубликован в Лаборатория Кода и тегирован , , . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>