Главная Использование Опции Автор

Плагин jQuery для эффекта переворачивания страниц

turn.js

плагин jQuery, который добавляет эффект реального переоврачивания страниц при переходе между разделами.

  • + Использует аппаратное ускорение
  • + Работает на мобильных устройствах
  • + Легко настраивать
  • + Легкий, только 15K

Как использовать

Пример:

#magazine{
	width:800px;
	height:400px;
}
#magazine .turn-page{
	width:400px;
	height:400px;
	background-color:#ccc;
}
<div id='magazine'>
	<div> Page 1 </div>
	<div> Page 2 </div>
	<div> Page 3 </div>
</div>
$('#magazine').turn();

И все!

Опции

Страница с описанием прокручивается вниз


Конструктор

$('selector').turn([опции]);

Создает экземпляр turn.

$('selector').turn({page:1});

Параметры:

  • опции
    • page (тип: number, по умолчанию: 1)
    • shadows (тип: boolean, по умолчанию: true)
    • duration (тип: number, по умолчанию: 600)
    • acceleration (тип: boolean, по умолчанию: true)

$('selector').turn(свойство | метод [, параметры]);

Схема, которая используется для вызова методов или определения свойств

Свойства

Страница

Возвращает текущую страницу.

alert($('selector').turn('page'));

view

Возвращает текущий вид.

alert($('selector').turn('view'));

Методы

page

Переход к заданной странице.

$('selector').turn('page', 2);

next

Переход к следующему виду.

$('selector').turn('next');

previous

Переход к предыдущему виду.

$('selector').turn('previous');

stop

Остановить текущую анимацию.

$('selector').turn('next').turn('stop');

resize

сбросить размеры всех контейнеров, которые используются плагином.

$('selector').turn('resize');

disable

Включает и отключает эффект.

$('selector').turn('disable', true);

События

turned

Генерируется сразу после переворота страницы.

$('selector').bind('turned', function(e, page, pageObj) {
	alert('Page turned to '+page);
});

start

Генерируется при появлении сложенной страницы.

$('selector').bind('start', function(e, turn) {
	console.log('Is it turning?' + turn); 
});

end

Генерируется при исчезании свернутой страницы.

$('selector').bind('end', function(e) {  });

Классы CSS

.p[0-9]+

.turn-page

.

Автор плагина: Emmanuel Garcia.

Перевод описания: команда сайта RUSELLER.COM

Материалы сайта RUSELLER.COM