Плагин jScrollPane JQuery - Форум ProUcoz.com - Плагин jScrollPane JQuery - Форум ProUcoz.com
Вторник 16:12 | 28.02.2017
Свежие темы · Участники · Правила форума · Поиск · RSS
Страница 1 из 11
Модератор форума: FR3cH 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Php скрипты и интересные решения » Плагин jScrollPane JQuery
Плагин jScrollPane JQuery
FR3cH[Нет на сайте]
Дата: Вторник, 03.07.2012, 18:17 | Сообщение # 1
Хитрец всем хитрым
Сообщений: 213
Это самый лучший плагин скроллинга JQuery. У него есть масса преимуществ, и, кстати, сегодня у плагина масса возможностей. На Урааа этот плагин тоже используется. Вместе с ним в комплекте прилагается плагин Mousewheel JQuery. Если использовать только плагин jScrollPane JQuery, колесико на мышке работать не будет, нужен плагин Mousewheel. Скроллинг можно делать не только вертикальный, но и горизонтальный. Замена полосы прокрутки – это не такая уж и сложная работа, всего пару кодов и готово.

В данной версии плагина исправлен скроллинг на сенсорных устройствах. Проблема была в том, что вместо нужно скроллинга, скроллировалась вся страница. Это наблюдалось как в iPhone и iPad, так и, например, в Android. Теперь на iPhone, iPad и Android плагин jScrollPane JQuery работает нормально.

Подключение JQuery, плагина jScrollPane и плагина Mousewheel (в секцию HEAD)
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
<script type="text/javascript" src="jquery.jscrollpane.js"></script>   
<script type="text/javascript" src="jquery.mousewheel.js"></script>


Подключение CSS файла
Code
<link rel="stylesheet" type="text/css" href="jscrollpane.css" />


Код CSS (для элемента со скроллингом)
Code
.scrollblock {  
overflow:auto;  
width:400px; // Ширина блока  
height:500px; // Длина блока  
}


Код HTML
Code
<div class="scrollblock">  
<div>  
   ...  
   Содержимое  
   ...  
</div>  
</div>


Код JavaScript
Code
<script type="text/javascript">  
$(function()  
{  
   $('.scrollblock').jScrollPane();  
});  
</script>


Несколько полезных дополнений для вызова jScrollPane
Code
<script type="text/javascript">  
$(function()  
{  
   $('.scrollblock').jScrollPane(  
{  
showArrows: true, // показывать стрелки  
arrowScrollOnHover: true, // скроллинг при наведении на стрлки  
enableKeyboardNavigation: false, // запрет управления с клавиатуры  
hideFocus: true // скрывает outline при фокусе  
}  
);  
});  
</script>


Стиль стрелок нужно продумать самостоятельно, в этом примере они не используются. Дополнений гораздо больше, чем представлено здесь.


 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Php скрипты и интересные решения » Плагин jScrollPane JQuery
Страница 1 из 11
Поиск: