В этом туториале я рассмотрю пример создания приложения FAQ (часто задаваемые вопросы), в котором вопросы и ответы будут располагаться в двух расположенных рядом контейнерах с полосами прокрутки. Вместо стандартных полос прокрутки я создам собственный дизайн, а прокручивание сделаю плавным, плюс добавлю меню-аккордеон со списком вопросов.
Окончательный результат будет работать следующим образом: смотреть.
Для создания полос прокрутки я буду применять плагин jScrollPane, который в свою очередь требует jquery.dimensions.js, а также jquery.mousewheel.js чтобы можно было прокручивать список при помощи колесика мышки.
Для начала скачайте дистрибутив jScrollPane и распакуйте его в папку с вашим приложением. Затем создайте HTML документ в который подключите библиотеку jQuery и затем три вышеперечисленных скрипта, которые входят в состав дистрибутива jScrollPane:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.dimensions.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/jScrollPane.js"></script>
Далее подключаем необходимые CSS файлы - jScrollPane.css, который содержит стили полос прокрутки, и style.css - файл в котором я буду указывать все остальные стили на странице:
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
Теперь можно собственно приступать к созданию нашего ЧаВО. Чтобы обеспечить принцип “ненавязчивости” для скрипта (пользователь должен иметь возможность пользоваться ЧаВО даже если JavaScript не включен), заголовки ответов, которые будут находиться в правой части, заключим в ссылки типа <a name=”h_b_1″>ответ</a> переход к которым будем осуществлять ссылками вида <a href=”#h_b_1″>Q: вопрос .. ?</a>.
Общая структура выглядит следующим образом:
<div id="container"> <div id="title">Часто задаваемые вопросы (ЧаВо)</div> <div id="left_pane"> <div class="scrollable"> <h6 class="opened">Общая информация (заголовок раздела)</h6> <ul> <li><a href="#a_i_1">Q: Какой то вопрос?</a></li> .... </ul> .... </div> </div> <div id="right_pane"> <div class="scrollable"> <h4>Общая информация</h4> <p class="question"><a name="a_i_1">Q: Какой то вопрос?</a><br/> A: Некоторый ответ.</p> .... </div> </div> <br style="clear:both" /> </div>
Див с id=container размещаем посреди страницы, указывая для него width и margin, а левый и правый контейнеры для вопросов и ответов располагаем при помощи float. Div с классом scrollable используется как контейнер с прокруткой, для него ставим overflow:auto. В общем содержимое файла style.css будет следующим:
body {
font-size: 12px;
font-family: Georgia, Arial, Verdana, sans-serif;
}
h6 {
font-size: 12px;
font-weight: bold;
margin: 4px 0;
cursor: pointer;
}
#container {
width:780px;
margin: 20px auto;
background: #fff;
border: 1px solid #aaa;
}
#title {
padding: 6px 0;
text-align: center;
font-size: 20px;
}
#left_pane,
#right_pane {
border: 1px solid #aaa;
}
.scrollable {
width: 370px;
height: 350px;
overflow: auto;
}
.scrollable ul {
position: relative;
}
#left_pane {
float: left;
margin: 10px 0 10px 10px;
}
#right_pane {
float: right;
margin: 10px 10px 10px 0;
}
.question a {font-style:italic}
На этом этапе приложение выглядит следующим образом: смотреть.
Теперь наведем немного красоты - создадим меню аккордеон:
$(document).ready(function(){
$('#left_pane h6').each(function(i){
if(i!=0){
$(this).next().hide();
$(this).attr('class','closed');
}
$(this).click(function(){
if ($(this).hasClass('opened'))
return;
// закрываем все подменю
$('#left_pane h6.opened').each(function(){
$(this).attr('class','closed');
$(this).next().slideUp();
});
// открываем меню, на котором щелкнул пользователь
$(this).attr('class','opened');
$(this).next().slideDown('slow');
});
});
});
В самом начале мы закрываем все подменю при помощи функции slideUp(), оставляя открытым только первое (используем аргумент i в функции each для получения индекса). Подменю будет открываться/закрываться при нажатии на заголовке (тег h6) при помощи функций slideUp() и slideDown(), при этом открытому меню будет присваиваться класс opened, а закрытому - closed.
Следующий шаг - создание полос прокрутки. Для этого добавляем вызов функции jScrollPane():
$('.scrollable').jScrollPane({animateTo:true, showArrows:true, scrollbarWidth:11});
Здесь параметр animateTo указывает на то что нужно использовать анимацию при последующих вызовах scrollTo(), showArrows - для отображения стрелок вверху и внизу полосы прокрутки, scrollbarWidth устанавливает ширину полосы прокрутки.
И последнее, плавное прокручивание к нужному месту обеспечиваем при помощи следующей функции:
$('#left_pane li a').click(function(event){
var target = $('#right_pane a[name='+$(this).attr('href').replace('#','')+']');
var cont = $('#right_pane .scrollable');
var p = target.parent();
var h = parseInt(p[0].offsetTop);
cont[0].scrollTo(h);
event.preventDefault();
});
Указатель на тег с ответом мы получаем из атрибута href ссылки, затем определяем координату этого элемента по вертикали при помощи offsetTop() и затем плавное прокручивание функцией scrollTo().
Окончательный код выглядит следующим образом:
$(document).ready(function(){
$('#left_pane h6').each(function(i){
if(i!=0){
$(this).next().hide();
$(this).attr('class','closed');
}
$(this).click(function(){
if ($(this).hasClass('opened'))
return;
$('#left_pane h6.opened').each(function(){
$(this).attr('class','closed');
$(this).next().slideUp();
});
$(this).attr('class','opened');
$(this).next().slideDown('slow');
$('#left_pane .scrollable').jScrollPane({animateTo:true, showArrows:true, scrollbarWidth:11});
});
});
$('.scrollable').jScrollPane({animateTo:true, showArrows:true, scrollbarWidth:11});
$('#left_pane li a').click(function(event){
var target = $('#right_pane a[name='+$(this).attr('href').replace('#','')+']');
var cont = $('#right_pane .scrollable');
var p = target.parent();
var h = parseInt(p[0].offsetTop);
cont[0].scrollTo(h);
event.preventDefault();
});
});
Обратите внимание, что вызов функции jScrollPane() добавлен дополнительно в функцию, реализующую меню. Это сделано для того, чтобы полоса прокрутки появлялась только в том случае, если открывшееся меню будет больше видимой части контейнера.
И последнее - подкорректируем дизайн полосы прокрутки, редактируя файл jScrollPane.css. На следующей картинке указано, какие стили в нем нужно редактировать:
Всё, приложение готово.
P.S.: текст FAQ в демо примере взят на одном из сайтов, которые я недавно разрабатывал, ибо “Lorem Ipsum” уже несколько поднадоел.