Строим невероятную форму регистрации при помощи jQuery

форма регистрации

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

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1 – Разметка в Photoshop

Сначала нам нужно спланировать свою разметку и сделать ее красивой при помощи Photoshop. Спасибо Collis’у (имеется в виду веб-разработчик Collis Ta’eed) и его изумительному обращению с Photoshop за то, что у нас есть превосходная разметка, с которой уже можно работать.

Само собой разумеется, вы можете пользоваться PSD-файлами макетов исходной страницы и страницы с развернутой панелью-слайдером для более внимательного изучения. Эти файлы расположены в прилагаемом zip-архиве. У нас также нет никаких градиентов, так что мы должны довольно легко все сделать при помощи одного CSS.

форма регистрации

Здесь вы можете видеть, как будет выглядеть демоверсия в своем обычном состоянии.

форма регистрации

А вот так будет выглядеть демо-версия, когда панель скользнет вниз.

Шаг 2 – Проектирование структуры

Первым делом нам нужно выстроить структуру страницы. Какой структуры нам нужен HTML, чтобы создать вышеуказанную разметку, какой структуры нам нужен HTML?

Для начала, нам нужен заголовок, простирающийся на всю ширину страницы.

Также нам понадобится собственно верхняя панель, которая в настоящий момент постоянно раскрыта, пока мы не добавим обработку JQuery.

Нам понадобится область для содержимого страницы.

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

Все в порядке, разметка страницы довольно простая. Вот она:

<div></div>  <!--Header-->

<hr>  <!--Header Stripe-->

  <div>                  <!--Contains the button and panel-->
    <div>                <!--Contains the panel itself-->

      <div> This div will serve as the background of the panel</div>

    </div>
    <div><a>Login Here</a></div>  <!--Will be the button to slide the panel down-->

    <div><a>Hide</a></div>        <!--Toggles to this when the panel is slid down-->
  </div>
</div>

<div>

  All of the Content will go here
</div>

Круто…без классов и какого-либо содержимого внутри она выглядит как несколько бессмысленных div’ов, но позже все они понадобятся для CSS и JQuery. Теперь мы начнем добавлять классы, готовясь к использованию CSS.

Шаг 3 – Подготовка CSS: классы и ID

Теперь нам нужно сменить скелет на реальный сайт при помощи CSS. Мы начнем с добавления классов и ID ко всем этим div’ам! Это можно легко сделать, распечатав разметку Photoshop, а затем сделать разметку областей и связанных классов при помощи маркера. Для демонстрации я сделаю то же самое, только в Photoshop. Хотя он может быть чрезвычайно уродливым, будем надеяться, покажет вам разные области страницы.

форма регистрации

Обратите внимание: я планирую сделать обычное изображение, неподсвечивающееся при проведении над ним мышью.

Вот страница с добавленными классами и ID:

<div id="header">
</div>

<hr id="header_stripe"/>

<div id="wrapper">
  <div id="toppanel">

    <div id="panel">
      <div id="panel_contents"> </div>
    </div>
    <div class="panel_button"><a href="#">Login Here</a></div>

    <div class="panel_button"><a href="#">Hide</a></div>
  </div>
</div>
<div id="content">

</div>

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

Шаг 4 – Сборка файлов

Прежде чем двигаться дальше, нам нужно добавить файл CSS в скелет. Я создал таблицу стилей, озаглавленную «style.css». Поскольку мы все равно добавляем код в заголовок, мы также добавим ссылки на javascript и jQuery. Вот заголовок страницы:

<head>
<title>Nettuts JQuery Sliding Panel</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></
<wbr>
    script> <script src="javascript.js" type="text/javascript"></<wbr>script>
</head>

Шаг 5 – Определяем стили для скелета: заголовок

Теперь нам нужно назначить стили скелету из div’ов. Давайте начнем сверху и будем двигаться вовнутрь. Сначала нам нужно назначить стили заголовку, а также тэгу body:

body {
    background: #202020;
    text-align: center;
    margin: 0px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 135px;
    background: #3f3f3f url(images/header.png) no-repeat center ;
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

К счастью, здесь нет градиентов, о которых нужно беспокоиться. Но у нас все же есть фоновое изображение. Также я добавил рамку в 1px к низу заголовка для визуального разрыва.

Фоновое изображение не обязательно. Мне так понравился шрифт Bell Gothic BT, что я решил сделать надпись фоновым рисунком. В качестве альтернативы, вы можете просто определить стили для обычного текста, добавив свойства для тэгов h1 и h2:

#header h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 30px;
font-size: 40px;
color: white;
}

