Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Создаем потрясающую форму для входа на сайт при помощи jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

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




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


Шаг 1: Макет страницы в Photoshop

Для начала нам необходимо спланировать наш макет и придать ему крутой вид при помощи Photoshop. Благодаря
Collis и его фантастическим умениям работы с Photoshop, у нас имеется отличный макет для работы.
Вы можете получить файл PSD (*  Photoshop Document – документ Photoshop. Здесь и далее примеч. пер.) с начальным видом панели и файл PSD с конечным результатом для дальнейшего изучения в
прикрепленном архиве. Но в нем все вполне очевидно. Также в нем нет каких-либо градиентов, так что
 у нас должно хватить умений реализовать его лишь за счет CSS

Before .

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

After .

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


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

Сперва нам необходимо создать структуру страницы. Для того чтобы создать макет выше,
 что нам необходимо из структурных элементов HTML?

  • Для начала нам нужен заголовок шириной на всю страницу.
  • Также нам понадобится верхняя панель, которая, мы так предположим, пока что
    будет постоянно открыта до того, как мы добавим JQuery.
  • Нам будет нужна область для обычного контента страницы.
  • Наконец, нам будет необходима визуальная граница между заголовком и контентом страницы,
     которую реализуем при помощи элемента hr (* рисует горизонтальную линию).
  • Что ж, разметка страницы довольно проста. Она представлена ниже:

    Вау... без классов или любого другого контента внутри она выглядит как куча бессмысленных тегов div,
    однако все это будет необходимо для реализации кода CSS и jQuery. Теперь мы начнем добавлять классы,
    готовясь к добавлению кода CSS.


    Шаг 3: Подготовка перед добавлением CSS: классы и id

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

    Areas .

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

    Ниже приводится код разметки с добавленными классами и id:

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


    Щаг 4: Подключаем необходимые фалы

    Перед тем как двинуться далее, нам необходимо подключить файл CSS в файле с базовой разметкой:
    Я создал таблицу стилей под названием "style.css".
    Раз уж мы добавляем код в заголовок, то могли бы также добавить и файлы JavaScript и jQuery.
    Ниже приводится код для заголовка страницы:


    Шаг 5: Добавляем стилевое оформление для каркаса разметки: заголовок

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

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

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

    и дальнейшего преобразования заголовка в следующий:

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

    Вы можете просмотреть результат этого этапа по ссылке

    step 5 .

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

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

    Теперь в дополнение к границе высотой 1px у нас имеется более толстый разделитель

    step6 :

    Вы можете просмотреть результат этого этапа по ссылке.


    Шаг 7: Добавляем стилевое оформление для панели

    Теперь нам необходимо добавить стилевое оформление для панели.
    До того как добавить код jQuery, мы добавим стилевое оформление для панели в раскрытом состоянии.
    После добавления кода CSS мы изменим высоту панели до нуля и потом вернем ее первоначальное значение;
    так что нам необходимо убедиться в том, что после изменений высоты она остается той же.

    Ниже приводится код CSS, который я объясню позже

    step7 :

    Верно, тут многовато кода для одного элемента. Что ж, здесь представлен код для нескольких.
    Попробуйте проинспектировать код либо при помощи расширения Firebug для Firefox, либо Web Developer, и вы увидите, для чего используется
    весь этот код CSS.

    Взгляните на результат этого этапа по ссылке
    .

  • Сперва нам нужно, чтобы для панели было задано абсолютное позиционирование, в ином случае после раскрывания она оттеснит весь нижележащий контент вниз.
    Так что мы добавляем обертку, которая оборачивает все остальные элементы, и затем выравниваем по центру ее содержимое.
    Если мы не воспользуемся оберткой, то панель,
    для которой установлено абсолютное позиционирование, было бы не так просто выровнять по центру.
  • Затем мы добавляем стилевое оформление для верхней панели как целого.
    Как вы видите, в ее состав входят кнопки панели.
  • После этого мы добавляем стилевые правила только для панели (* элемент с id panel), которая в норме скрыта.
    Это прямоугольник, что на изображении сейчас развернут.
    Я задал значением высоты 100%, так что если мы увеличим или уменьшим высоту #toppanel, то высота #panel будет такой же.
    Также мы задаем в качестве значения overflow (* управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров) hidden (* отображается только область внутри элемента, остальное будет скрыто), так что в случае снижения высоты #toppanel
    контент панели будет скрыт.
  • Если вы просмотрите ранее написанный код HTML, то вы увидите элемент div с id panel_contents.
    За счет этого элемента мы можем обеспечить прозрачность фона и в то же время поддерживать
     контент внутри непрозрачным.

  • Шаг 8: Добавляем контент к панели

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

    CSS:

    HTML

    step8 :

    Взглянуть на результат этого этапа вы можете по ссылке.


    Шаг 9: Тестируем код CSS

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

    :

    Замечательно. Вы можете просмотреть результат этого этапа по ссылке.
    Теперь мы изменим значение высоты до 0

    step9 :

    Великолепно. Теперь мы знаем, что наша панель будет функционировать после добавления кода JQuery.


    Шаг 10: Добавляем стилевое оформление для кнопки

    Если вы изучите конечный результат, то заметите, что кнопка, при помощи которой панель раскрывается, изменяется после нажатия по ней.
    То есть, она переключается.
    Поэтому нам необходимы две кнопки, и мы будем менять их видимость.
    Однако, перед тем как скрыть одну из них, нам необходимо добавить CSS-правила для них.

    Если помните, мы добавили класс ".panel_button" к ним.
    Ниже приводится информация о стилевом оформлении кнопок. Я дам к ней разъяснения позже

    10 .

    Вы можете просмотреть результат этого этапа по ссылке.

  • Сначала мы выравниваем кнопку за счет добавления отступов, размер которых будет автоматически рассчитан браузером.
    Затем мы ее позиционируем и добавляем фоновое изображение.
    Также мы добавляем правила, необходимые для учета различий в правилах разных браузеров.
    И придаем кнопке при перемещении поверх нее курсора такой вид, как будто ее можно нажать, за счет изменения вида курсора на «курсор-рука».
    За счет этого просто улучшается удобство и простота использования.
  • Также мы обернем текст в ссылку для изменения его стилевого оформления при перемещении курсора поверх ссылки
     и установления позиционирования.

  • Шаг 11: Код HTML для кнопок

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

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

    Что ж, обратите внимание, что прямо сейчас кнопка для сокрытия панели скрыта за счет правила CSS, добавленного в самом теге.
    Ее видимость будет переключена позже при помощи jQuery.
    Обратите внимание, что я также добавил id для второй кнопки, -благодаря чему мы можем позже обратиться к ней

    11 .

    Вы можете просмотреть результат этого этапа по ссылке.


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

    Это быстрый, но необходимый этап, на котором мы добавляем контент.
    Я написал одно предложение и добавил один параграф временного текста (* текст, который дизайнер вводит вместо основного в макет страницы, чтобы сосредоточить внимание на графических элементах свёрстанного листа).
    Я задал выравнивание для него за счет добавления отступов, размер которых будет автоматически рассчитан браузером, и окрасил его в серый цвет

    12 :

    Взгляните на текст за панелью по ссылке.


    Шаг 13: Пришло время воспользоваться jQuery!

    Что же, переходим к последней части руководства – jQuery!
    Вы можете скачать последнюю версию jQuery на jQuery.com.
    Если вы новичок в работе с ней, обязательно ознакомьтесь с другим руководством Nettuts, написанным Jeffrey Way, в качестве отличного ресурса для обучения jQuery.
    Я уже получил копию jQuery с jQuery.com и подключил ее к странице в Шаге 4.


    Шаг 14: Подумайте о том, что нам необходимо

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

  • Активация анимации при нажатии кнопки 'div.panel_button'.
  • Изменение высоты панели до 400px.
  • Переключение кнопки.
  • Активация обратной анимации при нажатии кнопки 'div#hide_button'.
  • Изменение высоты панели до 0px.

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

    Мы начинаем с того, что пишем инструкцию для запуска скрипта после того, как документ загружен, при помощи следующего кода jQuery

    Before :

    С панелью в движении можете ознакомится по ссылке.

    По началу, после ознакомления с предыдущим кодом, некоторые из вас могли бы удивиться, почему я переключил видимость кнопок только в первом обработчике.
    Что ж, вы должны помнить, что кнопка для сокрытия панели также имеет класс panel_button.
    Поэтому при нажатии кнопки 'Hide' вы в действительности применяете оба обработчика.
    вы в действительности применяете оба обработчика.


    Шаг 16: Делаем так, чтобы анимация выглядела, как имитируемый ею процесс в реальности

    Что же, сейчас анимация выглядит вполне хорошо, однако мы по-прежнему можем кое-что усовершенствовать; например улучшить вид анимации.
    При реализации анимации обычно важно попробовать сымитировать процесс из реальной жизни (* жизнь вне киберпространства) как можно правдоподобнее.
    В нашем случае я имитирую пример с опускающимся экраном  проектора.
    Помните, что при его раскрывании вы его опускаете ниже конечного положения, а затем он поднимается чуть вверх.
    Подобным образом, когда вы хотите его свернуть, то вы сначала опускаете его немного вниз перед тем,
    как он быстро свернется.

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

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

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

    Advertisement
    Advertisement
    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.