WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Nicescroll - альтернатива полос прокрутки
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 4
    Пользователей: 0
    Гостей: 4


    Последние комментарии
    ...
    HI-tech:
    0

    Nicescroll - альтернатива полос прокрутки

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 25-03-2013, 03:50
    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 (если поддерживается браузером). Специальное предложение - домашняя метеостанция для вас!

    Особенности:
    • Простая установка и активация, работает без модификации вашего кода.
    • Стильный скроллбар, который не съедает полезную область вашего окна браузера, как это делают стандартные полосы прокрутки в браузере.
    • Возможность стилизации скроллбара всей страницы, т.е. тега body.
    • Во всех браузерах вы можете прокручивать: с помощью перетаскивания курсора, колесиком мыши (скорость настраивается), клавишами навигации (клавиши управления курсором, pageup, pagedown, home/end)
    • Плавная прокрутка (скорость настраивается)
    • Функция масштабирования
    • Аппаратное ускорение прокрутки
    • Поддержка animation frame для плавной прокрутки и экономии ресурсов CPU
    • Режим перетаскивания скролла, как на сенсорных устройствах
    • Протестирован со всеми основными десктопными и мобилными браузерами
    • Поддержка touch устройств
    • Поддержка устройств с мултитач (IE10 с MSPointer)
    • Полностью настраиваемый скроллбар
    • Родные scroll события, так же работают
    • Полностью интегрирован с jQuery
    • Совместим с jQuery UI, jQuery Touch и jQuery Mobile


    javascript
    Для работы плагина подключаем библиотеку jQuery не ниже версии 1.5.x (можно попробовать и версии 1.4.x)
    <script src="jquery.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)



    Скачать бесплатно

    Теги: javascript

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.