полоса прокрутки для блока

Добавляем к блоку полосу прокрутки: подключаем jQuery плагин

Здравствуйте, сегодня поговорим о том, как прикрепить к любому блоку на вашем сайте полосу прокрутки с помощью 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”:

загружаем jquery плагин полосы прокрутки

 

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

 

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

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

полоса прокрутки с помощью jquery плагина

 

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 и открываем его:

полоса прокрутке на сайте с помощью jquery

 

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

То есть под каждым примером вы найдете код, который нужно добавить в файл 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.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавляем к блоку полосу прокрутки: подключаем jQuery плагин: 2 комментария

  1. Владислав

    Большое спасибо за статью, долго искал как мне казалось столь простую штуку, но нигде настолько не находил настолько простой реализации, как раз то что нужно)

  2. Наталья

    Здравствуйте! Делаю все как в вашем уроке, но прокрутка не работает! Сайт делаю сама в первый раз, возможно что-то не включено, помогите разобраться… Я jquery.slimscroll.min.js загружаю как медиафайл, копирую url до него, подключаю скрипт через файл functions.php – как у вас написано, меняю ваш url на свой url, текст оборачиваю в div блоки, но не работает! если оставляю ваш url в файле functions.php – все работает, но естественно не могу изменить настройки блока прокрутки! помогите пожалуйста…уже 3 дня бьюсь!

Добавить комментарий для Владислав Отменить ответ