Задача очень простая и востребованная. Ведь не будем же мы заставлять нашего пользователя ходить по ссылкам регистрации/авторизации, грузить отдельную страницу (даже две: одну для авторизации, вторую для регистрации). Если можно при помощи отдельного всплывающего модального окна позволить посетителю сделать выбор: войти ему на сайт, используя свой логин и пароль, или зарегистрироваться, формы регистрации и авторизации при этом вставив во вкладки. Удобно – один щелчок по вкладке в модальном окне отделяет нас от нужной формы регистрации или авторизации, при этом само окно остается компактных размеров.

Всегда искал, где можно купить наклейку на телефон, хороший сайт, где можно купить много для телефона.

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

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

   Пример

   Итак, приведем верстку нашего модального окна со вкладками регистрации/авторизации:

   Примечание автора: помните, необходимо задать doctype документа, как поддерживающего html5, для нормальной работы twitter bootstrap:

<!DOCTYPE HTML>
<html>
<head>

   Далее подключаем twitter bootstrap (предположим, что twitter bootstrap framework находится у Вас в папке js,иначе измените папку на другую, где находится framework):

<link rel="stylesheet" href="/js/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="/./js/jquery.js"></script>
<script type="text/javascript" src="/./js/bootstrap.min.js"></script>

Приведем html самого всплывающего окна регистрации/авторизации со вкладками на twitter bootstrap.

   Примечание автора: скомпилированный twitter bootstrap должен содержать оба плагина modal, tab, и все связанные с ними css стили.

<!-- Button to trigger modal -->
<button type="button" data-toggle="modal" data-target="#myModal"> Авторизация/Регистрация </button>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Добро пожаловать на наш сайт!</h3>
  </div>
  <div class="modal-body">
    <ul class="nav nav-tabs" id="login-or-register">
      <li ><a href="#register" data-toggle="tab">Регистрация</a></li>
      <li class="active"><a href="#profile" data-toggle="tab">Авторизация</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane" id="register">
            <form action="#">
                <div class="row">
                    <h3>У вас еще нет логина на нашем сайте?</h3>
                    <p>Зарегистрируйтесь, пожалуйста.</p>
                </div>
                <div class="row">
                    <label for="login">Введите Ваш логин</label>
                    <input id="login" name="login" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    <label for="password">Введите Ваш пароль</label>
                    <input id="password" name="password" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    <label for="password_repeat">Повторите Ваш пароль</label>
                    <input id="password_repeat" name="password_repeat" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    Поля, помеченные <span class="required">*</span>, обязательны для заполнения.
                </div>
                <div class="row">
                    <input type="submit" id="register_button" class="register_button" value="Зарегистрироваться" />
                </div>
            </form>
      </div>
      <div class="tab-pane active" id="profile">
            <form action="#">
                <div class="row">
                    <h3>Уже есть логин?</h3>
                    <p>Авторизируйтесь, пожалуйста.</p>
                </div>
                <div class="row">
                    <label for="user_login">Введите Ваш логин</label>
                    <input id="user_login" name="login" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    <label for="user_password">Введите Ваш пароль</label>
                    <input id="user_password" name="password" value="" />
                    <span class="required">*</span>
                </div>
                <div class="row">
                    Поля, помеченные <span class="required">*</span>, обязательны для заполнения.
                </div>
                <div class="row">
               <input type="checkbox" id="remember-me" /><label for="remember-me">Запомнить меня?</label>
               </div>
                <div class="row">
                    <input type="submit" id="login_button" class="login_button" value="Войти" />
                </div>
            </form>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
  </div>
</div>

   Как видите, вполне полноценная форма. Добавим к ней немного css:

#myModal{
     display: none;
  }
  #myModal .tab-pane .row {
     margin: 3px 0;
     width: 100%;
     float: none;
     padding: 0;
     float: none;
     clear: both;
     display: block;
  }
  #myModal .tab-pane .row label {
     display: block;
     float: left;
     cursor: pointer;
     width: 200px;
  }

   И все! Ни строчки javascript. Наше всплывающее окно, содержащее формы авторизации/регистрации работает. Можете опробовать пример, достаточно щелкнуть по кнопке из примера в начале статьи.

   Во второй и третьей части статьи мы разберем подробно, как работать с jQuery плагинами modal, tab из twitter bootstrap.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

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


Яндекс.Метрика