Главная » Скрипты для ucoz » Другие скрипты для ucoz

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


Плагин 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)


Источник |  Автор: Игорь | Категория: Другие скрипты для ucoz | Добавил: AID | Дата: 30.03.2013
Скачать Jquery.NiceScroll - Альтернатива полосе прокрутки с сервера
2913_3794_Jquery.Nic.rar Размер: 455.9 Kb (cкачиваний: 109)

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz