jQuery авторизация из выпадающей формы

Опубликовано: 7 Июль 2011Автор ratemir

Многие вебмастера пытаются упростить дизайн сайтов, скрывая формы, текстовые надписи и т.д. при помощи jQuery. На демо странице, в верхней правой её части, Вы можете увидеть ссылку «Вход» кликнув на которую, выпадет форма авторизации. В данной статье будет показано, как создать такую выпадающую форму. На самом деле это не очень сложно, зато поможет Вам сэкономить пространство Вашей веб-страницы, а посетители смогут почувствовать себя более комфортно. Давайте рассмотрим шаг за шагом как работает такая форма:

ДемоСкачать

HTML код

Сначала начнем с HTML-кода. HTML очень прост и содержит кнопку в виде тега <a>, при нажатии на неё отображается на экране форма, находящаяся внутри тега <fieldset>.

Скопируйте и вставьте следующий код в нужное Вам место на странице Вашего сайта:

<div id="container">
  <div id="topnav" class="topnav"> Уже регистрировались? <a href="#" class="signin"><span>Вход</span></a> </div>
  <fieldset id="signin_menu">
    <form method="post" id="signin" action="#">
      <label for="username">Логин или E-mail</label>
      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
      </p>
      <p>
        <label for="password">Пароль</label>
        <input id="password" name="password" value="" title="password" tabindex="5" type="password">
      </p>
      <p class="remember">
        <input id="signin_submit" value="Войти" tabindex="6" type="submit">
        <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
        <label for="remember">Запомнить меня</label>
      </p>
      <p class="forgot"> <a href="#" id="resend_password_link" title="Если Вы забыли свой пароль, он будет восстановлен и выслан Вам на Е-mail">Забыли пароль?</a> </p>
    </form>
  </fieldset>
</div>

Стили CSS

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

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}
 
#content {
    width:520px;
    min-height:500px;
}
a:link, a:visited {
    color:#27b;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a img {
    border-width:0;
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin:hover {
    background:#59B;
    *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
    *background-position:0 3px!important;
}
 
a.signin {
    position:relative;
    margin-left:3px;
}
a.signin span {
    background-image:url("images/toggle_down_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}
#topnav a.menu-open {
    background:#ddeef6!important;
    color:#666!important;
    outline:none;
}
#small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
}
a.signin.menu-open span {
    background-image:url("images/toggle_up_dark.png");
    color:#789;
}

Выше приведённый код определяет стили кнопки, а указанные далее css параметры придадут элегантный вид самой форме авторизации, куда вводятся непосредственно логин и пароль.

#signin_menu {
   -webkit-border-radius: 5px 0 5px 5px;
   -moz-border-radius: 5px 0 5px 5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px; 
    right: 0px; 
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
}
 
#signin_menu input[type=text], #signin_menu input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #ACE;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#signin_menu p {
    margin:0;
}
#signin_menu a {
    color:#6AC;
}
#signin_menu label {
    font-weight:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
}
#signin_menu p a {
    color:#27B!important;
}
#signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
    border:1px solid #39D;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}

Пришло время поработать с Javascript

Как ни странно, но HTML и CSS коды, кажутся более сложными перед простотой Javascript. Просто скопируйте и вставте код Javascript указанный ниже, чтобы показать/скрыть форму, когда пользователи нажимают на кнопку «Вход», даже щелкнув за пределами кнопки при открытой форме, она закроется.

<script src="javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
 
            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle();
                $(".signin").toggleClass("menu-open");
            });
 
            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });            
 
        });
</script>

Как видно из кода выше, когда пользователь нажимает на кнопку «Вход», то будут задействованы новые функции. Сначала, мы увидим на экране выпадающую форму авторизации(то чта под тегом <fieldset>), затем к ссылке с классом «.signin» добавим дополнительный класс «menu-open», для визуального эффекта.

Другое событие проявит себя в этом коде, в случае если, посетитель кликнет за пределами открытой формы(то есть она скроется). Так же удаляется класс «menu-open», и ссылке «Вход» возвращается исходное фоновое изображение.

Несколько слов о подсказке.

Вы наверное, заметили в демо(ссылка) примере, при наведении на ссылку «Забыли пароль?» , всплывает подсказка с инструкциями. О том как её убрать, изменить, оставить или использовать в другом месте, можете почитать в ниже приведённых строках.

Здесь был применён небольшой плагин JQuery, называемый «Tipsy». Содержание подсказки находится внутри атрибута «title» тега <a> . Вы можете изменить позицию подсказки меняя значения “gravity” в коде ниже, на s (юг), n (север), e (восток), w (запад).

<script src="javascripts/jquery.tipsy.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(function() {
	  $('#resend_password_link').tipsy({gravity: 'w'});   
    });
  </script>

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

Метки: jQuery Рубрика: Технологии jQuery

Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

3 комментариев к “jQuery авторизация из выпадающей формы”

stacy

1 Декабрь, 2011, 18:50

А че в Осле ничего не робит?((((
Все каряво отображается...
Павел Уханов

4 Декабрь, 2011, 14:48

Приветствую!
А куда нужно просто скопировать указанный ниже Ява скрипт?
Спасибо!
Павел Уханов

4 Декабрь, 2011, 14:48

Вернее куда его вставить нужно?