—»     —»   Оформление скроллинга - jQuery-плагин Custom Content Scroller
  Раздел: Скрипты и коды   Нет комментариев  

Оформление скроллинга - jQuery-плагин Custom Content Scroller

Прокручиваемые элементы на сайте сегодня можно встретить не так часто, но они все равно есть в достаточном количестве. Дизайнеры, скорее всего, избегают их по причине их абсолютно непривлекательности. Стандартные скроллинги же также не имеют ничего привлекательного. Какой-то парень из Редмонда или Маунтин-Вью решил показать всем, как должны выглядеть скроллинги. С появлением jQuery-плагина Custom Content Scroller мы можем больше не думать о том, как кто-то нам советует представлять полосы прокрутки. Вместо этого, мы можем самостоятельно оформить их по собственному предпочтению или адаптировать под требования дизайн-проекта.

Оформление скроллинга - jQuery-плагин Custom Content Scroller

Встраиваем плагин и его таблицы стилей

После того, как мы скачали плагин и загрузили его на хостинг, на котором размещается наш сайт, нам нужно встроить его в наш HTML-документ. Кроме плагина, нам также следует встроить соответствующие каскадные таблицы стилей. Таблицы стилей предлагают нам стандартный шаблон, который, как нам кажется, должен подойти в большинстве случаев. Так что, если вам не хочется изменять его внешний вид, есть огромная вероятность, что вам и не придется этого делать.

После того, как процесс встраивания будет завершен, вы можете применить эти полосы прокрутки к любому элементу, который вы хотите оформить. Очевидно, это реализуется посредством javascript. Вы будете видеть этот скроллинг только тогда, когда содержимое элемента будет превышать его габариты.

<script>
(function($){
$(document).ready(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>

В нашем примере мы применяем плагин ко всем HTML-элементам, в которых имеется элемент с классом 'content'. Здесь не требуется никаких дополнительных настроек. Хотя это вполне возможно, так как плагин позволяет вам индивидуализировать внешний вид скроллингов посредством нескольких опций.

Одна из возможностей, к примеру, заключается не только в том, что вы можете применять скроллинги, но также оформить и кнопки прокрутки. Эти кнопки позволят пользователям прокрутить контента на определенное число пикселей вверх или вниз:

$(".content").mCustomScrollbar(
scrollButtons: {
enable: true,
scrollAmount: 10
}
);

В большинстве случаев применяется вертикальный скроллинг. Немного реже применяется горизонтальный скроллинг, и здесь Custom Content Scroller также придет вам на помощь:

$(".content").mCustomScrollbar(
horizontalScroll: true
);

Здесь есть еще и другие опции, которые вы можете исследовать самостоятельно. Вы можете даже позволить осуществлять прокрутку при помощи колесика мыши, но тогда вам придется установить плагин mousewheel для jQuery.

Индивидуализация (оформление) скроллинга

Если вам не нравится стандартный внешний вид скроллинга, вы всегда можете изменить его при помощи CSS-кода.

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

В завершение

Custom Content Scroller невероятно просто использовать и изменять. Что же еще может нам понадобится? Если у вас никак не получается реализовать привлекательные области контента с возможностью прокручивать его, то вам обязательно стоит попробовать Custom Content Scroller.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 14933   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031