Код HTML
Для начала нужно начать с кода HTML. HTML-код очень простенький - он содержит в себе тэг «a», который идет вместе с тэгом «fieldset», за счет которого отображается форма.
Просто скопируйте это в код новой страницы:
<div id="container">
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="https://twitter.com/sessions">
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" value="" title="password" tabindex="5" type="password">
</p>
<p class="remember">
<input id="signin_submit" value="Sign in" tabindex="6" type="submit">
<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
<label for="remember">Remember me</label>
</p>
<p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
<p class="forgot-username"> <A id=forgot_username_link
title="If you remember your password, try logging in with your email"
href="#">Forgot your username?</A> </p>
</form>
</fieldset>
</div>
Код CSS
Вам потребуется использование CSS для определения кнопки авторизации и формы логина. Представленный ниже код выполняют именно эту функцию.
Просто скопируйте этот код в Ваш файл css, или добавьте его в код HTML там, где у Вас определяется стиль. Эти коды определяют кнопку авторизации.
#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;
}
И дальше идет определение формы логина:
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius: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>Согласно коду, представленному выше, когда посетитель кликает по кнопке авторизации, запускается новая функция. Сначала отображается форма логина (заключенная в тэг «filedset»), затем ссылка, заключенная в класс «.signin», добавляет еще один класс «menu-open», за счет которого сменяется фоновое изображение.
Еще одно событие в этом коде заключается в том, что когда посетители кликают не по форме логина, а где-то на странице – то форма сама закрывается. Другими словами, класс «menu-open» снимается с ссылки с классом «.signin» и возвращает ей первоначальное фоновое изображение.
Что касается подсказок?
<script src="javascripts/jquery.tipsy.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
$('#forgot_username_link').tipsy({gravity: 'w'});
});
</script>Мы обычно советуем использовать плагин для jQuery – tipsy. Содержимое tooltip-а представляет собой то, что написано в атрибуте «title», относящемся к ссылке. Вы можете менять позицию tooltip-а относительно востока, запада, юга или севера. Это реализуется за счет параметра «gravity», указанного в коде выше. Мы предоставляем Вам ссылку на сайт, посвященный этому плагину, там Вы сможете более подробно изучить его возможности и скачать плагин. Перейти на сайт…
В заключение
Если Вы скопировали весь код с этой статьи, пожалуйста, не меняйте структуру папок. Если Вы измените ее, то код не будет работать. Данный код является лишь примером создания выпадающей формы авторизации с помощью jQuery. Удачи в практике!
Скачать архивом
