Здравствуйте, сегодня поговорим о том, как прикрепить к любому блоку на вашем сайте полосу прокрутки с помощью jQuery плагина – jQuery slimScroll scrollbar.

Скачать исходники для статьи можно ниже

Данный плагин возьмем с Репозитория jQuery плагинов –  “plugins.jquery.com”.

Отмечу, что если вы решили создать собственный wordpress плагин – данный репозиторий – как раз то, что вам нужно! А о том как создать плагин на wordpress – читайте в моей предыдущей статье – Создаем простой плагин на wordpress…

Сведения о плагине jQuery slimScroll scrollbar на основе репозитария:

Дата последнего релиза:  18.08.2013

Количество просмотров: 486

Автор: Piotr Rochala

Необходимый jquery >= 1.7

Демо-пример можно посмотреть на странице плагина – “rocha.la/jQuery-slimScroll” или скачать zip архив плагина на данной же странице – в нем будет папка examples, в ней откройте файл index.html – здесь вы найдете более 20 примеров использования данного плагина.

Как установить jquery плагин на сайт wordpress?

1. Заходим на сайт “rocha.la/jQuery-slimScroll” и жмем на ссылку “slimScroll download”:

У вас загрузится zip архив, распаковываем его – из получившейся папочки нам понадобиться только один файл – jquery.slimscroll.min.js

2. Перекидываем jquery.slimscroll.min.js на сервер сайта, для этого можно воспользоваться ftp загрузчиком (можно бросить в корневую папку сайта) или же просто добавить его как медиафайл через панель управления wordpress.

Воспользуюсь вторым способом – открываем панель управления wordpress, в левом меню выбираем пункт “Медиафайлы” и его подпункт “Добавить новый”, выбираем файл jquery.slimscroll.min.js на своем компьютере и загружаем его – далее запоминаем url до него:

3. Теперь необходимо подключить файл javascript (jquery.slimscroll.min.js) и включить вызов jquery 1.9.0. (необходим для работы jquery.slimscroll.min.js) к нашему сайту.

Для этого в файле header.php можно вставить до тега </head> следующие строчки кода:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://mnogoblog.ru/wp-content/uploads/2013/09/jquery.slimscroll.min_.js"></script>

Однако вышеуказанный способ  в wordpress является конфликтным…, поэтому лучше воспользоваться следующим способом подключения скриптов  – для этого открываем файл functions.php (в левом меню панели управления wordpress выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл functions.php), переходив в конец кода данного файла и вставляем следующие строчки:

function add_my_scripts() {
	if(!is_admin()) {
		wp_enqueue_script('jquery');
		wp_register_script('plugin', 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', array('jquery'), '1.9.0', false);
		wp_enqueue_script('plugin');
		wp_register_script('script', 'https://mnogoblog.ru/wp-content/uploads/2013/09/jquery.slimscroll.min_.js', array('jquery'), '1.3.0', false);
		wp_enqueue_script('script');
	}
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

То есть мы зарегистрировали скрипт jquery.slimscroll.min_.js и привязали его к jquery 1.9.0.

4.  Теперь выбираем нужный фрагмент текста или кода, к которому нужно привязать полосу прокрутки, и оборачиваем его в следующие div блоки:

<div class="some-content-related-div">
<div id="inner-content-div">
Текст или код для прокрутки
</div>
</div>

Если хотите вставить блок с полосой прокрутки в записи или странички, то выберите “Текстовой редактор” – закладка “Текст” (не “Визуальный редактор”) и вставьте вышеуказанный код.

Если будете вставлять в виджет, то выберите виджет с названием “Текст”.

5. У данного jQuery плагина есть множество настроек – о них вы можете узнать, если откроете папку examples в закаченном в 1 пункте zip архива.

То есть распаковываем скаченный zip архив, переходим в папку examples, в ней находим файл index.html и открываем его:

Слева вы увидите менюшку с подразделами примеров, а справа их демонстрацию с кодом.

То есть под каждым примером вы найдете код, который нужно добавить в файл slimscroll.min.js, который мы перекинули на сайт в пункте 2, то есть его придется подредактировать.

Например, чтобы получился вот такой блок:

Нужно добавить в файл slimscroll.min.js следующий код в самый низ:

$(function(){
$('#inner-content-div').slimScroll({
color: '#00f',
size: '10px',
height: '180px',
	width: '250px',
alwaysVisible: true
});
});

В файле  “mnogoblog.ru/wp-content/uploads/2013/09/jquery.slimscroll.min_.js”, который используется в данном примере, вышеуказанный код оформления блока уже включен.

На этом все!

В следующей статье постараюсь разобраться в создании полосы прокрутки для блоков с помощью CSS.