Перейти к содержанию
Официальный форум поддержки Simpla

Своя полоса прокрутки


Рекомендуемые сообщения

Хочу поделиться приятной фишкой, которая украсит Ваш интернет-магазин вне всякого сомнения.  ;)

 

 

Плагин 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, по умолчанию 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/

 

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.P.S. zoomico.png - миниатюра в аттаче, сохраните её и следуйте инструкциям.

post-3839-0-21151700-1366809946_thumb.png

jquery.nicescroll.txt

Ссылка на сообщение
Поделиться на другие сайты

У себя отредактировал настройки плагина в 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 девайсах. :)

Ссылка на сообщение
Поделиться на другие сайты

скинь ссылку на пример как выглядит скролл

Есть же ссылка на официальную страницу, там полно примеров. К тому же, установка плагина занимает не более 2-х минут, можно было давно всё посмотреть на собственном сайте вживую.

Ссылка на сообщение
Поделиться на другие сайты
  • 5 месяцев спустя...

Поставил по 2-му варианту, для тех кому хочется  :P  и лень возится.

А как увеличить вширь правую полосу прокрутки? Это хорошо если мышкой управлять, а какого у кого ноут без мыши и тачем полноценно пользоваться не умеет :blink:

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...