Окончание введения в jQuery

Окончание введения в jQuery

Перед прочтением этой статьи советую ознакомиться со статьями Введение в jQuery и Введение в jQuery (продолжение).

А я пока расскажу об объекте Event в jQuery. Вся фишка в том, что jQuery работает со своим event, аккуратно собранным из стандартных event’ов браузеров и дополненным. Короче говоря, кроссбраузерным.

Что умеет jQuery.Event. Во-первых, у него есть свойства target, currentTarget и relatedTarget. Определяют они соответственно “виновника” события, текущий элемент события (используется при всплывании события) и связанный с событием элемент. Пример последнего: курсор переместился с img1 на img2 – relatedTarget указывает на img1.

Во-вторых, у него есть свойства pageX, pageY, which и type. Первые два – числа, координаты курсора при событии, третье – код нажатой кнопки (на клаве или мышЕ), четвертое – тип события без приставки on-.

И, наконец, у Event’а есть методы с длиннымиНазваниями preventDefault(), stopPropagation() и stopImmediatePropagation(). Первый не дает случиться стандартным событиям браузера (например, переходу по ссылке), второй не даст событию всплывать, третий завершит цепочку обработчиов при всплытии события.

Что можно сделать с этим всем багажом? А вот что:

<br />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&#8217;t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn&#8217;t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. <a href="http://v3shin.ru/">more</a><br />
<script type="text/javascript">
$(function(){
	$('body').mousedown(function(e){ // при нажатии кнопки мыши
		if(e.which == 1 &amp;amp;amp;&amp;amp;amp; e.target.nodeName.toLowerCase() != 'a'){ // левый клик не по ссылке
			e.preventDefault(); // ничего не происходит
		}
	}).bind('contextmenu', function(e){return false;}); //защита от контекстного меню
});
</script><br />

Немудреная такая защита от немудреного копирайтера. Если товарищ в код не посмотрит, будет долго щелкать или вырезать после ctrl+A. А если еще вспомнить про Event.pageX и Event.pageY, то можно стандартное контекстное меню подменить своим.

Теперь переведу русло повествования к анимации. Анимация в jQuery представлена одной функцией: animate(). К примеру, $(‘a’).animate(), анимирует все ссылки. Правда, ни фига не произойдет. Чтобы что-то произошло, надо на вход функции подать аргументы. Выбирать придется из 4-х: параметры анимации, длительность анимации, сглаживание (easing) и callback. Записал? Расшифровываю.
Параметры – объект, типа как для css(). К примеру, {opacity: 0.3} изменить прозрачность элемента до 30%, а {top: “+=100px”} передвинет элемент вниз на 100 пикселей. Также, можно писать к параметру любую чепуху, типа “toggle”, “+=2pt” и прочие единицы измерения. Что не съест, придется переписывать. ;)
Длительность – параметр необязательный. Пишется в миллисекундах или словами (“slow”, “fast”). По умолчанию – 400.
Сглаживание – тоже параметр необязательный. Задается словами, по умолчанию – “linear”.
Callback – он и в Африке callback. Выполняется после анимации.

Простой пример использования анимации:

</p>
<ul id="stepper">
<li>Один</li>
<li>Два</li>
<li>Три</li>
</ul>
<p><script type="text/javascript">
$(function(){
	$('#stepper li:not(:first-child)').css({opacity: 0}).hide(); // невидим и прячем все элементы кроме первого
	$('#stepper li').click(function(){ // при клике
		var t = $(this), n = t.next(); // запоминаем элемент и следующий за ним
		if(!n.length) n = t.parent().find(':first-child'); // если он последний - следующим будет первый
		t.animate({opacity: 0, fontSize: '+=200%'}, 100, function(){ // заневидимываем элемент и увеличиваем размер текста за 100 миллисекунд
			t.css({fontSize: '100%'}).hide(); // нормализуем текст и прячем элемент
			n.show().animate({opacity: 1}, 500); // а следующий - показываем и разневидимываем за 500 миллисекунд
		});
	});
});
</script><br />

Заметь: t.hide() прописано в callback’е, иначе элемент спрячется в самом начале выполнения animate().