#header h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #7e7e7e;
}

А теперь подправим заголовок (прим. перев. – в исходных текстах автора для этих стилей указан атрибут display:none, поэтому надписи h1 и h2 не отображаются поверх фонового рисунка).

<div id="header">

  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

Так что теперь страница должна выглядеть так:

Шаг 5 можно посмотреть здесь.

форма регистрации

Шаг 6 – Определяем стили горизонтальной линейке

Несмотря на то, что у нас есть нижняя рамка заголовка, чтобы визуально отделить секции, нам, кроме того, нужна плотная, более заметная рамка. Так как мы не можем применить к заголовку две нижних рамки, можно просто назначить стили горизонтальной линейке (hr):

hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;

}

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

форма регистрации

Шаг 6 можно посмотреть здесь.

Шаг 7 – Определяем стили панели

Теперь нам нужно назначить стили панели. Пока не добавлен JQuery, мы собираемся определить стили панели, когда она будет развернута. Когда мы закончим CSS, то станем с помощью анимации изменять высоту панели до нуля, а затем обратно до полной высоты; так что нам нужно быть уверенными, что когда меняется высота, все остается на своих местах.

Вот код CSS, позже я его объясню:

#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
}
#toppanel {
    position: absolute;
    top: 135px;
    width: 900px;
    z-index: 25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#panel {
    width: 900px;
    position: relative;
    top: 1px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: black;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    height: 100%;
    width: 904px;
    position: absolute;
    z-index: -1;
}

форма регистрации

Ok, вот немного кода для одного блока. Ну, это больше, чем ничего. Попробуйте проверить его при помощи Firefox Extension Firebug или Web Developer, и увидите все, что делает CSS.

Итак, проверим, как сейчас выглядит дизайн в Шаге 7.

Первым делом, нам нужно, чтобы расположение панели было выражено абсолютными координатами, иначе, когда она будет увеличиваться, то сдвинет весь контент дальше вниз. Так что мы добавляем обертку, в которую оборачиваем все, а затем центрируем. Если не использовать обертку, панель с абсолютными координатами будет нелегко отцентрировать.

Далее, мы добавляем данные о стилях для верхней панели в целом. Как вы можете видеть, сюда же включаются кнопки, расположенные на панели.

После этого мы добавляем данные о стилях панели, которая обычно скрыта. Это блок, который вы сейчас видите увеличенным. Я сделал его высоту 100%, так что если мы увеличиваем или уменьшаем высоту #toppanel, то высота #panel будет такой же.
К тому же, свойство overflow установлено на hidden, так что когда высота #toppanel уменьшается, она обрезает содержимое панели.

Если вы внимательно посмотрите на приведенный ранее HTML, то увидите div с ID panel_contents. Этот div, хотя и пустой, позволяет нам иметь прозрачный фон, в то время как контент остается внутри непрозрачного объекта.

Шаг 8 – Добавляем в панель содержимое

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

.border {
    border: 15px #1d1d1d solid;
}

img.border_pic {
    border: 15px #1d1d1d solid;
    position: absolute;
    top: 110px;
    float: left;
    margin-left: 150px;
    width: 250px;
    height: 150px;
    z-index: 30;
}
div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    right: 150px;
    top: 110px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}

HTML:

      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />

        </p>
      </div>

форма регистрации

Шаг 8 можно посмотреть здесь.

Шаг 9 — Тестируем CSS

Теперь, перед использованием jQuery для анимации высоты верхней панели нам нужно убедиться, что все работает гладко. Сейчас у нас уже есть содержимое, поэтому давайте изменим высоту #panel на 200px и посмотрим, что произойдет:

форма регистрации

Прекрасно. Шаг 9 можно видеть здесь.

Теперь изменим ее на 0:

форма регистрации

Безупречно. Теперь мы знаем, что при помощи JQuery наш замысел будет работать.

Шаг 10 – Определяем стили клавиши

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

Если помните, мы определили для них класс «.panel_button». Вот содержание таблицы стилей. Я позже объясню:

.panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
    background: url(images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}

форма регистрации

Шаг 10 – Клавиши панели

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

Мы также собираемся обернуть текст в ссылку, чтобы обеспечить эффект on hover, а также регулировку положения.

Шаг 11 – HTML клавиши

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

Первым делом мы собираемся добавить к каждой кнопке изображение и расположить его при помощи CSS; вы это увидите далее в HTML:

.panel_button img{
position: relative;
top: 10px;
border: none;
}

