КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
Стандартные анимации⇐ ПредыдущаяСтр 23 из 23
Эффекты скольжения позволяют нам плавно скрыть или раскрыть элемент. Эффекты скольжения реализованы в виде методов slideUp(), slideDown() и slideToggle(). Если метод slideUp скрывает элемент в направлении вверх, как бы скользя, то метод slideDown плавно раскрывает скрытый элемент в направлении вниз. Метод slideToggle комбинирует действие обоих методов: если элемент скрыт, но раскрывается, если раскрыт - скрывается. easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже) 47
FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт. Создаем фотогалерею.
<script type="text/javascript"> $(document).ready(function() {
48 Формы
<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'ом по ссылке из $('form').submit(function(){ // чуть позже расскажу подробнее о AJAX $.post( $(this).attr('action'), // ссылка куда отправляем данные $(this).serialize() // данные формы );64 // отключаем действие по умолчанию return false; });
[ { name:"name", value:"Ivan" }, { name:"role", value:"Admin" }, ]
$('form').submit(function(){ if ($(this).find('input[name=user]').val() == '') { alert('Введите имя пользователя'); return false; } // кусок кода с отправкой // ... });
$('input[type=radio][name=choose][value=2]').prop('checked', true) // Можно конечно же использовать и метод click() дабы эмулировать выбор // необходимо пункта, но это вызовет обработчики click'а, что не желательно
$('input[name=check] ').prop('checked', true)
$('input[name=check] ').prop('checked') // или чуть более наглядным способом $('input[name=check] ').is(':checked')
$('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); // очищаем список
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 · 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", } });
|