Плагин скроллинга текста внутри блока

Плагин скроллинга текста внутри блока
Мною было написано уже две статьи по поводу скроллинга внутри блока. И обе они были лишь материалом для создания чего-то конкретного. Чего-то, реализованного уже в этой статье.

Код html должен быть минимальным, и в то же время работоспособным в любых ситуациях. Следовательно, он остался тем же: теория скроллинга. В дальнейшем он будет изменяться javascript’ом.

Все что было описано выше, все это я воплотил в jQuery плагине.

Плагин jQuery.BlockScript используется для создания красивого скроллинга внутри блока.

Чтобы начать использовать его для своих целей, нужно иметь структуру, похожую на:


Подключаем скрипты:



После выполнения скрипта, получаем на выходе:

И настраиваем стили для себя:
#navigation{width:300px;overflow:auto;}
#pages{width:100%;white-space:nowrap}
.trackDrag{
height:1px;margin-top:4px;
position:relative;background:#ccc;
}
.arrowDrag{
height:9px;width:45px;margin-top:-4px;
background:#333;position:absolute;
}
.all-cont{}

.trackDrag — полоса прокрутки.
.arrowDrag — ползунок.
.all-cont — весь контент, который прокручивается.

Вот и все. Скроллинг в вашем блоке готов. Однако для удобства и более обширного использования этого плагина, я сделал еще 5 дополнений. Вынес три функции:

  1. startDragF: Когда начали тянуть ползунок
  2. stopDragF: Когда перестали тянуть ползунок
  3. initDragF: Во время перемещения ползунка

Последняя получает значения из скрипта: initDragF(x,m,l,r,k). Что они означают, можно узнать из предыдущей статьи теория скроллинга — javascript.

Еще два дополнения, которые так же полезны.

Параметр DOM (function(){…}) позволит вам сделать какие-то манипуляции с html кодом при загрузке плагина.

Параметр SEL (selector) означает селектор, который станет ровно в центре показываемой области при загрузке страницы.

Пример использования сразу всех параметров:

$(function(){
$('#navigation').BlockScroll({
sel: '.thisp', // Объект привязки для скроллинга при загрузке
DOM: function(){
// Манипуляии с DOM
},
startDragF: function(){
// Перед началом перемещения
},
stopDragF: function(){
// После окончания перемещения
},
initDragF: function(){
// Во время перемещения
},
});
});

Все, скроллинг готов. Осталось на него посмотреть:

Работоспособность скрипта проверялась:
FireFox 2.6.3 «>»
Opera 10.10 linux
Konqueror 4.4.4
Chromium 5.0.375.70

Очень надеюсь на ваши дополнения.

Комментарии — 6 комментариев

  1. #9838 Kein в 12:30, 28 июня 2010: (подписался)

    Ответить | Цитировать

    «Вы можете следить за любыми ответы на эту запись через RSS» — поправьте)
    А так еще не хватает mousewhell и скролинга при клике на пустую область скроллбара.
    Ну и под IE8 не двигается к сожалению)

  2. Kein, спасибо за ответ.
    Полоса скроллбара слишком мала, но если прицелиться и кликнуть по ней, перемещение сработает.
    Mousewheel — довольно хорошая вещь. Надо будет подумать. Хотя, я бы не использовал эту технологию, так как есть ползунок.
    Думаю и меньше версии не работают?

    if(jQuery.browser.msie){
    $(window)
    .bind('selectstart',ignore)
    .bind('dragstart',ignore);
    }

  3. #9942 да я в 22:30, 12 августа 2010:

    Ответить | Цитировать

    отключите возможность выделения текста через css

  4. #10092 DuCoz в 9:55, 18 августа 2010:

    Ответить | Цитировать

    Спасибо!

  5. #10786 forababy в 17:05, 18 декабря 2010: (подписался)

    Ответить | Цитировать

    В данном случае скрип выводит горизонтальную прокрутку, а как её переделать под вертикальную?

  6. Выше описано построение велосипеда ; ).
    forababy, если вам еще нужен вертикальный скроллинг, напишите мне.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting