Данная статья описывает простейший пример использования JQuery плагина под названием «jQuery custom content scroller», который позволяет создавать блоки с собственными скроллерами, отличными от тех, что предоставляются вашими браузерами и операционными системами.
Пошаговая инструкция:
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/.
Свежие комментарии