главная

Теги:


Анимированное переключение между формами

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

В случае если JavaScript будет отключен, то произойдет простой переход на другую страницу с формой.

Разметка HTML

Мы создадим три различные формы - форму входа, форму регистрации и форму восстановления пароля. Они будут иметь разные размеры и разное количество полей ввода.

Сначала создаим контейнер для всех трех форм:

Затем добавим элементы форм и вставим в них необходимые поля ввода. Каждая форма будет иметь заголовок и нижний колонтитул, в котором будет располагаться кнопка отправки формы.
Форма регистрации будет иметь две колонки, которые будут располагаться рядом по горизонтали:

Регистрация

Теперь добавим форму входа. Данная форма будет выводиться, когда пользователь будет заходить на сайт. Поэтому она имеет специальный класс “active”:

И добавляем форму для восстановления пароля:

Восстановление пароля

Все элементы ссылки, которые указывают на другие формы, имеют класс “linkform”, а в атрибуте rel имеет ссылку на форму, которую надо выводить. Например, ссылка "Вы еще не зарегистрировались? Присоединяйтесь" имеет значение атрибута rel “register”, то есть мы хотим выводить форму регистрации при нажатии на данную ссылку.

Как вы могли заметить, атрибут “href” указывает на статическую страницу HTML с соответствующей формой. Ссылка вступает в действие, если JavaScript отключен.

CSS

Начнем с контейнера форм. Зададим ему белый фон, который будет видно при переключении форм:

.form_wrapper{
	    background:#fff;
	    border:1px solid #ddd;
	    margin:0 auto;
	    width:350px;
	    font-size:16px;
	    -moz-box-shadow:1px 1px 7px #ccc;
	    -webkit-box-shadow:1px 1px 7px #ccc;
	    box-shadow:1px 1px 7px #ccc;
	}

Заголовок каждой формы будет иметь стиль:

.form_wrapper h3{
	    padding:20px 30px 20px 30px;
	    background-color:#444;
	    color:#fff;
	    font-size:25px;
	    border-bottom:1px solid #ddd;
	}

Изначально формы скрыты, но есть класс, который указывает активную форму:

.form_wrapper form{
	    display:none;
	    background:#fff;
	}
	form.active{
	    display:block;
	}

Определяем ширину каждой формы. В функции JavaScript контейнер будет менять размер с использованием анимации:

form.login{
	    width:350px;
	}
	form.register{
	    width:550px;
	}
	form.forgot_password{
	    width:300px;
	}

Колонки в форме регистрации будут располагаться одна рядом с другой:

.form_wrapper .column{
	    width:47%;
	    float:left;
	}

Элементы меток являются по умолчанию строчными. Нам нужно, чтобы они были блочными:

.form_wrapper label{
	    display:block;
	    padding:10px 30px 0px 30px;
	    margin:10px 0px 0px 0px;
	}

Для полей ввода будем использовать градиент в фоне и тени:

