Навигация
Категории
| Скрипты для Ucoz [474] |
| Шаблоны для Ucoz [199] |
| Графика для Ucoz [11] |
| Скрипты Меню для сайта [21] |
| Ajax Окна [4] |
Мини-Чат
Опрос
Лучшие пользователи
Ник: Толик
Файлов: 744
Ник: cyber
Файлов: 159
Ник: waxirewion
Файлов: 59
Ник: Admin™
Файлов: 5
Партнеры
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
| Главная » Файлы » Всё для Ucoz » Скрипты для Ucoz |
Скрипт: Стилизуем полосы прокрутки с jScrollPane
Наверное, многие сталкивались с проблемой стилизации полос прокрутки (скролл-баров). В этой статье вы узнаете, как создать простейший скролл-бар и стилизовать его, используя плагин jScrollPane.
Установка:
Для работы скрипта необходимо загрузить на сайт следующие 2 скрипта:
jquery.jscrollpane.js (14.76 Kb)
jquery.mousewheel.js (2.34 Kb)
И подключить их на страницу, добавив в <head>:
<script src="http://адрес_сайта/jquery.mousewheel.js"></script>
<script src="http://адрес_сайта/jquery.jscrollpane.js"></script>
Ну и, разумеется, стили, скролл-бары будут схожи со скролл-барами ВКонтакте. Вставляем стили в свой CSS:
.jspContainer{overflow:hidden;position:relative;}
.jspPane{position:absolute;}
/* Вертикальная полоса прокрутки */
.jspVerticalBar{height:100%;position:absolute;right:0;top:0;width:5px;z-index:2;}
/* Горизонтальная полоса прокрутки */
.jspHorizontalBar{bottom:0;height:5px;left:0;position:absolute;width:100%;}
.jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0;}
.jspCap{display:none;}
.jspHorizontalBar .jspCap{float:left;}
/* Полоска, по которой бегает ползунок */
.jspTrack{background:#eee;position:relative;border-radius:5px;}
/* Непосредственно, сам ползунок */
.jspDrag{background:#aaa;cursor:pointer;left:0;position:relative;top:0;border-radius:5px;}
.jspDrag:hover {background:#999;}
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%;}
/* Стрелки для прокрутки */
.jspArrow{background:#999;cursor:pointer;display:block;text-indent:-20000px;}
/* Неактивные стрелки для прокрутки */
.jspArrow.jspDisabled{background:#aaa;cursor:default;}
/* Дополнительные стили для вертикальных и горизонтальных стрелок */
.jspVerticalBar .jspArrow{height:16px;}
.jspHorizontalBar .jspArrow{float:left;height:100%;width:5px;}
.jspVerticalBar .jspArrow:focus{outline:none;}
/* Уголок, где сходятся вертикальная и горизонтальная полосы прокрутки */
.jspCorner{float:left;height:100%;}
* html .jspCorner{margin:0 -3px 0 0;}
Вот, собственно, и все, что необходимо было установить.
Как использовать?
Для начала создадим блок с текстом, над которым мы и будем работать в дальнейшем.
HTML:
Стилизуем блок, как душе угодно. Можно например вот так:
Для <div> , к которому мы будем присоединять скролл-бар, добавляем следующие стили:
Теперь JavaScript:
И теперь у нашего блока появился скролл-бар, который можно стилизовать под свои нужды.
Дополнительные настройки
Данный плагин имеет множество настроек, а так же API-функционал:
API-функционал.
В скрипте так же редусмотрены функции управления скроллом.
Для работы необходимо получить доступ к переменной "jsp":
Теперь мы можем управлять скроллом, обращаясь к переменной "api" и задавая необходимые функции. Список функций перечислен на оф. сайте
Пример вызова API-функции:
На этом всё!
Установка:
Для работы скрипта необходимо загрузить на сайт следующие 2 скрипта:
jquery.jscrollpane.js (14.76 Kb)
jquery.mousewheel.js (2.34 Kb)
И подключить их на страницу, добавив в <head>:
Код
<script src="http://адрес_сайта/jquery.mousewheel.js"></script>
<script src="http://адрес_сайта/jquery.jscrollpane.js"></script>
Ну и, разумеется, стили, скролл-бары будут схожи со скролл-барами ВКонтакте. Вставляем стили в свой CSS:
Код
.jspContainer{overflow:hidden;position:relative;}
.jspPane{position:absolute;}
/* Вертикальная полоса прокрутки */
.jspVerticalBar{height:100%;position:absolute;right:0;top:0;width:5px;z-index:2;}
/* Горизонтальная полоса прокрутки */
.jspHorizontalBar{bottom:0;height:5px;left:0;position:absolute;width:100%;}
.jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0;}
.jspCap{display:none;}
.jspHorizontalBar .jspCap{float:left;}
/* Полоска, по которой бегает ползунок */
.jspTrack{background:#eee;position:relative;border-radius:5px;}
/* Непосредственно, сам ползунок */
.jspDrag{background:#aaa;cursor:pointer;left:0;position:relative;top:0;border-radius:5px;}
.jspDrag:hover {background:#999;}
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%;}
/* Стрелки для прокрутки */
.jspArrow{background:#999;cursor:pointer;display:block;text-indent:-20000px;}
/* Неактивные стрелки для прокрутки */
.jspArrow.jspDisabled{background:#aaa;cursor:default;}
/* Дополнительные стили для вертикальных и горизонтальных стрелок */
.jspVerticalBar .jspArrow{height:16px;}
.jspHorizontalBar .jspArrow{float:left;height:100%;width:5px;}
.jspVerticalBar .jspArrow:focus{outline:none;}
/* Уголок, где сходятся вертикальная и горизонтальная полосы прокрутки */
.jspCorner{float:left;height:100%;}
* html .jspCorner{margin:0 -3px 0 0;}
Вот, собственно, и все, что необходимо было установить.
Как использовать?
Для начала создадим блок с текстом, над которым мы и будем работать в дальнейшем.
HTML:
Код
<div class="black">
<div class="white">
<div id="pane">
<p>Много-много текста...</p>
</div>
</div>
</div>
<div class="white">
<div id="pane">
<p>Много-много текста...</p>
</div>
</div>
</div>
Стилизуем блок, как душе угодно. Можно например вот так:
Код
.black {position:relative;width:400px;border-radius:3px;margin:0 auto;color:#777;padding:5px;text-align:justify;background: rgba(0,0,0,0.9);}
.white {background:#fafafa;border-radius:3px;padding:15px;}
.white {background:#fafafa;border-radius:3px;padding:15px;}
Для <div> , к которому мы будем присоединять скролл-бар, добавляем следующие стили:
Код
#pane {
max-height:200px; /* Выставляем ограничение по высоте */
overflow:auto; /* Добавляем стандартные полосы прокрутки на случай, если скрипт не сработает. */
outline:none; /* Убираем неприятную обводку при фокусе. */
}
max-height:200px; /* Выставляем ограничение по высоте */
overflow:auto; /* Добавляем стандартные полосы прокрутки на случай, если скрипт не сработает. */
outline:none; /* Убираем неприятную обводку при фокусе. */
}
Теперь JavaScript:
Код
<script type="text/javascript">
jQuery(function(){
$('#pane').jScrollPane();
});
</script>
jQuery(function(){
$('#pane').jScrollPane();
});
</script>
И теперь у нашего блока появился скролл-бар, который можно стилизовать под свои нужды.
Дополнительные настройки
Данный плагин имеет множество настроек, а так же API-функционал:
Код
<script type="text/javascript">
jQuery(function(){
$('#pane').jScrollPane({
showArrows:true, // Показываем стрелки на полосе прокрутки.
autoReinitialise:true, // Включаем автоматическую переинициализацию скрипта. Необходимо для элементов, которые меняют свою ширину/высоту.
autoReinitialiseDelay:1000, // Переинициализация скрипта 1 раз в секунду.
animateScroll:true, // Анимация прокрутки при вызове scrollTo и scrollBy.
mouseWheelSpeed:30, // На сколько пикселей производится прокрутка при скроллинге колесом мыши.
arrowButtonSpeed:30, // На сколько пикселей производится прокрутка при клике по стрелкам.
arrowScrollOnHover:true, // Включить скроллинг при наведении на стрелки.
hideFocus:true, // Скрываем outline при фокусе. Лучше не использовать эту функцию, а скрыть outline с помощью средств CSS.
clickOnTrack:true, // При нажатии на треке ползунок переходит в ту точку, на которую вы нажали.
trackClickSpeed:30, // На сколько пикселей производится прокрутка, пока мышь зажата на треке.
trackClickRepeatFreq:100 // Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата на треке
});
});
</script>
jQuery(function(){
$('#pane').jScrollPane({
showArrows:true, // Показываем стрелки на полосе прокрутки.
autoReinitialise:true, // Включаем автоматическую переинициализацию скрипта. Необходимо для элементов, которые меняют свою ширину/высоту.
autoReinitialiseDelay:1000, // Переинициализация скрипта 1 раз в секунду.
animateScroll:true, // Анимация прокрутки при вызове scrollTo и scrollBy.
mouseWheelSpeed:30, // На сколько пикселей производится прокрутка при скроллинге колесом мыши.
arrowButtonSpeed:30, // На сколько пикселей производится прокрутка при клике по стрелкам.
arrowScrollOnHover:true, // Включить скроллинг при наведении на стрелки.
hideFocus:true, // Скрываем outline при фокусе. Лучше не использовать эту функцию, а скрыть outline с помощью средств CSS.
clickOnTrack:true, // При нажатии на треке ползунок переходит в ту точку, на которую вы нажали.
trackClickSpeed:30, // На сколько пикселей производится прокрутка, пока мышь зажата на треке.
trackClickRepeatFreq:100 // Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата на треке
});
});
</script>
API-функционал.
В скрипте так же редусмотрены функции управления скроллом.
Для работы необходимо получить доступ к переменной "jsp":
Код
var pane = $('#pane').jScrollPane();
var api = pane.data('jsp');
var api = pane.data('jsp');
Теперь мы можем управлять скроллом, обращаясь к переменной "api" и задавая необходимые функции. Список функций перечислен на оф. сайте
Пример вызова API-функции:
Код
var pane = $('#pane').jScrollPane();
var api = pane.data('jsp');
api.scrollTo(100, 100); // Прокрутка до 100px (x) и 100px (y)
var api = pane.data('jsp');
api.scrollTo(100, 100); // Прокрутка до 100px (x) и 100px (y)
На этом всё!
| Всего комментариев: 0 | |