Jquery.NiceScroll - Альтернатива полосе прокрутки


Jquery.NiceScroll - Альтернатива полосе прокрутки

11013
8.2 из 10
Проголосовало: 9






Плагин nicescroll позволяет придать стандартным полосам прокрутки стиль внешне похожий на используемый в ios (как у apple). Поддерживается изменение как вертикальной, так и горизонтальной полосы прокрутки.
Поддерживаются прокрутки в DIV-ах, iframe-ах, textarea и body.
Совместимость с браузерами: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE6+.
Совместимость с мобильными усройствами: iPad, iPhone, iPod, Android 2.2+, Blackberry и Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango.
Совместимость с устройствами ввода, как сенсорная мышь или перо: window surface, chrome desktop на сенсорных ноутбуках.
Совместимость с дву-направленными мышками: Apple Magic Mouse, Apple Mouser (с дву-направленным колесом), PC мышки с дву-направленным колесом (если браузер поддерживает их).
В современных браузерах реализовано аппаратное ускорение. Использование animationFrame для более плавной прокрутки и сохранения CPU (если поддерживается браузером)

Для работы плагина подключаем библиотеку jQuery не ниже версии 1.5.x (можно попробовать и версии 1.4.x)
P.S Если у вас Ucoz Jquery уже встроен.

Код
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


После вызова jQuery поместите и вызов самого плагина (и загрузите картинку zoomico.png туда же, куда загрузили и скрипт плагина):

Код
<script src="jquery.nicescroll.js"></script>


Примеры инициализации:
Стилизуем скроллбар всего документа (предпочтение отдаем html элементу)

Код
$(document).ready(  
  function() {  
  $("html").niceScroll();  
  }  
  );


Пример с возвращенным объектом:

Код

var nice = false;  
  $(document).ready(  
  function() {  
  nice = $("html").niceScroll();  
  }  
  );


Стилизация скролла у DIV и изменение цвета ползунка:

Код

$(document).ready(  
  function() {  
  $("#thisdiv").niceScroll({cursorcolor:"#00F"});  
  }  
  );


DIV с оболочкой (wrapper), образуемый двумя дивами, первый это окно просмотра, второй это контент:

Код

$(document).ready(  
  function() {  
  $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});  
  }  
  );


Получение объекта nicescroll

Код
var nice = $("#mydiv").getNiceScroll();


Скрыть скроллбары:
Код
$("#mydiv").getNiceScroll().hide();


Проверка ресайза скроллбаров:
Код
$("#mydiv").getNiceScroll().resize();


Доступные опции:
cursorcolor - изменение цвета курсора в hex формате: по умолчанию "#000000"
cursoropacitymin - изменение прозрачности курсора, когда он не активен (скроллбар "hidden" скрыт), диапазон от 1 до 0, по умолчанию 0 (скрыт)
cursoropacitymax - изменение прозрачности курсора в активном состоянии (скроллбар "visible" виден), диапазон от 1 до 0, по умолчанию 1 (виден полностью)
cursorwidth - ширина курсора в пикселях, по умолчанию 5 (написать можно и так "5px")
cursorborder - определяет границу курсора, по умолчанию "1px solid #fff"
cursorborderradius - определяет радиус границы курсора в пикселях, по умолчанию "4px"
zindex - изменение z-index для прокуртки DIV, по умолчанию 9999
scrollspeed - скорость прокрутки, по умолчанию 60
mousescrollstep - скорость прокрутки с помощью колесика мыши, по умолчанию 40 (pixel)
touchbehavior - включение возможности прокрутки cursor-drag так же как и на touch устройствах, по умолчанию false
hwacceleration - использование аппаратного ускорения, если поддерживается, по умолчанию true
boxzoom - включение zoom контейнера с контентом, по умолчанию false
dblclickzoom - (только когда boxzoom=true) активация zoom после двойного клика по контейнеру, по умолчанию true
gesturezoom - (только когда boxzoom=true и на touch устройствах) zoom активируется, когда курсор вне/над контейнером, по умолчанию true
grabcursorenabled - отображать "grab" иконку для div с touchbehavior = true, по умолчанию true
autohidemode - скрывать курсор, true=default / "cursor" = скрывать только курсор / false = не скрывать
background, изменение CSS для фона, по умолчанию ""
iframeautoresize, авторесайз iframe на load event (по умолчанию:true)
cursorminheight, установить минимальную высоту курсора в пикселях (по умолчанию:20)
preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (по умолчанию:true)
railoffset, вы можете добавить смещение top/left для рейки (траектория по которой бегает ползунок) (по умолчанию:false)
bouncescroll, включение подпрыгивания скролла в конце контента (только аппаратное ускорение) (по умолчанию:false)
spacebarenabled, включение прокрутки страницы вниз, когда нажата клавиша "пробел" (по умолчанию:true)
railpadding, установка отступов для рейки (по умолчанию:{top:0,right:0,left:0,bottom:0})
disableoutline, для браузера chrome, отключение outline (оранжевая подсветка), когда выбран DIV с nicescroll (по умолчанию:true)
horizrailenabled, nicescroll может управлять горизонтальным скроллом (по умолчанию:true)
railalign, выравнивание вертикальной рейки (по умолчанию:"right")
railvalign, выравнивание горизонтальной рейки (по умолчанию:"bottom")
enabletranslate3d, nicescroll может использовать CSS translate для прокручиваемого контента (по умолчанию:true)
enablemousewheel, nicescroll может управлять событиями колесика мыши (по умолчанию:true)
enablekeyboard, nicescroll может управлять событиями клавиатуры (по умолчанию:true)
smoothscroll, плавный скролл (по умолчанию:true)
sensitiverail, клик по рейке вызовет прокрутку (по умолчанию:true)

Страница плагина: http://code.google.com/p/jquery-nicescroll/
Источник: http://areaaperta.com/nicescroll/index.html
Перевод: Игорь
Автор публикации: Загрузка
Загрузка
Goodmind, это его n материал
  • Всего комментариев: 6

Virus6254
0
Virus6254 написал: Написано 31 Марта 2013 в 12:15
Комментарий №4
Подскажите а как в чат пихнуть ?)

Nexus
0
Nexus написал: Написано 31 Марта 2013 в 17:50
Комментарий №5
Подключи все нужные плагины и после чата добавь это:
Код
$(document).ready(  
  function() {  
  $('#mchatIfm2').niceScroll();  
  }  
  );


Должно получится)

Virus6254
0
Virus6254 написал: Написано 02 Апреля 2013 в 16:52
Комментарий №6
Спасибо получилось:)) cool

Handyman
0
Handyman написал: Написано 30 Марта 2013 в 13:12
Комментарий №2
А можно где-нибудь пример посмотреть?)

Вовчик
+1
Вовчик написал: Написано 30 Марта 2013 в 14:36
Комментарий №3
в архиве демо

BLAzER
0
BLAzER написал: Написано 29 Марта 2013 в 22:34
Комментарий №1
Четкая штука

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 7
    Гостей: 6
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: