Brigadir Опубликовано 24 апреля, 2013 Жалоба Поделиться Опубликовано 24 апреля, 2013 Хочу поделиться приятной фишкой, которая украсит Ваш интернет-магазин вне всякого сомнения. Плагин nicescroll позволяет придать стандартным полосам прокрутки стиль внешне похожий на используемый в iOS. Поддерживается изменение как вертикальной, так и горизонтальной полосы прокрутки.Поддерживаются прокрутки в 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 мышки с дву-направленным колесом (если браузер поддерживает их).В современных браузерах реализовано аппаратное ускорение. Использование animation frame для более плавной прокрутки и сохранения CPU (если поддерживается браузером) Особенности:Простая установка и активация, работает без модификации Вашего кода.Стильный скроллбар, который не съедает полезную область Вашего окна браузера, как это делают стандартные полосы прокрутки в браузере.Возможность стилизации скроллбара всей страницы, т.е. тега body.Во всех браузерах Вы можете прокручивать: с помощью перетаскивания курсора, колесиком мыши (скорость настраивается), клавишами навигации (клавиши управления курсором, pageup, pagedown, home/end)Плавная прокрутка (скорость настраивается)Функция масштабированияАппаратное ускорение прокруткиПоддержка animation frame для плавной прокрутки и экономии ресурсов CPUРежим перетаскивания скролла, как на сенсорных устройствахПротестирован со всеми основными десктопными и мобилными браузерамиПоддержка touch устройствПоддержка устройств с мультитач (IE10 с MSPointer)Полностью настраиваемый скроллбарРодные scroll события, так же работаютПолностью интегрирован с jQueryСовместим с jQuery UI, jQuery Touch и jQuery Mobile. После вызова jQuery в index.tpl шаблона поместите вызов самого плагина и загрузите картинку zoomico.png туда же, куда загрузили и скрипт плагина: <script src="design/{$settings->theme}/js/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, по умолчанию 9999scrollspeed - скорость прокрутки, по умолчанию 60mousescrollstep - скорость прокрутки с помощью колесика мыши, по умолчанию 40 (pixel)touchbehavior - включение возможности прокрутки cursor-drag так же как и на touch устройствах, по умолчанию falsehwacceleration - использование аппаратного ускорения, если поддерживается, по умолчанию trueboxzoom - включение zoom контейнера с контентом, по умолчанию falsedblclickzoom - (только когда boxzoom=true) активация zoom после двойного клика по контейнеру, по умолчанию truegesturezoom - (только когда boxzoom=true и на touch устройствах) zoom активируется, когда курсор вне/над контейнером, по умолчанию truegrabcursorenabled, отображать "grab" иконку для div с touchbehavior = true, по умолчанию trueautohidemode, скрывать курсор, 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/ P.S. Измените расширение файла jquery.nicescroll.txt на .js (у меня отсутствуют права на загрузку этого типа файлов на форум) P.P.S. Для тех, кому не очень понятно, но очень хочется: Шаг 1: Загружаем файл jquery.nicescroll.js (не забываем изменить расширение) в папку design/Ваш шаблон/js (туда же загружаем файл zoomico.png). Шаг 2: В index.tpl Вашего шаблона после строчек: {* JQuery *} <script src="js/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript"></script> вставляем: <script src="design/{$settings->theme}/js/jquery.nicescroll.js"></script> Перед закрывающим тегом </head> вставляем: <script type="text/javascript"> $(document).ready( function() { $("html").niceScroll(); } ); </script> Ну вот и всё, теперь Вы счастливый обладатель собственного анимированного скроллбара.Ну и пробуйте описанные выше функции. Удачи! P.P.P.S. zoomico.png - миниатюра в аттаче, сохраните её и следуйте инструкциям.jquery.nicescroll.txt Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 24 апреля, 2013 Автор Жалоба Поделиться Опубликовано 24 апреля, 2013 У себя отредактировал настройки плагина в jquery.nicescroll.js следующим образом: var _globaloptions = { zindex:"99999", cursoropacitymin:0, cursoropacitymax:1, cursorcolor:"#404040", cursorwidth:"10px", cursorborder:"0px solid #505050", cursorborderradius:"0px", scrollspeed:60, mousescrollstep:8*3, touchbehavior:true, hwacceleration:true, usetransition:true, boxzoom:true, dblclickzoom:true, gesturezoom:true, grabcursorenabled:true, autohidemode:true, background:"", iframeautoresize:true, cursorminheight:32, preservenativescrolling:true, railoffset:false, bouncescroll:true, spacebarenabled:true, railpadding:{top:0,right:0,left:0,bottom:0}, disableoutline:true, horizrailenabled:true, railalign:"right", railvalign:"bottom", enabletranslate3d:true, enablemousewheel:true, enablekeyboard:true, smoothscroll:true, sensitiverail:true, enablemouselockapi:true, // cursormaxheight:false, cursorfixedheight:false, directionlockdeadzone:6, hidecursordelay:400, nativeparentscrolling:true, enablescrollonselection:true, overflowx:true, overflowy:true, cursordragspeed:0.3, rtlmode:false, cursordragontouch:true } И внёс изменения в глобальные стили CSS шаблона для правильной работы плагина (в коде только те параметры, которые нужно изменить, остальное оставляйте как есть): html, body { width: auto; margin: auto; height: auto; cursor: default; } Теперь можно дополнительно прокручивать страницу вниз удерживая пробел и таскать содержимое окна курсором как в touch девайсах. Цитата Ссылка на сообщение Поделиться на другие сайты
iMessi89 Опубликовано 30 апреля, 2013 Жалоба Поделиться Опубликовано 30 апреля, 2013 скинь ссылку на пример как выглядит скролл Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 30 апреля, 2013 Автор Жалоба Поделиться Опубликовано 30 апреля, 2013 скинь ссылку на пример как выглядит скроллЕсть же ссылка на официальную страницу, там полно примеров. К тому же, установка плагина занимает не более 2-х минут, можно было давно всё посмотреть на собственном сайте вживую. Цитата Ссылка на сообщение Поделиться на другие сайты
schurik_p Опубликовано 28 октября, 2013 Жалоба Поделиться Опубликовано 28 октября, 2013 Поставил по 2-му варианту, для тех кому хочется и лень возится.А как увеличить вширь правую полосу прокрутки? Это хорошо если мышкой управлять, а какого у кого ноут без мыши и тачем полноценно пользоваться не умеет Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.