Интерактивные страницы сайтов нравятся пользователям, выводят веб сайт на новый уровень, но кроме этого они еще и способны делать веб страницы удобнее. В этом уроке я покажу Вам как нам может быть полезен на веб сайтах интерактивный раскрывающийся контент.
Например, если на нашем веб сайте представлен некоторый каталог, который предполагает наличие фотографий и какую-либо информацию, описывающую каждую из них, то для пользователя гораздо удобнее будет просматривать эту информацию на той же странице, чем все время переходить на новую, а потом опять возвращаться, чтобы посмотреть другие экземпляры из веб каталога. Но уместить все на одной веб странице очень проблематично: тогда веб страница получится очень длинной и, думаю, не очень удобной. Именно в подобных ситуациях нам поможет интерактивный веб контент на сайте, который будет появляться в то время, когда пользователю это будет нужно и исчезать, опять же, когда пользователь веб страницы этого захочет. В этом и заключается смысл интерактивности веб сайтов – пользователь производит действия, а интерактивный сайт выполняет его пожелания.
Это может быть актуально для каталога товаров, каких-то фото с описанием и даже просто когда одна веб страница предполагает разместить в себе много контента (чтобы не делать ее чересчур длинной), для скрытых заметок, которые могут появляться и исчезать. Я думаю, Вы найдете еще очень много случаев для применения такой веб интерактивности. А самое главное сделать это достаточно несложно.
Давайте перейдем от слов к делу и начнем!
Интерактивный веб сайт: раскрывающийся контент.
1. Итак, мы будем создавать веб страницу для фирмы, которая занимается красивой упаковкой подарков. На нашей интерактивной веб странице будет каталог с фотографиями, нажимая на которые посетитель может увидеть интерактивный контент с информацией о данной упаковке. Нажав повторно, интерактивная веб вкладка будет закрываться. Так без перехода на новую веб страницу сайта пользователь может комфортно просматривать все варианты. Кроме того, у открытой картинки будет изменяться стиль и она будет выглядеть немного иначе. И все это мы сделаем всего лишь с помощью нескольких сточек кода jQuery.
Начнем мы с несложного дизайна самой веб страницы. Создадим html и css файлы и назовем их index.html и style.css. Я не буду создавать замысловатый дизайн, так как в цель этого урока немного другая: показать Вам как сделать веб страницу с интерактивным контентом.
Мы создадим простую страницу с шапкой, верхней навигацией и секцией контента, где и буду наши интерактивные картинки. Для этого в index.html пропишем следующий код:
<!doctype html> <html> <head> <meta charset="windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Untitled Document</title> </head> <body> <header> <h1>PRESENTS whith LOVE...</h1> </header> <nav> <ul> <li><p class="nav"><a href="#">Home</a></p></li> <li><p class="nav"><a href="#">Presents</a></p></li> <li><p class="nav"><a href="#">Contacts</a></p></li> </ul> </nav> <section> <div id="content"> <img class="presents" src="img/1.jpg"><div class="description"><p>Подарок "День и ночь"<br/> Великолепный подарок в черной бумаге с белой розой.<br/> Классика и элегантность</p></div> <img class="presents" src="img/2.jpg"><div class="description"><p>Подарок "Нежность"<br/> Светлые тона и нежные весенние цветы передадут все Ваши нежные чувства!</p></div> <img class="presents" src="img/3.jpg"><div class="description"><p>Подарок "День и ночь"<br/> Великолепный подарок в черной бумаге с белой розой.<br/> Классика и элегантность</p></div> <img class="presents" src="img/4.jpg"><div class="description"><p>Подарок "Нежность"<br/> Светлые тона и нежные весенние цветы передадут все Ваши нежные чувства!</p></div> <img class="presents" src="img/5.jpg"><div class="description"><p>Подарок "День и ночь"<br/> Великолепный подарок в черной бумаге с белой розой.<br/> Классика и элегантность</p></div> <img class="presents" src="img/6.jpg"><div class="description"><p>Подарок "Нежность"<br/> Светлые тона и нежные весенние цветы передадут все Ваши нежные чувства!</p></div> <img class="presents" src="img/7.jpg"><div class="description"><p>Подарок "День и ночь"<br/> Великолепный подарок в черной бумаге с белой розой.<br/> Классика и элегантность</p></div> <img class="presents" src="img/8.jpg"><div class="description"><p>Подарок "Нежность"<br/> Светлые тона и нежные весенние цветы передадут все Ваши нежные чувства!</p></div> </div> </section> <footer> </footer> </body> </html>
Здесь все предельно просто. Тег шапки веб сайта, тег верхней навигации, тег section с интерактивным контентом и тег футера. В теге с контентом расположено восемь картинок, у каждой из них свое изображение (их Вы можете найти в дополнительных материалах). После каждого тега картинки расположен тег div, в котором написано соответствующее описание для каждой интерактивной картинки (у меня описания двух типов, но у Вас они все конечно же будут разные). У всех этих тегов div один и тот же класс class=”description. Также мы уже подключили к странице наш файл со стилями, но стилей у нас еще пока нет, поэтому страница на данном этапе выглядит вот так:
2. Теперь быстренько придадим странице стилей. В стилях я использую некоторые CSS3 приемы для создания тени от текста, для свечения наших блоков с картинками, для мультибэкграунда в шапке и для регулировки непрозрачности у некоторых элементов нашей веб страницы. Если Вам захочется поподробнее познакомиться со свойствами и приемами CSS3, то Вы можете скачать мой бесплатный видео курс, в котором я рассказываю и показываю основы работы CSS3 для создания веб страниц.
А пока в файле style.css прописываем следующие стили для элементов нашей веб страницы:
html{background-color:#0F0F0F;}
body{background:#202020; width:900px; margin:0 auto; border:1px dashed #CCCCCC;}
header{height:130px;
background:url(img/line.jpg) bottom repeat-x, url(img/bg-img.png) left top no-repeat;}
h1{font-size:30px; font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; color:#FBFDA8;
text-align:center; padding-top:50px; text-shadow:#FFF 2px 2px 2px;}
nav{height:40px; background:rgba(255,255,255,0.4);}
nav ul{ margin:0; padding-left:250px;}
nav ul li{display:inline; float:left; margin-left:50px;}
nav ul li p{font-size:22px;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
margin-top:5px;}
nav ul li a{text-decoration:none; color:#FBFDA8; text-shadow:#000 2px 2px 2px;}
section{background:url(img/line.jpg) top repeat-x, url(img/line.jpg) bottom repeat-x;}
#content{padding:20px;}
.presents{margin-left:60px;
margin-top:20px;
border:6px outset #FBFDA8;
box-shadow:#FBFDA8 3px 3px 5px;}
.description{ width:60%; height:100px;
display:none;
border:3px outset #EF6D4E; margin-left:155px; margin-top:30px;
background:rgba(255,255,255,0.5);}
.description p{font-family: Georgia, "Times New Roman", Times, serif;
font-size:16px;
font-style:italic;
color:#333;}
Здесь следует обратить внимание на то, что мы прячем блоки с описанием картинок, присваивая всем дивам с классом description display:none. Именно этот стиль будет в последующем менять наш JQuery код, открывая и вновь скрывая интерактивный раскрывающийся контент.
После применения этих стилей наша веб страница будет выглядеть следующим образом:
3. Настало время заняться интерактивностью нашей веб страницы. Для начала нам нужно скачать и подключить библиотеку JQuery к веб странице. Вы можете скачать ее с сайта jquery.com или найти ее в файлах дополнительных материалов к этому уроку. Я создаю отдельную папку scripts для всех скриптов. Также создайте такую папку, поместите туда скачанный файл библиотеки jquery и подключите ее в нашем документе index.html между тегами head.
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
4. Теперь создадим новый файл java script и сохраним его также в папке для скриптов с именем myscript.js. Подключим и его к index.html документу. Я делаю это перед закрывающим тегом body.
Почему в конце? Потому что так наша страница будет загружаться быстрее, чем если бы мы подключали этот файл в начале.
<script type="text/javascript" src="scripts/myscript.js"></script>
5. Перейдем в только что созданный файл и начнем создавать интерактивность для нашей веб страницы.
Здесь будет всего несколько строк, которые заставят наш интерактивный контент раскрываться и закрываться, а активный элемент менять свой стиль.
$(document).ready(function() {
$(".presents").click(function(){
$(this).next('div').slideToggle("slow");
$(this).toggleClass('activ');
});
});
6. Когда наша страница готова, запускается функция. В функции находится слушатель событий, который реагирует на клик мышью по элементу класса «presents» (этот класс присвоен всем нашим картинкам).
Когда происходит щелчок, запускается функция, которая находит следующий див, стоящий после картинки (это див с описанием данной картинки) и «вешает» на нее переключатель slideToggle. Этот переключатель работает по принципу «открывать содержимое при первом щелчке мышью и закрывать при повторном».
Следующая строчка «вешает» на картинку toggleClass, который будет присваивать класс ‘activ’ картинке при первом щелчке на нее и удалять при повторном.
Вот и все, осталось только прописать класс ‘activ’ в документе со стилями. Давайте сделаем это: перейдем в style.scc и пропишем следующую строчку:
.activ{border:6px outset #C00; box-shadow:#EF6D4E 3px 3px 5px;}
Можно посмотреть работу скрипта в браузере, перезагрузив страницу.
Мы можем раскрывать и закрывать описания для любых картинок, веб страница меняется «на лету», никакой перезагрузки, компактный аккуратный вид плюс активные картинки выделяются по средствам изменения стилей… и все это мы сделали прописав лишь 6 строчек кода JQuery!!! По-моему, возможности библиотеки JQuery действительно впечатляют. А как Вы думаете?
Жду Ваших комментариев, пожеланий и предложений.
Чтобы получать новые уроки о том как еще можно использовать JQuery (и не только), подписывайтесь на обновление блога. Я обещаю Вам ТОЛЬКО интересные и полезные уроки!
Спасибо за внимание и удачи!
