- Jquery скроллбарСоздаем собственные Scrollbars с помощью jQuery
Очень часто, просматривая красивые сайты, наполненные множеством эффектов, использование Ajax-технологий и т.п; мы обращаем внимание на полосы прокрутки( scrollbars ), которые на фоне красивого сайта смотрятся просто отвратительно. Этот недостаток становится еще более заметен, если на странице присутствуют блоки с overflow: scroll илл auto.
Для изменения стилий скроллбаров компанией Microsoft были введены новые CSS свойства, являющиеся расширением спецефикации CSS2. В Internet Explorer'е и некоторых версиях Opera данные свойства поддерживаются, но, к сожалению, ни Firefox, ни Chrome, ни Safari ничего не знают о них. Поэтому, рассматривать данное решение мы не будем.
Jquery плагин jScrollPane
Со времени появления и начала масоового использования jQuery в разработке сайтов было написано множество дополнительных плагинов к данному фреймворку. Одним из них является jScrollPane, позволяющий за несколько минут создавать стилизованные полосы прокрутки на вашем сайте. Основным достоинством данного плагина явялется его кроссбраузерноть. Scrollbars, созданные с помощью jScrollPane работают абсолютно во всех современных браузерах, включая IE 6. Вы можете ознакомиться с полным описанием jScrollPane и примерами на странице плагина, мы же рассмотрим простой пример его установки на примере создания блока с текстом и полосой прокрутки, стилизованный под Maс OS scrollbar.
Первым делом подключаем необходимые файлы:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jmousewhell.js"></script>
<script type="text/javascript" src="js/jscroll.js"></script>
<link href="jscroll.css" rel="stylesheet" type="text/css" />
Файл jmousewhell.js -это еще один плагин для jQuery, позволяющий работать с колесом мышки. Он необходим для того, чтобы скролл реагировал на движение колеса. Файл jscroll.css содержит описание стилей скроллбара и html-каркаса. Разобраться в нем не состаавит каких-либо затруднений. Стили к полосе прокрутки прописываются отдельно для каждого ее элемента(стрелки, фон и т.п.).
Далее, нам необходим создать html-каркас блока с текстом.
<div class="p_content">
<div id="page_content" class="scroll-pane">
Текст блока
</div>
</div>
Данный каркас является обязательным. Блок с классом p_content не должен иметь фиксированную высоту, и должен быть прижат к левому краю ( float: left; ), блок с id="page_content" должен иметь обязательный класс scroll-pane и иметь фиксированную высоту и overflow: hidden. Остальные CSS свойства вы можете посмотреть в исходном файле примера, мы не будем на них останавливаться.
Далее, все что осталось сделать - это применить jScrollPane к нашему блоку.
<script type="text/javascript">
$(function()
{
$("#page_content").jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 15});
});
</script>
При вызове указываются различные параметры, типа ширины скроллбара (scrollbarWidth), размера его стрелочек (arrowSize) и так далее. Основные из них следующие:
- scrollbarWidth [число] - ширина скроллинга (по умолчанию 10)
- scrollbarOnLeft [логическое] - если скроллбар нужен слева, ставим true.
- dragMinHeight [число] - минимальная высотка бегунка (по умолчанию 0)
- showArrows [логическое] - показывать графические стрелочки или нет (по умолчанию false)
- arrowSize [число] - высота стрелочки, если showArrows=true (рассчитывается через CSS, если не указана)
- wheelSpeed [число] - скорость колеса прокрутки в пикселах (по умолчанию 18)
- dragMaxHeight [число] - максимальная высота бегунка (по умолчанию 99999!)
- scrollbarMargin [число] - отступ слева от скроллбара (по умолчанию 5)
Скачать исходный код примера вы можете по этой ссылке.
Пример использования плагина jScrollPane: Пример
Копирование данного материала на другие сайты строго запрещено авторскими правами и преследуется по закону.
Материал подготовлен компанией NoxIT