Нестандартный скроллбар jQuery
JScrollPane - это плагин позволяющий кросс-браузерно стилизовать прокрутку (скролл, скроллбар) с помощю jQuery и CSS.
Этот плагин JQuery разработан Кельвином Luck, который преобразует стандартные полосы прокрутки браузера (скроллбары) в HTML-структуру, которая может быть легко оформлена с помощю CSS в соответствии с вашим дизайном.
JScrollPane очень гибкий плагин, но в тоже время и очень прост в использовании. После того как вы скачали и включили соответствующие файлы плагина и библиотек jQuery в <head> вашего документа, вам неоходимо вызвать всего одну JavaScript функцию для инициализации JScrollPane. Вы можете легко изменить стиль новой полосы прокрутки (скроллбара) с помощю CSS или выбрать из существующих тем. Есть целый ряд различных примеров демонстрации различных особенностей JScrollPane, из которых вы можете выбрать подходящий для вас.
Как использовать:
Плагин JScrollPane, очень прост в использовании. Вам нужно будет скачать необходимые файлы и разместить их на своем сервере. После этого необходимо включить соответствующие файлы в <head> документа:
- <!-- styles needed by jScrollPane -->
- <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
- <!-- latest jQuery direct from google's CDN -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <!-- the mousewheel plugin - optional to provide mousewheel support -->
- <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
- <!-- the jScrollPane script -->
- <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
После этого нужно инициализировать JScrollPane на document.ready (используя селектор, который укажет на содержимое, к которому необходимо применить JScrollPane):
- <script type="text/javascript">
- $(function()
- {
- $('.scroll-pane').jScrollPane();
- });
- </script>
Есть много различных способов использования JScrollPane - все примеры вы можете найти на странице проекта: jScrollPane , или загрузить архив из GitHub репозитория.
Лучший вариант в файле: arrows.html
PS. Читайте последние записи RSS Подписка на RSS
Комментарии