.form_wrapper input[type="text"],
	.form_wrapper input[type="password"]{
	    border: solid 1px #E5E5E5;
	    margin: 5px 30px 0px 30px;
	    padding: 9px;
	    display:block;
	    font-size:16px;
	    width:76%;
	    background: #FFFFFF;
	    background:
	        -webkit-gradient(
	            linear,
	            left top,
	            left 25,
	            from(#FFFFFF),
	            color-stop(4%, #EEEEEE),
	            to(#FFFFFF)
	        );
	    background:
	        -moz-linear-gradient(
	            top,
	            #FFFFFF,
	            #EEEEEE 1px,
	            #FFFFFF 25px
	            );
	    -moz-box-shadow: 0px 0px 8px #f0f0f0;
	    -webkit-box-shadow: 0px 0px 8px #f0f0f0;
	    box-shadow: 0px 0px 8px #f0f0f0;
	}
	.form_wrapper input[type="text"]:focus,
	.form_wrapper input[type="password"]:focus{
	    background:#feffef;
	}

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

.form_wrapper .bottom{
	    background-color:#444;
	    border-top:1px solid #ddd;
	    margin-top:20px;
	    clear:both;
	    color:#fff;
	    text-shadow:1px 1px 1px #000;
	}

Элементы ссылок будут иметь следующие стили:

.form_wrapper .bottom a{
	    display:block;
	    clear:both;
	    padding:10px 30px;
	    text-align:right;
	    color:#ffa800;
	    text-shadow:1px 1px 1px #000;
	}
	.form_wrapper a.forgot{
	    float:right;
	    font-style:italic;
	    line-height:24px;
	    color:#ffa800;
	    text-shadow:1px 1px 1px #fff;
	}
	.form_wrapper a.forgot:hover{
	    color:#000;
	}

Контейнер для чекбокса будет плавающим:

.form_wrapper div.remember{
	    float:left;
	    width:140px;
	    margin:20px 0px 20px 30px;
	    font-size:11px;
	}
	.form_wrapper div.remember input{
	    float:left;
	    margin:2px 5px 0px 0px;
	}

А кнопки отправки формы будут иметь следующий стиль:

.form_wrapper input[type="submit"] {
	    background: #e3e3e3;
	    border: 1px solid #ccc;
	    color: #333;
	    font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	    font-size: 14px;
	    font-weight: bold;
	    padding: 8px 0 9px;
	    text-align: center;
	    width: 150px;
	    cursor:pointer;
	    float:right;
	    margin:15px 20px 10px 10px;
	    text-shadow: 0 1px 0px #fff;
	    -moz-border-radius: 3px;
	    -webkit-border-radius: 3px;
	    border-radius: 3px;
	    -moz-box-shadow: 0px 0px 2px #fff inset;
	    -webkit-box-shadow: 0px 0px 2px #fff inset;
	    box-shadow: 0px 0px 2px #fff inset;
	}
	.form_wrapper input[type="submit"]:hover {
	    background: #d9d9d9;
	    -moz-box-shadow: 0px 0px 2px #eaeaea inset;
	    -webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	    box-shadow: 0px 0px 2px #eaeaea inset;
	    color: #222;
	}

JavaScript

Идея заключается в том, чтобы изменить размер контейнера в соответствии с размерами новой формы, а затем вывести форму. Сначала сохраним некоторые элементы:

//Контейнер форм (включает все формы)
	var $form_wrapper   = $('#form_wrapper'),
	//Текущая форма - имеет класс active
	$currentForm    = $form_wrapper.children('form.active'),
	//Ссылка на изменение формы
	$linkform       = $form_wrapper.find('.linkform');

Получаем и сохраняем ширину и высоту каждой формы, чтобы в дальнейшем использовать сохраненные значения при анимации:

$form_wrapper.children('form').each(function(i){
	    var $theForm    = $(this);
	    //Решение проблемы с выводом при использовании fadeIn fadeOut
	    if(!$theForm.hasClass('active'))
	        $theForm.hide();
	    $theForm.data({
	        width   : $theForm.width(),
	        height  : $theForm.height()
	    });
	});

Затем вызываем функцию, которая устанавливает размеры контейнера в соответствии с размерами текущей формы:

setWrapperWidth();

Когда пользователь нажимает на ссылку смены формы, мы скрываем текущую форму, так как ее надо менять, анимировано изменяем размеры контейнера и выводим новую форму:

$linkform.bind('click',function(e){
	    var $link   = $(this);
	    var target  = $link.attr('rel');
	    $currentForm.fadeOut(400,function(){
	        //Удаляем класс active с текущей формы
	        $currentForm.removeClass('active');
	        //Новая текущая форма
	        $currentForm= $form_wrapper.children('form.'+target);
	        //Анимируем изменения контейнера
	        $form_wrapper.stop()
	                     .animate({
	                        width   : $currentForm.data('width') + 'px',
	                        height  : $currentForm.data('height') + 'px'
	                     },500,function(){
	                        //Новая форма получает класс active
	                        $currentForm.addClass('active');
	                        //Выводим новую форму
	                        $currentForm.fadeIn(400);
	                     });
	    });
	    e.preventDefault();
	});

Функция для установки размеров контейнера просто изменяет значения его свойств CSS:

function setWrapperWidth(){
	    $form_wrapper.css({
	        width   : $currentForm.data('width') + 'px',
	        height  : $currentForm.data('height') + 'px'
	    });
	}

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

$form_wrapper.find('input[type="submit"]')
	             .click(function(e){
	                e.preventDefault();
	             });    

Готово!


Источник урока: tympanus.net/codrops/2011/01/06/animated-form-switching/

Урок Создан:2011-02-07 Просмотров:2012

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


Copyright© 2009 Hosted by Zhost