jScrollPane.js – настраиваем внешний вид скроллбара

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

 

В данном случае, при помощи javascript и его возможностей. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.


Пример использования данного скрипта можно посмотреть здесь.

 

HTML:

<div id="pane1" class="scroll-pane">

...

</div>

 

CSS:

.scroll-pane {float:left;height:205px;overflow:auto;width:450px}
.jScrollPaneContainer {z-index:1;position:relative;overflow:hidden;margin:10px 20px 0px 50px}
.jScrollPaneContainer p{margin:0 20px 0 0px;padding:0 5px 0 5px;background:#F5FF02}
.jScrollPaneTrack {background: url(files/bg.png) center no-repeat;height:100%;cursor:pointer;right:0px;position:absolute;top:0px;width:20px}
.jScrollPaneDrag {position:absolute;background: url(files/z.png) center no-repeat;overflow:hidden;cursor:pointer;width:20px}

 

JScript:

$(function()
    {
        $('#pane1').jScrollPane();
    });

 

и необходимо подключить несколько файликов:

<script type="text/javascript" src="/files/jquery.min.js"></script>
<script type="text/javascript" src="/files/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/files/jquery.em.js"></script>
<script type="text/javascript" src="/files/jScrollPane.js"></script>

 

Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Веб-мастерская
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления

Not registered?