Больше года назад я уже писал о примере реализации скроллера на jQuery. Смысл скроллера состоял в том, что нужно было сделать «бесконечную» ленту неких объектов и отображать в их в небольшом окошке, в котором эта лента как-бы прокручивается. Реализация получилась вполне работоспособная, хоть и не без недостатков.
А совсем недавно мне снова потребовался скроллер, но горизонтальный и управляемый пользователем (в отличии от предыдущего вертикального и автоскролируемого). Изобретать велосипед снова мне было лениво и я решил проверить, есть ли плагины для jQuery с нужным мне функционалом. Перепробовал я массу разных плагинов (упоминать о них смысла нет) пока не набрел на настоящую жемчужину! Идеальный для моей задачи плагин — Scrollable (страница в каталоге и домашняя страница).
Плагин совершенно замечательный — масса возможностей, прост в использовании, понятные примеры, приятный код.
Фичи:
- горизонтальный и вертикальный скролинг
- скролинг при помощи навигационных кнопок, вызовов API, курсорных клавиш на клавиатуре и колесом прокрутки на мыше
- настраиваемое количество элементов скролируемых за раз
- настраивание навигационных кнопок без единой строчки JavaScript
- постраничное скролирование
- действия, вызываемые программно: next, prev, nextPage, prevPage, seekTo, begin, end ...
- динамическое добавление и удаление элементов
- автоматически скролинг
- возможность настроить поведение скролинга с помощью листенеров onBeforeSeek и onSeek
- размер минимизированного файла около 6.0K
Применил я этот плагин для организации вывода постраничной навигации. На мой взгляд получилось достаточно удобно — легко можно добраться до любой страницы. Правда у этого способа тоже есть недостаток — если страниц уж очень много, то это становится неудобно для пользователя и тяжеловато для браузера. Мы решили ограничиться 100 страницами, а остальные просо отбрасываем.
Была у мне с этим плагином одна непонятка: не срабатывали вызовы API. Моя логика (основываясь на курении доки) подсказывала такой способ вызова:
var api = $("div.scrollable").scrollable();
api.click(10); // для перехода к десятому элементуНо этот код работать не захотел. Пришлось извратиться так:
$("div.scrollable").scrollable();
$("div.scrollable").scrollable().click(10);Если кто-нибудь подскажет более красивое решение или объяснит где я неправ в своих хотелках — буду очень признателен.
Еще статьи об этом плагине:
