JScrollPane 2 — настраиваемый скроллбар

Вторая версия плагина jScrollPane, несомненно, заслуживает отдельной статьи. Вместе с тем мы не стали модернизировать первоначальную статью JScrollPane. Делаем красивый скроллинг, посвященную первой версии плагина, так как в некоторых ситуациях нужен будет именно первый вариант. Подробнее об этом будет ниже, а сейчас — встречайте! Герой дня JScrollPane 2!

Традиционный демо-пример.

Проверено в:

• IE 6-8
• Firefox 4
• Opera 11
• Safari
• Chrome

На официальной странице плагина можно посмотреть много других примеров.

Что качать?

• (2.24 Kb) для поддержки скроллинга колесиком мыши.
• (45.88 Kb) собственно плагин или его (14.62 Kb).
• таблица стилей плагина.

Быстрый старт

Подключаем библиотеки и не забываем про CSS:

<link type="text/css" rel="stylesheet" href="css/jquery.jscrollpane.css"/>
<script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>

В HTML каким-либо способом выделяем контейнер для скролла (например, присваиваем класс):

<div class="scroll-pane">
		Хочу себе необычный скролл!
</div>

В CSS задаем оформление контейнера:

.scroll-pane {
	width: 400px; /* Ширина видимой области*/
	height: 275px; /* Высота видимой области*/
	overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */
}

Настраиваем стили из jquery.jscrollpane.css (подробнее об этом немного ниже).

Последний шаг — инициализируем скролл скриптом:

<script type="text/javascript">
	jQuery(function()
	{
		jQuery('.scroll-pane').jScrollPane();
	});
</script>

А теперь подробнее

Настройка стилей

jquery.jscrollpane.css содержит стили на все случаи жизни. Привожу только те правила, которые скорее всего нужно будет настраивать:

/* вертикальная полоса прокрутки */
.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;   /* можно прижать к правому или левому краю */
	width: 16px;   /* ширина полосы прокрутки */
	height: 100%;
	background: red;
}
/* горизонтальная полоса прокрутки */
.jspHorizontalBar
{
	position: absolute;
	bottom: 0;  /* можно прижать к нижнему или верхнему краю */
	left: 0;
	width: 100%;
	height: 16px;  /* высота слушит шириной полосы прокрутки */
	background: red;
}
/* полоска, по которой бегает ползунок */
.jspTrack
{
	background: #dde;  /* цвет полосы, или фоновый рисунок  */
	position: relative;
}
/* сам ползунок */
.jspDrag
{
	background: #bbd;  /* цвет ползунка, или фоновый рисунок  */
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}
/* стрелки для прокрутки */
.jspArrow
{
	background: #50506d;  /* фон стрелки */
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}
/* стили для неактивной стрелки */
.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}
/* этими правилами можно задать различные стили для вертикальных и горизонтальных стрелок */
.jspVerticalBar .jspArrow
{
	height: 16px;
}
.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}
/* стили для уголка - квадратной зоны где сходятся полосы прокрутки */
.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}
/* кроме того можно задать стили для каждой стрелки отдельно (этих правил изначально в jquery.jscrollpane.css нет!) */
.jspArrowUp {}
.jspArrowDown {}
.jspArrowLeft {}
.jspArrowRight {}

Настройки

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

jScrollPane API

Фактически, это функции, которые служат для управления скроллом.

Для работы с этими функциями нужно получить доступ к переменной jsp:

var element = jQuery('#my-element').jScrollPane();
var api = element.data('jsp');

После того, как это сделано, можно вызывать следующие функции:

Примеры

Инициализация с использованием стрелок для прокрутки:

jQuery('.scroll-pane').jScrollPane({showArrows: true});

Задаем минимальную и максимальную длину ползунка прокрутки:

jQuery('.scroll-pane').jScrollPane(
	{
		verticalDragMinHeight: 20,
		verticalDragMaxHeight: 20,
		horizontalDragMinWidth: 20,
		horizontalDragMaxWidth: 20
	}
)

Пример вызова API для программной перемотки скроллбара:

var pane = jQuery('.scroll-pane');
pane.jScrollPane(
	{
		showArrows: true
	}
);
var api = pane.data('jsp');
jQuery('#but-scroll').bind(
	'click',
	function()
	{
		api.scrollTo(100, 100);
		return false;
	}
);

Плюсы:

• адекватно работает во всех популярных браузерах;
• позволяет гибко настроить вид и поведение скролла;

Минусы:

• немного великоват (в несжатом виде 44Kb, в сжатом 14.6Kb);
• прокрутка колесиком мыши «не дружит» с горизонтальным скроллом.

Невооруженным глазом видно, что плагин стал гораздо мощнее, по сравнению с первой версией, хотя, конечно за это приходится расплачиваться — размер скрипта вырос вдвое.

Про резиновый ползунок

Update by ksu.

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

Новая версия плагина тоже позволяет это сделать, но решение немного замаскировано. Как и раньше, присутствуют специальные классы jspDragTop и jspDragBottom. Остается в CSS задать ширину, высоту фоны и позиционирование.

Материал

• jquery plugin :: jScrollPane