В этом туториале я рассмотрю пример создания приложения 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” уже несколько поднадоел.

смотреть демозагрузить пример

Запись добавлена 12 мая 2008 в категории jQuery, Уроки.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.