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

скачать

HTML

HTML-часть включает в себя Wrapper’a, в котором находятся сменяющиеся поля.

Fancy Sliding Form with jQuery

Пока навигация скрыта, но будет показана при помощи JavaScript. Далее рассмотрим CSS.

CSS

CSS листающихся контейнеров и Wrapper’а имеет следующий вид.

Преобразуем навигацию:

CSS3-градиент будет фоном для ссылок:

Добавляем span, который определяет ошибки, или span, который отображает, что все нормально:

Определяем стиль элементов формы:

JavaScript

В JavaScript все это имеет следующий вид:

/*
Текущая позиция поля fieldset / ссылки в менню навигации
*/
var current = 1;

/*
Суммируем и сохраняем длину каждого поля с формами fieldset
Задать сумму как окончательную длину листающегося элемента
*/
var stepsWidth = 0;
var widths = new Array();
$(‘#steps .step’).each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$(‘#steps’).width(stepsWidth);

/*
Во избежание проблем с IE, фокусируем первый input формы
*/
$(‘#formElem’).children(‘:first’).find(‘:input:first’).focus();

/*
покажем навигацию
*/
$(‘#navigation’).show();

/*
когда кликаем на ссылку в навигацию
форма слайдится к соответствующему этому пункту меню полю
*/
$(‘#navigation a’).bind(‘click’,function(e){
var $this = $(this);
var prev = current;
$this.closest(‘ul’).find(‘li’).removeClass(‘selected’);
$this.parent().addClass(‘selected’);
/*
сохраняем позицию ссылки в переменной current
*/
current = $this.parent().index() + 1;
/*
анимируем / скользим к следующему или к соответствующему полю.
Значение полей навигации должно соответствовать значению поля с формами.
Теперь ,после скольжения, мы триггерим фокус на первом input-элементе нового поля.
ЕСли мы нажимаем на последнюю ссылку (подтверждение), то производится проверка всех полей,
,либо мы проверяем одно предыдущее перед тем как форма будет слользить
*/
$(‘#steps’).stop().animate({
marginLeft: ‘-‘ + widths[current-1] + ‘px’
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$(‘#formElem’).children(‘:nth-child(‘+ parseInt(current) +’)’).find(‘:input:first’).focus();
});
e.preventDefault();
});

/*
Кликаем на поле табуляции (последнее в каждом поле),
создаёт скольжение формы к следующему этапу
*/
$(‘#formElem > fieldset’).each(function(){
var $fieldset = $(this);
$fieldset.children(‘:last’).find(‘:input’).keydown(function(e){
if (e.which == 9){
$(‘#navigation li:nth-child(‘ + (parseInt(current)+1) + ‘) a’).click();
/*усилим размытость для проверки */
$(this).blur();
e.preventDefault();
}
});
});

/*
ПРоверяем все ошибки
Зписываем все ошибки в $(‘#formElem’).data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){ var error = validateStep(i); if(error == -1) FormErrors = true; } $('#formElem').data('errors',FormErrors); } /* Проверям поле И возвращаем -1 если есть ошибки, и 1 , если их нет. */ function validateStep(step){ if(step == fieldsetCount) return; var error = 1; var hasError = false; $('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){ var $this = $(this); var valueLength = jQuery.trim($this.val()).length; if(valueLength == ''){ hasError = true; $this.css('background-color','#FFEDEF'); } else $this.css('background-color','#FFFFFF'); }); var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a'); $link.parent().find('.error,.checked').remove(); var valclass = 'checked'; if(hasError){ error = -1; valclass = 'error'; } $('‘).insertAfter($link);

return error;
}

/*
Если ошибок не найдено, отправляем данные пользователя.
*/
$(‘#registerButton’).bind(‘click’,function(){
if($(‘#formElem’).data(‘errors’)){
alert(‘Please correct the errors in the Form’);
return false;
}
});
});[/sourcecode]

Источник