Виджет

Виджет reservi.ru предназначен для записи на прием в салонах красоты.
Виджет размещается на сайте, и предоставляет удобный и простой интерфейс онлайн записи на прием в салоны красоты.

Виджет предоставляется как плагин JavaScript бибилотеки jQuery.

После подключения плагина, можно вставить код вызова плагина для HTML элемента, при нажатии на который необходимо открывать окно виджета.

/* Данные библиотеки подключаем в блоке head страницы: */
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>	<!-- сначала, подключение библиотеки "jQuery"  -->
<script src="//reservi.ru/2.0/js/widget.min.js"></script>				<!-- подключение плагина "reservi" -->

/* А вызов виджета можно делать в любом месте html-страницы: */
<script>
	$(function(){
		$('.salon-button').reservi();						// код вызова плагина
	});
</script>

После загрузки страницы, при нажатии на элемент с классом .salon-button будет открываться окно виджета.

1. Параметры работы виджета (код салона)
2. Параметры отображения виджета (визуальные составляющие)

1. Параметры работы виджета являются объектом, задающим элемент salon (нужно задать обязательно),
salon - салон в который будет производится запись.
Для упрощения, так-же, можно передать строковое или числовое значение идентификатора салона.

{
	salon: '12345'	// Идентификатор салона (в базе reservi.ru либо код салона в 1С)
}

// запускаем виджет для записи в салон с идентификатором 12345:
$('.salon-button').reservi({salon: '12345'});

2. Парметры отображения виджета являются объектом с настройками отображения и анимации виджета. Передаются только в настройки плагина вторым параметром.

$('.salon-button').reservi(
	null,	// настройки работы виджета

	{
		// настройки отображения со значениями по умолчанию
		modal_transition: 'reservi-transition-fade',	// css-скласс задающий анимацию появления окна-виджета
		width: 800,          				// ширина окна-виджета
		height: 640,          				// высота окна-виджета
		lockBody: 1,          				// блокировать прокрутку окна, 1 - блокировать
		blur: 0          				// применять размытие заднего фона, вместо затемнения, 1 - применять
	}
);

Параметр modal_transition - задает название css класса описывающего анимацию появляения окна-виджета. Доступные css классы:

• reservi-transition-fade - плавно появляется из прозрачности 0. значение по умолчанию
• reservi-transition-fade-down - плавно появляется из прозрачности 0 и опускается с верха основного экрана. значение по умолчанию
• reservi-transition-flip - плавно появляется из прозрачности 0 и разворачивается из положения "профиль"
• reservi-transition-collapse - раздвигается из полоски. увелчиение выоты с нулевой до полной

Можно задавать и свои классы анимации показа/скрытия вдижета. Для этого необходимо:

1. На странице вызова задать css правило определяющее начальное(закрытое) состояние окна
2. Задать css правило определяющее конечное(открытое) состояние окна, селектор которого оканчивается классом .in
3. Задать в параметры отображения плагина(modal_transition) название созданного css свойства

// CSS правила
.fader {
	opacity:0;
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}

.fader.in {
	opacity:1;
}

// вызов плагина
$('.salon-button').reservi(null, {modal_transition: 'fader'});