—»     —»   Анимированная форма с переключателем на jQuery
  Раздел: Руководства   Нет комментариев  

Анимированная форма с переключателем на jQuery



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

Анимированная форма с переключателем на jQuery

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

Итак, давайте начнем разработку и оформление трёх форм.

Разметка

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

Для начала, мы создадим обёртку для всех трёх форм.

<div id="form_wrapper" class="form_wrapper">
<!-- We will add our forms here -->
</div>

Затем мы добавим каждой форме обёртку и внесём требуемые поля ввода. У каждой формы будет заголовок и текст с кнопкой подтверждения. Форма регистрации, которая будет нашей первой формой, будет оформлена двумя колонками, идущими друг за другом:

<form class="register">
    <h3>Register</h3>
    <div class="column">
        <div>
            <label>First Name:</label>
            <input type="text" />
        </div>
        <div>
            <label>Last Name:</label>
            <input type="text" />
        </div>
        <div>
            <label>Website:</label>
            <input type="text" value="http://"/>
        </div>
    </div>
    <div class="column">
        <div>
            <label>Username:</label>
            <input type="text"/>
        </div>
        <div>
            <label>Email:</label>
            <input type="text" />
        </div>
        <div>
            <label>Password:</label>
            <input type="password" />
        </div>
    </div>
    <div class="bottom">
        <div class="remember">
            <input type="checkbox" />
        </div>
        <input type="submit" value="Register" />
        <a href="index.html" rel="login" class="linkform">
            You have an account already? Log in here
        </a>
        <div class="clear"></div>
    </div>
</form>

Теперь мы добавим форму авторизации. Эта форма будет отображаться при заходе на сайт. Именно по этой причине мы добавим ей специальный класс «active»:

<form class="login active">
    <h3>Login</h3>
    <div>
        <label>Username:</label>
        <input type="text" />
    </div>
    <div>
        <label>Password:
            <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">
                Forgot your password?
            </a>
        </label>
        <input type="password" />
    </div>
    <div class="bottom">
        <div class="remember"><input type="checkbox" />
            <span>Keep me logged in</span>
        </div>
        <input type="submit" value="Login"></input>
        <a href="register.html" rel="register" class="linkform">
            You don't have an account yet? Register here
        </a>
        <div class="clear"></div>
    </div>
</form>

И, наконец, добавляем напоминалку пароля:

<form class="forgot_password">
    <h3>Forgot Password</h3>
    <div>
        <label>Username or Email:</label>
        <input type="text" />
    </div>
    <div class="bottom">
        <input type="submit" value="Send reminder"></input>
        <a href="index.html" rel="login" class="linkform">
            Suddenly remebered? Log in here
        </a>
        <a href="register.html" rel="register" class="linkform">
            You don't have an account? Register here
        </a>
        <div class="clear"></div>
    </div>
</form>

Элементы ссылок, которые указывают на другую форму, будут использовать один класс «linkform», и в целях определения, какую форму показывать в конкретный момент (когда, например, пользователь кликает по ссылке), мы внесём дополнение к атрибуту «rel». Например, ссылка «You don’t have an account? Register here» будет обозначена атрибутом rel «register», так как нам надо отобразить форму регистрации после клика по ссылке.

Как вы вероятно уже заметили, атрибут «href» будет вести на статичную HTML-страницу с соответствующей формой. Ссылка из прошлого примера будет вести на Index.html, которая будет содержать в себе форму авторизации. Данная ссылка придёт в действие, если в браузере отключена поддержка javascript.

Теперь давайте немного оформим наши формы посредством параметров CSS3.

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 a{
    text-decoration:none;
    color:#777;
    font-size:12px;
}
.form_wrapper a:hover{
    color:#000;
}

Заголовки по стандарту будут строчными. Нам надо, чтобы наши заголовки были блочными:

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

Мы также оформим поля ввода посредством параметров CSS3, задавая им градации в качестве фона, а также добавив привлекательную тень:

.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;
}

И на этом оформление завершено. Теперь давайте оживим это всё посредством jQuery!

javascript-код

Идея заключается в том, чтобы анимировать процесс изменения размеров формы, т.е. – отобразить её.
Для начала давайте соберём некоторые элементы:

//the form wrapper (includes all forms)
var $form_wrapper    = $('#form_wrapper'),

//the current form is the one with class "active"
$currentForm    = $form_wrapper.children('form.active'),

//the switch form links
$linkform        = $form_wrapper.find('.linkform');

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

$form_wrapper.children('form').each(function(i){
    var $theForm    = $(this);
    //solve the inline display none problem when using fadeIn/fadeOut
    if(!$theForm.hasClass('active'))
        $theForm.hide();
    $theForm.data({
        width    : $theForm.width(),
        height    : $theForm.height()
    });
});

Теперь мы вызовем функцию установки размера обёртки текущей формы:

setWrapperWidth();

Когда мы кликаем по «switch link» («переключить ссылку»), мы хотим спрятать текущую форму, так как мы уверены в том, что нам отобразится следующая. Мы анимируем ширину и высоту обёртки формы, чтобы создать новые параметры, соответствующие размерам новой формы. После того, как видоизменение состоялось, мы отображаем новую форму:

$linkform.bind('click',function(e){
    var $link    = $(this);
    var target    = $link.attr('rel');
    $currentForm.fadeOut(400,function(){
        //remove class "active" from current form
        $currentForm.removeClass('active');
        //new current form
        $currentForm= $form_wrapper.children('form.'+target);
        //animate the wrapper
        $form_wrapper.stop()
                     .animate({
                        width    : $currentForm.data('width') + 'px',
                        height    : $currentForm.data('height') + 'px'
                     },500,function(){
                        //new form gets class "active"
                        $currentForm.addClass('active');
                        //show the new form
                        $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();
             });

И на этом всё! Надеемся, что вам понравилась статья, и вы извлечете нечто полезное из нее!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 9231   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Дешевая типография в москве
Оборудование типографии. Типография и рекламное агентство
printoptima.ru
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031