Интерактивная выдвижная панель на сайт

/ 👁 5146

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

демо версия урока

В создании выдвижной интерактивной панели для сайта нам поможет одна из самых популярных библиотек Java Script – JQuery.

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

То, что библиотека JQuery настолько популярна – не случайно, ведь именно с ее помощью можно создавать «умные» интерактивные веб страницы, причем делать это совсем не сложно. И сейчас Вы в этом убедитесь.

Давайте начнем!

Создаем интерактивную выдвижную панель на сайт

интерактивная выдвижная панель с jQuery

1. Для начала давайте создадим html файл (я создаю HTML5 файл с именем – «inter.html») и файл таблицы стилей («style.css»). Сохраним эти файлы так, чтобы они находились в одном каталоге.

В том же каталоге создадим папку и дадим ей имя – «js». В эту папку нам нужно сохранить файл библиотеки JQuery. Файл называется «jquery-1.10.2.min.js» (возможно на момент прочтения этого урока выйдет более свежая версия библиотеки, можете смело воспользоваться ей).

Этот файл Вы можете найти в дополнительных материалах (в папке «js»), либо скачать с сайта http://jquery.com/ .

 

Чтобы скачать файл для подключения библиотеки с сайта нужно:

1. Нажать на кнопку «Download» в меню сайта.
2. На отрывшейся странице найти ссылку «Download the compressed, production jQuery 1.10.2» (последние цифры – это версия библиотеки, они могут отличаться).
3. Нажать на ссылку правой кнопкой мыши и выбрать «Сохранить объект как…», после чего нужно выбрать то место, куда Вы хотите сохранить файл.

2. Все необходимые файлы мы создали и сохранили в нужных местах. Теперь давайте поработаем над html файлом.

Я не буду создавать целую веб страницу со всем содержимым контентом, потому что моя задача – показать Вам как сделать выдвижную интерактивную панель.

Поэтому все, что я сделаю с html файлом – это: подключу к нему таблицу стилей, пропишу теги для выдвижной панели и создам заголовок и тег для контента страницы.

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

Сначала мне нужно создать div с идентификатором «wrapper», в котором будет содержаться весь контент веб страницы. Далее я создам div с идентификатором «header», в котором будет находится заголовок, помещенный на веб странице.

Для выдвижной панели мне также нужно создать div с идентификатором «login». Он в свою очередь будет содержать абзац с надписью и форму для авторизации.

После div с выдвижной панелью можно объявить div с контентом.

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

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<link rel="stylesheet" type="text/css" href="style.css"><!--подключаем таблицу стилей-->
<title>Интерактивная выдвижная панель</title>
</head>

<body>
<div id="wrapper"><!--див-контейнер для всего контента-->
<div id="header">
<p class="zagolovok">Интерактивная выдвижная панель</p>
</div><!--конец div id="header" -->

<div id="login"><!--див для выдвижной панели-->
<p id="open">Login</p>
<form>
<p><label for="username">Имя:</label>
	<input type="text" name="username" id="username"></p>
<p><label for="password">Пароль: </label>
	<input type="text" name="password" id="password"></p>
<p><input type="submit" name="button" id="button" value="Submit" ></p>
</form>
</div><!--конец div id="login"-->
<div id="content"><!--контент страницы-->
<h1>Щелкните по кнопке "Login" вверху страницы, чтобы пройти авторизацию!</h1>
</div><!--конец div id="content"-->
</div><!--конец div id="wrapper"-->
</body>
</html>

 

Если мы сейчас запустим нашу веб страницу в браузере, то увидим следующее:

веб страница без применения стилей

Как Вы можете видеть – не очень-то красиво. Поэтому давайте поработаем над стилями.

3. Итак, давайте откроем файл таблицы стилей «style.css», который в прошлом шаге мы уже подключили к нашему html файлу.

Давайте сначала дадим стилей всем основным элементам страницы кроме элементов выдвижной панели (им мы дадим стилей чуть позже).

Сейчас мы определим фоновый цвет, положение элементов на странице, размер и цвет для заголовков, также дадим тень нашим надписям при помощи свойства «text-shadow».

Вот первая часть кода для таблицы стилей:

body{background:#334873;}

#wrapper{width:70%;
margin:0 auto;
background:#334873;
position:relative;
top:-8px;}

#header{border-top:6px solid #fff;
margin:0;}

.zagolovok{font-family:Georgia, "Times New Roman", Times, serif;
font-size:32px;
color:#DCB410;
text-shadow:rgba(51,51,51,0.8) 3px 3px 3px;}

#content{width:50%;}
h1{ font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#FFF;
text-shadow:rgba(255,255,255,0.3) 3px 3px 3px;}

 

А вот то, что эти стили нам дадут, если мы сохраним изменения и обновим страницу в браузере:

применение основных стилей для страницы с выдвижной панелью

4. Уже немного лучше и теперь нам нужно спрятать нашу форму, поднять надпись «Login» наверх веб страницы и оформить все элементы выдвижной панели должным образом.

Во-первых, мы зададим div с идентификатором «login» ширину, позиционируем его абсолютно и расположим его в нужном месте при помощи свойств «left» и «top». Кроме того, нам нужно чтобы панель располагалась над основным контентом страницы и для этого мы будем использовать свойство «z-index».

Абзацу (тегу «p») с идентификатором «open» мы придадим настройки шрифта, фоновый цвет, цвет шрифта, а также отступы. Также поменяем цвет шрифта и фона при наведении курсора мыши на абзац.

Во-вторых, мы зададим стили для формы. Помимо настройки отступов и фонового цвета, здесь нужно обратить внимание на то, что свойство «display» мы установим на значение «none», что позволит нам скрыть форму.

Далее мы зададим некоторые стили для отображения полей формы и ее кнопки.

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

#login {width: 300px;
position: absolute;
left: 560px;
top: 6px;
z-index: 100;}

#open {font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight:600;
text-align:center;
margin: 0;
cursor: pointer;
background: rgb(255,255,255);
color: rgb(58,80,123);
padding: 5px 0 2px 0;}

#open:hover {color: rgb(0,0,0);
background-color: rgb(110,138,195);}

#login form {padding: 10px 10px 10px 10px;
display: none;	
background-color: rgb(255,255,255);}

#login label {display: inline-block;
width: 100px;
text-align:right;
margin: 0 15px 0 0;
color: rgb(58,80,123);}

#login input {font-size: 14px;}
#login #button{margin-left: 50px;}

 

оформление выдвижной панели на сайт

5. Как Вы можете видеть, форма спряталась и теперь мы видим только сам контент веб страницы и кнопку вверху, нажав на которую должна выдвигаться наша интерактивная панель. Но пока что эта кнопка не работает. Сейчас мы это исправим.

И первое, что нам для этого нужно сделать – это подключить к документу файл библиотеки JQuery. Этот файл мы уже скачали и поместили в папку «js», которая находится в том же каталоге, что и наш html файл.

Для того, чтобы подключить файл, добавьте следующий код перед закрывающим тегом «head» в файле «inter.html»:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

 

6. Теперь все готово к тому, чтобы написать Java Script код и оживить нашу панель.

Код будет совсем небольшой, поэтому я не буду выносить его в отдельный файл, а напишу его сразу после подключения библиотеки (хотя для реальных проектов советую создавать для кода отдельный файл с расширение «.js», который Вы будете потом подключать к html документу).

Итак, сразу после подключения библиотеки JQuery пишем открывающий и закрывающий теги «script», а между эти тегами прописываем специальную встроенную функцию библиотеки JQuery, которая ожидает пока html-код страницы полностью загрузится, прежде чем запускать выполнение скрипта.

Выглядеть это будет так:

<script>
$(document).ready(function() {
 //здесь будет располагаться весь наш код   
});

</script>

 

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

Сначала нам нужно выбрать тег абзаца с идентификатором «open».

Затем мы делаем так, чтобы этот тег реагировал на клик мыши (присваиваем событие «click»).

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

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

Если в двух словах: мы выбираем элемент, вешаем на него событие; в момент, когда происходит это событие – определенным образом реагирует другой элемент, который мы тоже выбираем внутри анонимной функции. Реакция элемента определяется примененным к нему методом.

Может показаться немного сложно и запутанно, однако, все вышеописанное – это всего-навсего 4 строчки кода (если для фигурных скобок оставлять отдельные строки).

Вот код, который мы должны написать между фигурными скобками:

 

$('#open').click(function()
{
$('#login form').slideToggle(500);	
});

 

Представляете, и это все! Теперь если сохранить изменения и перезагрузить страницу в браузере, то все прекрасно будет работать.

выдвижная интерактивная панель на сайт

Если вдруг у Вас что-то не получилось, то Вы можете скачать готовые файлы из исходников (иконка в самом начале поста) и проверить свой код.

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

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

И на самом деле я начинаю готовить один проект… это будет курс, в котором я хочу научить Вас если ни всем, то очень многим премудростям библиотеки JQuery. Думаю, выпустить этот проект в начале года, так что следите за рассылкой и подписывайтесь (если еще не подписаны), чтобы узнать обо всем первыми.

Надеюсь, что настроение у Вас предпраздничное! Совсем скоро новый год, который, я думаю, принесет много нового… хорошего нового. По крайней мере в это нужно верить.

Так что я желаю Вам отличного настроения, жду Ваших комментариев и до встречи в следующих уроках и статьях.

Tags:

Leave a Reply