jQuery-плагин для полноэкранного просмотра слайдов с возможностью переключения в стандартый режим отображения сайта (для маленьких экранов).
<scriptsrc="screen-roller.js"></script><linkhref="screen-roller.css" rel="stylesheet"><divstyle="width: 100%; height: 100%; position: absolute;"><divclass="roller"><divclass="screen">Содержимое слайда</div><divclass="screen">Содержимое слайда</div><divclass="screen">Содержимое слайда</div></div></div>$('.roller').screenroller({modules: {keyboard: {next: [83],prev: [87]},hash: true,'simple-page': {minWidth: 700,minHeight: 400}}});speed: (по умолчанию500) скорость анимацииaxis: (по умолчаниюy) направление анимацииmodules: список модулей, которые будут проинициализированы. По умолчанию параметрmodulesимеет следующее вид:
{'slide-animation': true,touch: {mouseEmulate: true},wheel: true,keyboard: {next: [34,40],prev: [33,38],last: [35],first: [36]},hash: false,menu: false,'simple-page': false}Вся функциональность плагина основана на его модулях. Каждый модуль отвечает за выполнение небольшой задачи (обработка событий колеса мыши, обработка тач-событий и т.д.).
Для инициализации модуля необходимо добавить его название (со значением true или {}, либо с набором опций) в список модулей при вызове метода screenroller.
Большинство модулей будут инициализироваться по умолчанию. Для отмены инициальзации необходимо указать значение false для имени модуля.
$('.roller').screenroller({modules: {keyboard: false,//отменяем инициализацию модуля (по умолчанию модуль инициализируется)hash: true,//инициализируем модуль (по умолчанию модель не инициализируется)'simple-page': {// инициализируем модуль c набором параметров minWidth: 500,minHeight: 700}}});У каждого модуля есть стандартный набор методов:
enable- включить модульdisable- выключить модульdestruct- удалить модуль
А также стандартное свойство:
enabled(trueилиfalse) - хранит переменную состояния включен или выключен
Некоторые модули могут именть дополнительные наборы методов и свойств
####Например
varroller=$('.roller').screenroller().rollerconsole.log(roller.modules)// список всех проинециализированных модулейconsole.log(roller.modules.keyboard)// содержимое модуля keyboardconsole.log(roller.modules.keyboard.enabled)// true = модуль включенconsole.log(roller.modules.keyboard.disable())// выключаем модуль keyboardconsole.log(roller.modules.keyboard.enabled)// false = модуль отключенconsole.log(roller.modules.keyboard.enable())// включаем модуль keyboardconsole.log(roller.modules.keyboard.destruct())// удаляем модуль keyboard undefinedconsole.log(roller.modules.keyboard)// undefined - модуль был удаленОтвечает за анимированные переходы между слайдами
Отвечает за переход в режим обычной страницы, когда размеры роллера становятся меньше заданных. У данного модуля есть свой
обработчик события resize, который включает и выключает модуль в зависимости от размеров роллера.
watching: хранит переменную состояния включен или выключен слушатель события resize
offWatching: отключает слушателя событияresizeonWatching: включает слушателя событияresize
minWidth:(по умолчанию700) минимальная ширина при которой включается режим "simple-page"minHeight:(по умолчанию700) минимальная высота при которой включается режим "simple-page"
Отвечает за переключение слайдов при помощи клавиатуры
next: (по умолчанию[ 34, 40 ]) список кнопок для перехода к следующему слайдуprev: (по умолчанию[ 33, 38 ]) список кнопок для перехода к предыдущему слайдуlast: (по умолчанию[ 35 ]) список кнопок для перехода к последнему слайдуfirst: (по умолчанию[ 36 ]) список кнопок для перехода к первому слайду
Отвечает за обработку touch-событий
mouseEmulate: (по умолчаниюtrue) эмуляция touch-событий при помощи мыши
Отвечает за переключение слайдов при помощи колеса мыши
Отвечает за работу hash-навигации. Для правильной работы необходимо к слайдам добавлять атрибут data-hash
<divstyle="width: 100%; height: 100%; position: absolute;"><divclass="roller"><divclass="screen" data-hash="first">Содержимое слайда</div><divclass="screen" data-hash="second">Содержимое слайда</div><divclass="screen" data-hash="third">Содержимое слайда</div></div></div>screensHash: список соответствия хеш-значений с позицией слайда
Отвечает за переключение слайдов при помощи меню
items: jQuery-объект со списком элементов меню $('.menu li')
<divstyle="width: 100%; height: 100%; position: absolute;"><divclass="roller"><divclass="screen">Содержимое слайда</div><divclass="screen">Содержимое слайда</div><divclass="screen">Содержимое слайда</div></div></div><ulclass="menu"><li>1</li><li>2</li><li>3</li></ul><script>$('.roller').screenroller({modules: {menu: {items: $('.menu li')}}});</script>В зависимости от включенных модулей проиницилизированный jQuery-объект может генерировать следующие события:
move-screen: смена текущего слайдаmodule-has-turned-on: включение модуляtouch-start: внутренне событие touch-starttouch-move: touch-movetouch-end: touch-endtouch-cansel: touch-canselrestore-offset: restore-offset (анимация к текущему слайду)finished-animation: окончание анимацииrequest-move: инициализация модулем смены текущего слайда
var$roller=$('.roller').screenroller();$roller.on('move-screen',function(e,data){console.log(data);});$roller.on('finished-animation',function(e,data){console.log(data);});moveTo(direction, [speed]): скроллим к следующему слайду
var$roller=$('.roller').screenroller();$roller.moveTo('next');// скроллим к следующему слайду (скорость анимации 0)$roller.moveTo('prev',500);// скроллим к предыдущему слайду (скорость анимации 500)$roller.moveTo(4,100);// скроллим к слайду с индексом "4" (скорость анимации 100)