Далее, нам еще нужно скрыть клавишу Hide. Насколько я ненавижу inline-стили, но думаю, как раз этот CSS легче встроить, так что вот получившийся код HTML для клавиш с изображениями:

    <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/>
      <a href="#">Login Here</a>

      </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" />

      <a href="#">Hide</a>
      </div>

Ok, обратите внимание, что прямо сейчас клавиша hide скрыта при помощи inline-стилей. Позже она будет переключаться при помощи jQuery. Заметьте, еще я добавил ID для второй клавиши, так что позже мы легко сможем выбрать ее в качестве цели.

форма регистрации

Шаг 11 Клавиша панели

Шаг 12 – Добавляем контент

Это простой, но необходимый шаг – добавление контента. Я написал одно предложение и добавил абзац временного текста. Он отцентрирован с помощью auto margin, и окрашен в серый цвет:

#content {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    position: relative;
    top: 90px;
    text-align: left;
    color: #545454;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 30px;
}

форма регистрации

Смотрите текст сзади панели в Шаге 12.

Шаг 13 – Время JQuery!

Ok, завершающий аккорд — JQuery! Возьмите самый последний JQuery на jQuery.com. Если вы новичок, и ищете великолепные упражнения по jQuery, не забудьте просмотреть другой учебник на Nettuts — Джеффри Уэя (Jeffrey Way). Я уже захватил копию с JQuery.com, и добавил ссылку на нее из HTML страницы на Шаге 4.

Шаг 14 – Думаем о том, что нам нужно

Давайте до того, как начать писать код, сначала подумаем, что мы хотим выполнять с помощью JQuery.

Мы хотим активировать анимацию при щелчке ‘div.panel_button’.

Затем нам нужно анимировать высоту панели до 400px.

Потом нам нужно переключать клавишу.

После того мы хотим активировать обратную анимацию при щелчке ‘div#hide_button’.

Далее нам нужно анимировать высоту обратно до 0px

Шаг 15 – Пишем код

Итак, первое, с чего мы начнем, приводя скрипт в готовность – со следующего JQuery:

$(document).ready(function() {
});

Now we write the code that goes inside there:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"
        });
   });
});

форма регистрации

Панель в действии — в Шаге 15.

Во-первых, при рассмотрении предыдущего кода некоторых из вас могло заинтересовать, почему мы имеем переключатель только в первом обработчике. Ну, вам нужно помнить, что клавиша hide (скрыть) также имеет класс panel_button. Следовательно, клик на кнопку ‘Hide» в действительности применим к обоим обработчикам.

Шаг 16 – Делаем анимацию ‘реальной’

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

Давайте попробуем это сымитировать:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"

        }, "fast");
      });
});

Обратите внимание, что мы анимируем панель до высоты 500 перед тем как она станет 400 высотой. Мы также добавили различие скоростей, как в жизни, сделав отдельные части более медленными. Если посмотреть на демоверсию, вы увидите, что при скрытии панели она сначала достигает 500. Снова это из-за того, что обе клавиши имеют один и тот же класс. Так что в реальности, когда вы скрываете панель, проходит следующий процесс:

Анимация до высоты 500 и переключение

Более быстрая анимация обратно до 400

Более быстрая анимация обратно до 0px

Теперь у нас есть работающая slider-панель, использующая JQuery. Надеюсь, вы нашли этот учебник полезным! Если да, пожалуйста, отправьте его на Digg, StumbleUpon, DZone, и т.д.!

Автор: Connor Zwick

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (10)

  1. Сергей

    уу, я на этот раз ни что не понял :(

  2. Дмитрий

    Спасибо парни.
    Протестировал- отлично работает!
    А сделайте пожалуйста ещё урок про очень-очень красивые всплывающие окна. А то те срипты, что в рунете уже примелькались. А у вас всегда чтот свежее.
    Все будут счастливы.

    • Виктор Рог

      Рады стараться:)

      Возможно ближайшее время что-нибудь такое и дадим.

  3. naikom blog

    Хах тоже думал об этом написать

  4. bobpps

    Отлично, особенно для меня как новичка!

  5. Борис

    Очень интересная фишка. Обязательно применю на сайте

  6. Валентин

    Мне не нравится общий фон,как его можно поменять, и насчёт текста,его тоже наверное можно поменять,где это делается в фотошопе или путём специальной записи в скрипте?

  7. Валентин

    Интересно ,если в фотошопе нарисовать другой рисунок,можно ли применить скрипт,который используется в данном варианте?

  8. Поц

    Это форма авторизации, а не регистрации.
    PS. В браузере — перекос полей.
    PPS. Браузер — это Firefox, а не ie-семейство.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree