Зачастую на сайте требуется организовать раздел «Часто задаваемые вопросы» (FAQ). Как правило таких вопросов может быть какое-то число (иногда немалое), и, в итоге, страница либо становится очень длинной (ведь нужно еще и вместить ответы), либо ссылается на другие страницы. Оба варианта не очень-то удобны для пользователя. В этом уроке я покажу Вам как сделать удобный FAQ-раздел!
Суть организации FAQ-раздела, создание которого я Вам покажу, будет сводиться к тому, что пользователю не нужно будет переходить на другую страницу, щелкая по ссылке-вопросу. Все будет на одной странице: и вопросы и ответы. Однако, страница из-за этого не станет длинной и неудобной, так как ответы будут спрятаны до тех пор, пока пользователь не кликнет по интересующему его вопросу. В этот момент ему откроется блок с ответом на этот конкретный вопрос, а при повторном щелчке блок снова исчезнет.
Таким образом пользователь сможет видеть сразу все «Часто задаваемые вопросы», с легкостью и удобством выбирать нужный и при чтении ответа оставаться на той же самой странице. Он сможет открывать и закрывать ответы без перезагрузок, без ожидания загрузки контента на новой странице и прочих неудобных вещей. Таким образом Ваш FAQ-раздел будет гораздо эффективней и полезней.
И реализуем мы это при помощи библиотеки jQuery легко и просто. Давайте начнем!
Создаем удобный FAQ-раздел на сайте
1. Начнём мы как обычно с html-файла.
Я создам файл html и назову его «faq.html». Код в этом файле будет достаточно простой.
Между тегами «body» я создам тег «div» с классом «wrapper». Он в свою очередь будет содержать два других тега «div»: один с классом «header» (в нем просто будет располагаться логотип), а другой – с классом «content», в нем будет расположен еще один тег «div» с классом «main», в котором будут содержаться: заголовок; вопросы, также заключенные в теги заголовков; ответы, заключенные в теги «div» с классом «answer» и тег для футера.
Вот этот код:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="faq_style.css">
<title>FAQ in one page</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">WebSite-Create.ru</p>
</div>
<div class="content">
<div class="main">
<h1>FAQ - Часто Задаваемые Вопросы</h1>
<h2>Правда ли, что создавать сайты может каждый?</h2>
<div class="answer">
<p>Конечно, правда! Единственное, что для этого нужно: большое желание, немного терпения и настойчивости!</p>
</div>
<h2>Может ли язык JavaScript сделать веб-страницы особенными?</h2>
<div class="answer">
<p>Да, конечно, может! Из скучных статических страниц Ваши страницы превратятся в интерактивные и будут взаимодействовать с пользователем очень активно.</p>
</div>
<h2>Действительно ли так необходимо изучать JavaScript?</h2>
<div class="answer">
<p>Если Вам хочется, чтобы Ваш веб-сайт отличался удобством, интерактивностью и пользователи с удовольствием проводили на нем время, то JavaScript будет как нельзя кстати!</p>
</div>
<div class="footer">
<p>WebSite-Create.ru 2014.</p>
</div>
</div>
</body>
</html>
В коде я прописала 3 вопроса и 3 ответа. Думаю, для демонстрации этого будет достаточно, но на практике вопросов и ответов, конечно же, может быть гораздо больше.
Также Вы можете увидеть, что в документе уже подключен файл таблицы стилей. Нам нужно его создать и сохранить в тот же каталог, что и html-файл.
Итак, создайте css-файл и дайте ему имя «faq_style.css».
Пока что наш css-файл пуст, поэтому если мы посмотрим html-страницу в браузере, то увидим следующее.
2. Сейчас мы сделаем так, чтобы наша страница имела более симпатичный вид и пропишем некоторые стили в css-файл.
Я создам основные стили, которые зададут фоновый цвет, выровняют страницу по центру, а также зададут стили для заголовков и абзацев.
Вот код, который я пропишу в файл таблицы стилей.
html,body{background-color:#5C874E;}
body{width:720px; margin:0 auto;}
.logo{font-family:Verdana, Geneva, sans-serif; font-size:24px; color:#669; text-shadow:0px 0px 7px #FFFFFF;}
h1,h2,.answer p,.footer p{font-family:Verdana, Geneva, sans-serif;}
h1{font-size:24px; color:#FFC; border-bottom:1px dashed #FFFFCC; padding:10px; text-align:center;}
h2{font-size:20px; color:#fff; cursor:pointer;}
.footer{position:fixed; bottom:0px;}
.footer p{color:#036; font-size:18px;}
После этих преобразований наша страница будет иметь вот такой вид:
3. Основные приготовления закончены и пришло время заняться делом. Сейчас наши вопросы и ответы расположены друг под другом и если их будет больше, то страница может растянуться на много метров. Но скоро мы это исправим.
Для начала нужно подключить к html-файлу библиотеку jQuery. Файл библиотеки Вы можете найти в «Исходниках» к уроку или скачать с сайта jquery.com .
Вернитесь в html-файл и после подключения файла таблицы стилей подключите файл библиотеки jQuery.
<script src="jquery-1.6.3.min.js"></script>
4. Теперь создадим файл JavaScript, в котором будем писать наш код. Кода будет немного, однако, я предпочитаю создавать для кода JavaScript отдельный файл.
Итак, создаем файл. Я назову его «faq.js», помещу его в ту же папку, что и html-файл и подключу его к html-файлу сразу после подключения файла библиотеки jQuery.
<script src="faq.js"></script>
Теперь можно открыть файл «faq.js» и приступить к написанию кода.
5. Код будет достаточно несложным.
В первой строчке мы скажем, что код нужно выполнять, когда html-документ загрузится и будет готов.
Во второй строчке кода мы скрываем все элементы, содержащие ответы на часто задаваемые вопросы (эти элементы имеют класс «answer»).
В третьей строке мы применяем ко всем нашим заголовкам вопросов функцию «toggle», которая работает как переключатель: если мы щелкаем один раз по заголовку – выполняется одно действие, если щелкаем повторно – другое. Эти действия определяются функциями, которые являются принимаемыми параметрами для функции «toggle». Первая функция будет показывать ответы, раскрывая их в течении одной секунды; вторая скрывать ответы также в течении одной секунды.
Вот и весь код.
$(document).ready(function() {
$('.answer').hide();
$('.main h2').toggle(function(){
$(this).next('.answer').fadeIn(1000);
},
function(){
$(this).next('.answer').fadeOut(1000);
});
});
Теперь можно обновить страницу в браузере и увидеть, как это все работает. Вы увидите, что все ответы скрыты и можно видеть список всех часто задаваемых вопросов. Вам стоит только щелкнуть мышью по заголовку нужного вопроса и ниже появится ответ на него. Щелкните второй раз, и ответ снова исчезнет.
Все это без перехода на другие страницы, без перезагрузок и прочих неудобств. Найти нужный вопрос гораздо проще, потому что ответы скрыты и Вами не нужно долго скролить страницу вниз в поисках нужного вопроса.
Посмотреть пример работы этого примера Вы можете щелкнув по иконке «Демо» в начале урока.
Вот в общем то и все. На этом буду заканчивать данный урок. Надеюсь он был Вам полезен. Этот прием можно применять не только для раздела FAQ на сайте, но и для других задач. Я думаю, Вы найдете ему применение и под другие свои цели.
Жду Ваших комментариев! Делитесь уроком с друзьями при помощи кнопок социальных сетей ниже.
И также подписывайтесь на обновления блога.
Удачи Вам, Успехов и Отличного Настроения.
Оставайтесь на связи!
