Плагин jScrollPane JQuery

Плагин jScrollPane JQuery

23.06.2012877322admin

Это самый лучший плагин скроллинга 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>

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




Сохраните в социальную сеть
Комментарии (22)
Гость 23.06.2012 в 22:09Спам
А как делать что бы работал в чате?
0
У меня проблема есть. Я поставил плагин, работает отлично. Проверял с текстом, но как я подключаю к скрипту, то не чего не работает!

Вот сам скрипт:
[code]<script type="text/javascript">
$(function () {
$('.scroll_user_list').jScrollPane({enableKeyboardNavigation:false});
stats = {
online: function () {
$('#num_online').html($('#onl3').find('b').text());
$.get('/index/62', function (stat) {
users = $('a', $('cmd[p="content"]', stat).text()).size();
list = $('cmd[p="content"]', stat).text();
$('#user_list').empty();
$('a', list).each(function () {
$('#user_list').append('<div class="stat_frame rad_1"><div id="f_l"><a href="' + $(this).attr('href') + '" class="' + $(this).attr('class') + '" style="font-weight:700;">' + $(this).text() + '</a></div><div id="f_r"><a href="/index/14-' + $(this).attr('href').split('-')[1] + '-0-1" class="stat_pm">c</a></div></div>');
});
});
}
};
setInterval(function () {
$('#stats_load').fadeIn().delay(1000).fadeOut();
stats.online();
},
12000);
stats.online();
});
</script>
<div class="scroll_user_list">
<div id="user_list"></div>
</div>
[/code]
Что может быть не так? :(
Подскажите...
0
Александр 23.06.2012 в 23:32Спам
Для чата делаем следующее

<div class="scrollblock">
<div>

<iframe style="width:100%;height:600px" frameborder="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="/mchat/"></iframe>

</div>
</div>
0
Saha, а фарма добавления сообщений их жопы вылезит? :D
0
Александр 24.06.2012 в 15:16Спам
Ilia, у тебя, да.
0
Saha, xD
0
Saha, а у тебя вижу из более интимного места?
0
Александр 24.06.2012 в 17:53Спам
Ilia, Ты какой то озабоченный, пойдука я лучше отсюда.
0
Филипп 24.06.2012 в 20:10Спам
хахаха
0
Saha, ДАВАЙДОСВИДАНИЯ
0
как для чата сделать? У меня чат не через iframe.
0
как раз таки для iframe нельзя.
0
Код есть, я как раз старался писать, чтобы легко было вставить в чат. У меня тот же скроллинг в чате здесь, код я отсюда же в материал и вставил. Все понятно написано
0
Гость 25.06.2012 в 21:24Спам
Я смог вбухать прокрутку в чат, статистику, материалы и т.д. Это довольно трудно было! Баг заметил, если CTRL + R нажать то в чате прокрутка полностью до низа не прокручивается((( А как авто обновление чата срабатывает все в норму приходит :)
0
Ruslan Saharuck 16.08.2012 в 23:51Спам
PZD'c, комментики сверху...
0
Гость 02.11.2012 в 22:15Спам
Спасибо огромное! Работает без проблем. Спасибо что Вы есть.
0
Гость 11.12.2012 в 18:42Спам
а как его установить ?
для меню!!
0
Гость 12.07.2013 в 18:51Спам
У меня не работает! Я 3 часа сидел пытался подключал все различные яваскрипты но не фига!. Скроллинг отображается но он стандартный!
0
Гость 19.07.2013 в 23:39Спам
В Mozila не работает
0
Гость 04.09.2013 в 15:49Спам
везде он работает. а для чата пора бы уже WebSocket юзать, а не фреймы.
0
Oleg 14.08.2014 в 23:33Спам
А если я хочу использовать горизонтальный скролл, что для этого необходимо поправить?
0
moicrosoft 23.05.2016 в 13:59Спам
это можно сделать и без js а спомащью свойства ::-webkit-scrollbar
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт