Параметры

Функция initReadMore позволяет настроить поведение плагина «Читать далее» через объект параметров. Это дает возможность адаптировать отображение контента, анимацию и взаимодействие к потребностям вашего сайта.

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

Ниже приведено подробное описание всех доступных параметров:

Опции
Тип
По умолчанию
Описание
collapsedHeight
Число
250

Определяет начальную высоту свернутого контента в пикселях. Если содержимое короче этой высоты, кнопка «Читать далее» не отображается.

speed
Число
300

Задает длительность анимации разворачивания/сворачивания в миллисекундах. Для сворачивания в режиме animationMode: 'js' скорость уменьшается вдвое.

moreLink
Строка
<span>Читать далее</span>

HTML-строка для кнопки «Читать далее», отображаемой в свернутом состоянии. Вставляется в элемент <button>. Для безопасности HTML очищается от потенциально опасных атрибутов.

lessLink
Строка
<span>Закрыть</span>

HTML-строка для кнопки «Закрыть», отображаемой в развернутом состоянии. Вставляется в элемент <button>. Поддерживает очистку HTML от опасного кода.

hideButtonCollapse
Логический
false

Если true, кнопка скрывается после разворачивания контента, позволяя избежать лишних элементов интерфейса.

disableCollapse
Логический
false

Если true, отключает функцию сворачивания для элемента или диапазона ширины экрана, отображая весь контент.

animationMode
Строка
js

Определяет тип анимации:

  • js: анимация через JavaScript с плавным изменением высоты.
  • css: анимация через CSS, добавляется класс cs_readmore-animation для стилизации.
animationType
Строка
ease-in-out

Задает тип перехода для анимации в режиме animationMode: 'js'. Доступные значения: linear, ease, ease-in, ease-out, ease-in-out.

scrollToTopOnCollapse
Логический
true

Если true, страница плавно прокручивается к верхней части контента после его сворачивания, улучшая удобство просмотра.

breakpoints
Объект
{}

Позволяет задавать различные значения параметров в зависимости от ширины экрана. Ключи — максимальная ширина экрана в пикселях, значения — объект с параметрами.

Пример:


								breakpoints: {
									768: {
										collapsedHeight: 150,
										moreLink: '<span>Читать далее</span>'
									},
									1200: { collapsedHeight: 200 }
								}

Если ширина экрана больше максимального ключа, сворачивание отключается.

beforeToggle
Функция
null

Коллбэк, вызываемый перед началом разворачивания/сворачивания. Получает аргументы: button (кнопка), element (элемент контента), isExpanded (логическое значение состояния).

Пример:


								beforeToggle: (button, element, isExpanded) => {
									console.log('Переключение начнется, состояние:', isExpanded);
								}
afterToggle
Функция
null

Коллбэк, вызываемый после завершения разворачивания/сворачивания. Получает те же аргументы: button, element, isExpanded.

Пример:


								afterToggle: (button, element, isExpanded) => {
									console.log('Переключение завершено, состояние:', isExpanded);
								}
blockProcessed
Функция
null

Коллбэк, вызываемый после обработки элемента плагином. Получает аргументы: element (элемент контента), needsToggle (логическое значение, нужна ли кнопка).

Пример:


								blockProcessed: (element, needsToggle) => {
									console.log('Элемент обработан, нужна кнопка:', needsToggle);
								}

Пример настроек

Для использования плагина инициализируйте его через функцию initReadMore, передав селектор и объект параметров. Это позволяет адаптировать поведение к вашему сайту.

Ниже приведен пример инициализации с различными параметрами:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>Подробнее</span>',
							lessLink: '<span>Свернуть</span>',
							animationMode: 'js',
							animationType: 'ease-in-out',
							scrollToTopOnCollapse: true,
							hideButtonCollapse: true,
							disableCollapse: false,
							breakpoints: {
								576: {
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Показать</span>',
									lessLink: '<span>Скрыть</span>'
								},
								768: {
									collapsedHeight: 150,
									speed: 300
								},
								1024: {
									disableCollapse: true
								}
							},
							beforeToggle: (button, element, isExpanded) => {
								console.log('Начинается переключение:', isExpanded);
							},
							afterToggle: (button, element, isExpanded) => {
								console.log('Переключение завершено:', isExpanded);
							},
							blockProcessed: (element, needsToggle) => {
								console.log('Обработка элемента завершена, кнопка:', needsToggle);
							}
						});
					});

Этот код применяет плагин ко всем элементам с классом .readmore, настраивая высоту, анимацию, текст кнопок и адаптивное поведение.

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