Удобный jQuery-плагин для вертикальной прокрутки содержимого

22 Июн
2012

Для собственных нужд понадобилось сделать прокрутку содержимого области, размер которой ограничен. Я знал, что существуют некоторые реализации такой возможности на jQuery, но хотелось попробовать свои силы. Получилось реализовать функциональность, которую ни один известный мне плагин в полной мере не предоставлял.
Разработанный плагин позволяет:
  1. Вставлять полосу прокрутки собственного дизайна.
  2. Прокручивать содержимое полосой прокрутки.
  3. Прокручивать содержимое по движению колеса мыши.
  4. Прокручивать содержимое стрелками клавиатуры.
  5. Задавать гибкие настройки высоты контейнера, шага прокрутки, положения полосы прокрутки.

Под катом — описание работы с расширением.

Вёрстка

Плагин подразумевает следующую верстку для своей работы: существует некоторый контейнер
<div>
(возможен любой контейнер, но по соображениям верстки
<div>
правильнее всего) имеющий свойство css
overflow: hidden
, к которому и будет применяться плагин. В контейнер могут быть вложены любые элементы, которые в последствии будут прокручиваться. При применении плагина, содержимое контейнера оборачивается в
<div>
, изменением свойства
margin-top
которого и будет осуществляться прокрутка.
Применение плагина

Для работы плагина необходим подключенный jQuery, плагин jquery-mousewheel и, собственно, сам плагин и css-файл свойств полосы прокрутки по умолчанию. Внешний вид полосы прокрутки может быть изменен посредством изменения этого css-файла. Плагин применяется непосредственно к контейнеру вызовом кода вида
$(containerSelector).makeItScrollable(options)
, где containerSelector — строка идентифицирующая контейнер, options — объект JavaScript, содержащий параметры. Функции могут быть переданы следующие параметры:
  • contentWrapperClass — имя класса, которое будет назначено для div’а, оборачивающего содержимое.
  • scrollLineClass — имя класса, которое будет назначено для div’а полосы прокрутки.
  • scrollerClass — имя класса, которое будет назначено для div’а ползунка полосы прокрутки.
  • vertMargin — отступы по вертикали полосы прокрутки от границ контейнера (по умолчанию — 5).
  • containerElementaryUnit — строка, содержащая идентификатор элемента внутри контейнера (будет передаваться методу
    $(container).find(containerElementaryUnit)
    ), который необходимо использовать при вычислении параметров stepSize и containerHeight, по умолчанию ‘li’.
  • stepSize — величина шага прокрутки, массив, первый элемент которого — число (величина отступа), второй — строка ‘px’ для указания отступа в пикселях, или ‘units’ для указания отступа в высоту элемента, переданного в параметре containerElementaryUnit (по умолчанию
    [1, 'units']
    ).
  • containerHeight — высота контейнера, массив, первый элемент которого — число (величина высоты), второй — строка ‘px’ для указания высоты в пикселях, или ‘units’ для указания высоты в высоту элемента, переданного в параметре containerElementaryUnit (по умолчанию
    [3, 'units']
    ).
  • useButtons — строка, содержащая идентификатор элемента, при событии keyDown в котором будут обрабатываться нажатия клавиш ‘вверх’ и ‘вниз’ для прокрутки содержимого. По правилам это может быть элемент формы, или ссылка, по умолчанию null. Для возникновения событий клавиатуры элементу необходимо передать фокус мышкой, клавиатурой или вызовом функции
    $(elenent).focusin()
    .

После применения метода должно получиться что-то вроде этого.image
Пример.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх