Главная » Создание сайтов » Программирование » Плагин скроллинга текста внутри блока

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

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

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

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

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

Чтобы начать использовать его для своих целей, нужно иметь структуру, похожую на:
<div id="navigation">
<div id="pages">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
</div>
</div>

Подключаем скрипты:
<script type="text/javascript" src="http://bitby.net/wp-demo/files/jquery.js"></script>
<script type="text/javascript" src="http://bitby.net/wp-demo/plugins/BlockScroll/jquery.BlockScroll.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation').BlockScroll();
});
</script>

После выполнения скрипта, получаем на выходе:
<div class="container">
<div id="navigation">
<div id="pages">
<span class="all-cont">Lorem ipsum dolor sit amet, consectetuer <span class="sd">adipiscing</span> elit. Donec condimentum pretium nisl.</span>
</div>
<div class="trackDrag">
<div class="arrowDrag"></div>
</div>
</div>
</div>

И настраиваем стили для себя:
#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

Очень надеюсь на ваши дополнения. С уважением, Vasilenko Ivan!

Комментарии — 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