Стандартные анимации

Эффекты скольжения позволяют нам плавно скрыть или раскрыть элемент. Эффекты скольжения реализованы в виде методов slideUp(), slideDown() и slideToggle().

Если метод slideUp скрывает элемент в направлении вверх, как бы скользя, то метод slideDown плавно раскрывает скрытый элемент в направлении вниз. Метод slideToggle комбинирует действие обоих методов: если элемент скрыт, но раскрывается, если раскрыт - скрывается.

easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)

47

FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.

Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:

<script type="text/javascript">

$(document).ready(function() {
$("a.gallery").fancybox();
});
</script>

48

Формы

change — изменение значения элемента
submit — отправка формы

<form action="/save/">

<input type="text" name="name" value="Ivan"/>

<select name="role">

<option>User</option>

<option>Admin</option>

</select>

<input type="submit"/>

</form>

А примеры будут идти в обратном порядке, вот отправка формы AJAX'ом по ссылке из
action:

$('form').submit(function(){

// чуть позже расскажу подробнее о AJAX

$.post(

$(this).attr('action'), // ссылка куда отправляем данные

$(this).serialize() // данные формы

);64

// отключаем действие по умолчанию

return false;

});

Вот и первый метод – serialize() – он в ответе за «сбор» данных с формы в удобном для
передачи данных формате:
name=Ivan&role=Admin
Так же есть метод serializeArray() –он собранные данные представляет в виде объекта:

[

{

name:"name",

value:"Ivan"

},

{

name:"role",

value:"Admin"

},

]

Теперь стоит добавить в данный код немного проверки данных:

$('form').submit(function(){

if ($(this).find('input[name=user]').val() == '') {

alert('Введите имя пользователя');

return false;

}

// кусок кода с отправкой

// ...

});

Вот еще один метод, который нам будет частенько нужен:
val() – получение значения первого элемента формы из выборки
val(value) – установка значение всем элементам формы из выборки65
Данный метод отлично работает практически со всеми элементами формы, вот только с
radiobutton'ами установить значение таким образом не получится, тут потребуется
небольшой workaround:

$('input[type=radio][name=choose][value=2]').prop('checked', true)

// Можно конечно же использовать и метод click() дабы эмулировать выбор

// необходимо пункта, но это вызовет обработчики click'а, что не желательно

С checbox'ами чуть-чуть попроще:

$('input[name=check] ').prop('checked', true)

Проверяем «чекнутость» простым скриптом:

$('input[name=check] ').prop('checked')

// или чуть более наглядным способом

$('input[name=check] ').is(':checked')

Проверять и отправлять форму AJAX'ом теперь умеем, теперь осталось решить вопрос с
динамическим изменением формы, и для этого у нас уже есть все необходимые знания,
вот, к примеру, добавление выпадающего списка:

$('form').append('<select name="some"></select>');

А если потребуется изменить список? Есть на все случаи жизни:

// возьмём список заранее, поберегу чернила

var $select = $('form select[name=Role]');

// добавить новый элемент в выпадающий список

$select.append('<option>Manager</option>');

// выбрать необходимый элемент

$select.val('Value 1');

// или по порядковому номеру, начиная с 0

$select.find('option:eq(2)').prop('selected', true);

// очищаем список

Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод
ошибок (да-да, за alert() да по рукам):

if ($(this).find('input[name=user]').val() == '') {

$(this).find('input[name=user]')

.before('<div class="error">Введите имя</div>');

return false;

}

При повторной отправки формы не забудьте убрать сообщения оставшиеся от предыдущей
проверки:

$(this).find('.error').remove()

Теперь можно объединить кусочки кода и получить следующий вариант:

$('form').submit(function(){

// чистим ошибки

$(this).find('.error').remove();

// проверяем поля формы

if ($(this).find('input[type=name]').val() == '') {

$(this).find('input[name=user]')

.before('<div class="error">Введите имя</div>');

return false;

}

// всё хорошо – отправляем запрос на сервер

$.post(

$(this).attr('action'), // ссылка куда отправляем данные67

$(this).serialize() // данные формы

);

return false;

});

49

jQuery validation — замечательный плагин, с помощью которого можно легко проверять на корректность вводимые пользователем данные. Знающие английский язык, неленивые люди могут сразу идти по ссылке и сами без проблем разберутся с плагином. Статья же эта написана в помощь тем, кому не хочется лишний раз рыться в документации. Поехали.

Качаем плагин, добавляем его на html страницу (не забыв при этом включить и саму библиотеку jQuery). Пускай наша форма регистрации выглядит так (для простоты убраны теги label и т.д.):

<form action="обработчик" method="метод" id="registration">

/* поля, обязательные для заполнения */

<input type="text" name="login" class="required" /><br/>

<input type="text" name="email" class="required email" /><br/>

<input type="password" name="password" class="required password" /><br/>

<input type="password" name="password_again" class="required" /><br/>

/* необязательные для заполнения поля */

<input type="text" name="city" /><br/>

<input type="text" name="year_of_birth" /><br/>

<input type="submit" name="submit" value="Зарегистрироваться" />

</form>

Добавить проверку валидности данных мы можем так:

$(document).ready( function(){

$("#registration").validate();

}); // #registration - id нашей формы

Теперь стоит задать правила, по которым будет проверяться наша форма. Так, например, для всех обязательных для заполненияполей необходимо задать class=»required».Теперь форма не будет отправляться до тех пор, пока пользователь не заполнит все эти поля, а возле них будут появляться соответствующие уведомления (об этом чуть позже). Точно так же можно добавить class=»email»к полю, где пользователь теперь сможет указать только валидный почтовый адрес.

Данным плагином предусмотрены следующие классы:

· required

· email

· url

· date

· dateISO

· dateDE

· number

· numberDE

· digits

· creditcard

Кроме добавления классов к полям, можно задавать правила валидации при вызове метода validate() :

$("#registration").validate({

rules: {

password: { // поле, для которого задается правило

required: true, // обязательно для заполнения

minlength: 4, // минимальная длина

maxlength: 30 // максимальная длина

},

password_again: { // поле, для которого задается правило

equalTo: ".password" // должно равняться полю с классом password

}

}

});

Таким способом, кроме тех правил, которые можно задавать с помощью классов, существует возможность задать еще следующие опции:

· equalTo: «класс или id элемента, с которым сверяемся»

· range: диапазон значений. Например, range: [ 18 , 70 ]

· rangelength: диапазон длины поля. Например, range: [4, 20]

· max: максимальное значение

· min: минимальное значение

· maxlength: максимальная длина

· minlength: минимальная длина

· required: условие зависимости. Таким способом можно сделать поле обязательным в зависимости от выполнения определенного условия. Например,

required: function(element) {

return $("#age").val() < 13;

}

· required: выражение зависимости. Поле становится обязательным в зависимости от результата заданного выражения. Например,

details: {

// обязательно, если выбрано поле c id="other"

required: "#other:checked"

}

Теперь поговорим о сообщениях об ошибке, которые появляются, когда пользователь вводит некорректные данные.

В коде плагина Вы можете найти список этих сообщений и изменить их:

messages: {

required: "This field is required.",

remote: "Please fix this field.",

email: "Please enter a valid email address.",

url: "Please enter a valid URL.",

и т.д. и т.п.

}

По умолчанию в плагине для сообщения об ошибке задан класс errorClass: «error»и тег errorElement: «label».При желании можно менять эти значения, например,errorElement: «span» и указывать стили для класса«error».

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

digits: function(value, element) {

return this.optional(element) || /^\d+$/.test(value);

}

Ну и наконец небольшой пример того, как можно добавить свои собственные правила. Например, в нашей форме регистрации было поле, в которое пользователь мог ввести свой город.

<input type="text" name="city" /><br/>

Предположим, что допустимое значение для этого поля — только русские и английские буквы. Необходимо в коде плагина найти блок methods:{ методы для валидации } и дописать в него наш метод, в котором задается необходимое регулярное выражение:

characters: function(value, element){

return this.optional(element) || /^\[a-zа-я]+$/i.test(value);

}

В блоке messages: { сообщения } добавляем наше сообщение, которое будет появляться, если пользователь ввел некорректные данные. Например,

characters: "Пожалуйста, введите корректное значение."

Теперь при вызове метода validate в нашем документе нам достаточно задать новое правило:

$("#registration").validate({

rules: {

city: "characters",

}

});