Модуль презентации элементов страницы (module_presentation)

---

Оглавление

1. Подключение
2. Активация
3. Кадры
4. Методы
   • back
   • next
   • view_name
   • view_step
   • clean
   • close
5. Локализация

Подключение

Для подключения модуля необходимо добавить в html следующие строки

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="/module_presentation.js"></script>
<link href="/module_presentation.css" rel="stylesheet">

Оглавление

Активация

module_presentation.steps($steps)

• $steps - массив кадров презентации

Запуск презентации

module_presentation.veiw()

Оглавление

Кадры

Кадры оформляются через массив объектов

$steps = [
	{
		'name': 'step_1',
		'selector': '#id_element',
		'description': $description,
		'position': 'bottom',
		'size': [
			$top,
			$left,
			$width,
			$height,
		],
	},
	{следующий кадр}
];

• name - имя кадра (для метода view_name)
• selector - селектор элемента, который будет выделен областью.
• description - Текс-описание в формате html
• position - расположение описания относительно выделенной области. Возможные значения:
  • top - сверху
  • bottom - снизу (по умолчанию)
  • left - слева
  • right - справа
• size (необязательное, приоритетное) - область для выделения через координаты:
  • $top - отступ от левой границы документа
  • $left - отступ от верхней границы документа
  • $width - ширина блока
  • $height - высота блока

К оглавлению

Методы

back

Показать предыдущий кадр

module_presentation.back()

К оглавлению

next

Показать следующий кадр

module_presentation.next()

К оглавлению

view_name

Показать кадр - по имени кадра

module_presentation.view_name($name)

• $name - имя кадра

К оглавлению

view_step

Показать кадр - по порядковому номеру

module_presentation.view_step($i)

• $i - Порядковый номер кадра (первый элемент - 0)

К оглавлению

close

Очистить все кадры презентации

module_presentation.clean()

К оглавлению

close

Закрыть презентацию

module_presentation.close()

К оглавлению

Локализация

Поменять текст кнопок вы можете через следующие свойства

module_presentation.options.text.back = 'Назад';
module_presentation.options.text.next = 'Далее';
module_presentation.options.text.close = 'Выход';

Оглавление