Открывающаяся форма на jQuery

В этом уроке бы будем создавать, и кодировать Логин форму. Наша форма будет не простой, мы сделаем ее открывающейся. Это очень удобно! Форма не будет занимать много места на сайте и при необходимости ее можно будет открыть.

Первое что нам необходимо сделать – это создать макет панели в Photoshop. Вы можете использовать любую заготовку или создать макет сами. У меня получился вот такой макет.

Если Вам понравился этот макет, то Вы можете его скачать здесь. Далее создайте новую папку, в которой будет находиться наш макет. Папка, которую я создал, содержит: папки images и js, файлы index.html и style.css. В папке images будут находиться все наши изображения, а в папке js – все необходимые нам JavaScript. Откройте текстовый редактор, создайте новый файл и сохраните его папку js с именем panelslide.js. Скачайте последнюю версию jQuery и поместите ее тоже в папку js.

После того как Вы создали все папки и файлы, необходимо присоединить их к HTML файлу. Откройте файл index.html и между тегами HEAD вставьте следующий код:

<!—CSS  файл -->
<link  href="styles.css" rel="stylesheet"  type="text/css" />
<!--JS файл-->
<script  src="js/jquery-1.4.2.js"  type="text/javascript"></script>
<script  src="js/panelslide.js" type="text/javascript"></scrip>

Теперь давайте приступим к созданию основного кода. Кодирование мы начнем с верхней части нашего будущего сайта. Создайте контейнер DIV с идентификатором container, внутри контейнера DIV, добавьте еще один контейнер DIV с идентификатором header.

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

Внутри контейнера DIV с идентификатором header, необходимо создать контейнер DIV с идентификатором slide-panel. Этот контейнер будет содержать нашу форму.

<div  id="container">
	<div  id="header">
		<div  id="slide-panel"> 
			ЗДЕСЬ БУДЕТ НАХОДИТСЯ ФОРМА
		</div>
	</div>
</div>

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

Нам также понадобится изображение всей верхней кнопки, без текста.

На данном этапе в нашей папке images должно быть 3 изображения.

Откроем файл style.css и вставим следующие стили:

* {
	margin: 0px;
	padding: 0px;
}
body {
	background-image:  url(images/bg.png);
	background-repeat:  repeat-x;
	background-color:  #E6E6E6;
	margin: 0  auto;
	padding: 0;
	font-family:  Arial, Helvetica, sans-serif;
	font-size:  75%;
	line-height:  100%;
	}
#container  {
	margin:  auto;
	width:  900px;
}
#header {
	float:  left;
	height:  165px;
	width:  900px;
	background-image:  url(images/header.png);
	background-repeat:  no-repeat;
}

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

Перед тем как добавлять стили для Slide панели, нам необходимо дописать код. После контейнера DIV с идентификатором slide-panel создадим абзац (P) с классом slide. Внутри абзаца, поместим ссылку (A) с классом btn-slide.

<div  id="container"> 
	<div  id="header"> 
		<div  id="slide-panel"> 
			ЗДЕСЬ БУДЕТ НАХОДИТСЯ ФОРМА
		</div>
		<p  class="slide"><a href="#"  class="btn-slide">Логин</a></p>
	</div> 
</div>

Теперь мы можем добавить стили для нашей Slide панели.

#slide-panel {
	height: 200px; 
	width: 350px; 
	display: none; 
	border-right-width: 2px; 
	border-left-width: 2px; 
	border-right-style: solid; 
	border-left-style: solid; 
	border-right-color: #626262; 
	border-left-color: #626262; 
	background-color: #949494; 
	border-bottom-width: 2px; 
	border-bottom-style: solid; 
	border-bottom-color: #626262; 
	opacity: 0.8; 
	margin: auto; 
}
.slide {
	margin: 0; /*Убираем внешние отступы*/
	padding: 0; /*Убираем внутрение отступы*/
	background-image:  url(images/slide_button.png); 
	background-repeat:  no-repeat; 
	background-position:  center top; 
}
.btn-slide  {
	text-align:  center; 
	width:  191px; 
	height:  26px; 
	display:  block; 
	color:  #fff; 
	text-decoration:  none; 
	font-family:  Arial, Helvetica, sans-serif; 
	font-weight:  bold; 
	font-size:  1em; 
	margin-right:  auto; 
	 margin-left:  auto; 
	line-height:  22px; 
}

После того как мы создали все стили, написали весь код, можно приступить к написанию JavaScript сценария. Приступим! Откройте файл с именем panelslide.js и вставьте в него следующий код:

$(document).ready(function() {
	$(".btn-slide").click(function(){
		$("#slide-panel").slideToggle("slow");
	});
});

Теперь наша Slide панель должна работать. Хотя есть некоторые маленькие нюансы. Браузер Internet Explorer не очень хорошо воспринимает изображения в формате PNG. Но это можно обойти. Нам необходимо создать стили для Internet Explorer. Создайте новый текстовый документ и сохраните его с именем ie.css. Откройте файл ie.css и вставьте следующий код:

#slide-panel  {
	filter: alpha(opacity=80);
}

Теперь нам необходимо связать файл ie.css с HTML файлом. Для этого между тегами HEAD нам необходимо добавить следующий код:

<!--[if  IE 7]>
	<link  rel="stylesheet" type="text/css" href="ie.css"  />
<![endif]-->

Еще нам понадобится создать другой стиля для Internet Explorer 8. Вы можете создать еще стиль и для Internet Explorer 8 или можно сказать браузеру Internet Explorer 8, чтобы он использовал для эмуляции браузер Internet Explorer 7.

<meta  http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Вот и все! Надеюсь, что Вам понравился урок.