JQuery плагин-скроллер

Данная статья описывает простейший пример использования JQuery плагина под названием «jQuery custom content scroller», который позволяет создавать блоки с собственными скроллерами, отличными от тех, что предоставляются вашими браузерами и операционными системами.

JQuery скроллер

Пошаговая инструкция:

1. Вставьте между тегов  <head></head> следующий программный код, подключая таким образом стили и скрипты рассматриваемого JQuery плагина:

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>

2. С помощью селекторов задайте к каким элементам HTML будет подрисован новый скроллер:

(function($){
  $(window).load(function(){
    $(".content").mCustomScrollbar();
  });
})(jQuery);

3. Создайте необходимую разметку на HTML:

<div class="content">
  <p>
    Lorem ipsum dolor sit amet consecte...
    Euismod Vestibulum risus id velit 
   ...Id nibh Suspendisse egestas tortor gravida 
   ...
  </p>
</div>

4. Задайте стиль блочного элемента, например вот так:

.content { width: 400px; margin: 30px auto; height: 280px; }
Скачать рабочий пример

Вызов JQuery плагина с входными параметрами:

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

(function($){
  $(window).load(function(){
    $(".content").mCustomScrollbar({
      scrollButtons:{
        enable:true
      }
    });
  });
})(jQuery);

Здесь у скроллера появятся кнопки навигации, их нужно будет стилизовать посредством применения CSS.

Дополнительная информация:

Дополнительную информацию, которая касается использования JQuery плагина-скроллера вы можете найти на сайте разработчика — http://manos.malihu.gr/jquery-custom-content-scroller/.

Опубликовано 18-06-2013 в 16:06


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты