Работа с BX.SidePanel в Битрикс24

• 24 января 2023
• Admin
• 988
• Нет комментариев

Бывает есть необходимость открыть компонент или просто какое то содержимой в боковой панели в Битрикс24 при нажатии на ссылку или кнопку. В данной статье я покажу принцип работы с данной панелью

Принцип работы

Слайдер - это боковая панель, которая умеет открывать страницы сайта в iframe'е, а также отображать произвольное содержимое внутри себя. Применение iframe'а позволяет использовать готовые компоненты, работающие на обычных страницах сайта.

Слайдер выезжает справа налево, занимая все пространство сверху донизу. Для корректной работы интерфейса отключается скроллинг страницы и добавляется padding-right (равный ширине отключенного скролла) для всего содержимого.

Во время открытия показывается лоадер, который исчезает, как только содержимое боковой панели загружено. Слайдер не уничтожается после закрытия. Если открыть слайдер заново, он появится мгновенно с тем же контентом. Кеширование закрытого слайдера можно отменить опцией cacheable=false.

Из слайдера можно открыть другой слайдер. В этом случае новым слайдер появится поверх предыдущего. На всем жизненном цикле работы слайдера (открытие, загрузка, закрытие, удаление) происходят соответствующие события. Эти события генерируются как в родительском окне, так и в iframe'е.

Открытие слайдера происходит двумя способами:

• С помощью вызова метода BX.SidePanel.Instance.open().
• Через нажатие на обычную ссылку на странице. Этот метод требует предварительной регистрации правил с шаблонами ссылок

Подключение на PHP-странице

\CJSCore::init("sidepanel");

Использование в JavaScript

Все JavaScript-классы слайдера находятся в namespace'е BX.SidePanel. Для доступа к API слайдера используется объект-синглтон BX.SidePanel.Instance.

BX.SidePanel.Instance.open("/mypage.php"); //Открыть в слайдере страницу mypage.php