К слову, отключить анимацию можно, прописав jQuery.fx.off = true; – это то же самое, что для всех вызовов animate() указывать длительность 0. И еще: для задержки анимации используй функцию delay(), которой передавай задержку в миллисекундах. А если надо просто вызвать несколько анимаций друг за другом, то просто пиши animate().animate().animate()… – вызовы лягут цепочкой. Зато вот все, что не относится к animate(), будет запущено сразу.

Продолжаем. AJAX! Не тот, который чистит, а тот который асинхронный. Строго говоря, он тут представлен одной функцией: jQuery.ajax(), но для удобства у нее есть синонимы: get(), post() и getScript(). Заметь: функции вызываются без выборки элементов, например, так: $.get(…); . На вход функция принимает адрес и объект с настройками (необязательный). Настроек много, все их можно почитать на странице документации. Вот то, что люди пишут чаще всего:
- data: get-строка или объект, который потом все равно преобразуется в строку. Это – данные, пересылаемые серверу.
- dataType: что ожидается от сервера в ответ: xml, json, script, или html.
- scriptCharset: указывает, в какой кодировке отправляются данные.
- statusCode: объект, в котором каждому статусному коду сопоставляется функция, выполняющася при данном коде ответа.
- success: функция, которая будет выполнена при успешном запросе.
- type: тип запроса: get или post.
- url: адрес запроса (не забудь погуглить политику безопасности ajax).
get() и post() – алиасы (псевдонимы) ajax(), только с указанием type. На вход принимают url, data, success и dataType, причем обязателен только url. Используются для сокращения кода.

Пример того, что можно сделать, используя эти функции:

test.html

<br />
<script type="text/javascript">
$(function(){
	var city = 'Montevideo'; // можно задавать динамически
	$.get('test.php?city=' + city, function(data){ // get-запрос. на входе адрес и callback
		var html = '';
		var c = $(data).find('current_conditions'); // не забываем, что data приходит в текстовом виде. преобразуем данные в объект jQuery и аккуратно разберем его
		html += city + '<br />';
		html += '<img src="//google.com' + c.find('icon').attr('data') + '" /><br />';
		html += c.find('temp_c').attr('data') + 'C&amp;amp;amp;deg;';
		$('#res').html(html); // а за многочисленные $('#res').html($('#res').html() + '...'); надо руки отрывать
	});
});
</script><br />

test.php
<br />
echo file_get_contents(&#8216;http://www.google.com/ig/api?weather=&#8217; . $_GET['city']);<br />

К слову, если запросы грузятся долго, неплохо было бы использовать лоадеры – такие вертушки с надписью “loading…”. Для этого сначала пишешь лоадер с украшательствами, ставишь его скрытым на страницу, а затем при ajax-запросе показываешь. Ну, и не забудь после загрузки скрыть его.

<br />
$(&#8216;#loader&#8217;).show();<br />
$.get(&#8216;_.php&#8217;, function(){<br />
	$(&#8216;#loader&#8217;).hide();<br />
})<br />

Вроде, и все про ajax. И к нему – пару плюшек. *пафосным голосом* ПЕРВАЯ ПЛЮШКА! Функция ajaxSetup();. На вход принимает объект и задает “настройки по умолчанию” для ajax-запросов. То есть, если ты используешь во всех запросах одно и то же значение какого-либо параметра, его можно задать этой функцией и потом не указывать. *тем же пафосным голосом* ВТОРАЯ ПЛЮШКА! Функция parseJSON();. Если ответ пришел в json-формате, обработай его этой функцией и будет тебе счастье.

Как бы и все, что хотел рассказать. А в качестве бонуса… Нехилый такой листинг, реализующий часть интерфейса по работе с изображениями на сервере. И я бы выложил его сюда, но текста там не меньше, чем в этой статье. Поэтому качай архив, распаковывай и читай комментарии в коде. Запускать его придется с сервера, там часть кода на php.

На этом все. Жду комментариев и удачи в сайтостроении! =)

    • Денис
    • Май 18th, 2012 11:28дп

    ну.. хотя я тебе тут комментарий оставлю, ато совсем forever alone =)

    Спасибо, пиши еще)

  1. Трэкбэков пока нет.

T_T O_O =| =D =/ =) =( ;) :twisted: :idea: :cool: :blush: :?: :!:
*