1С-Битрикс JS

Практически в каждом проекте требуются различные JS-библиотеки: от слайдеров и всплывающих окон, до сложных графиков.

Часто принимается решение использовать сторонние решения, но под капотом 1С-Битрикс припасено множество полезных функций.

amCharts

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

Подключение библиотеки amCharts в 1С-Битрикс осуществляется стандартным способом: CJSCore::Init(['amcharts']);

Подключать библиотеку необходимо в зависимости от типа графика:

MaskedInput

В 1С-Битриксе есть библиотека для указания масок ввода – masked_input, которая вполне может стать альтернативой jquery.maskedinput.

 1<?php
 2 
 3CJSCore::Init(['masked_input']);
 4?>
 5 
 6<input type="text" id="phone" placeholder="Укажите ваш телефон" />
 7 
 8<script>
 9    BX.ready(function() {
10        var result = new BX.MaskedInput({
11            mask: '+7 999 999 99 99', // устанавливаем маску
12            input: BX('phone'),
13            placeholder: '_' // символ замены +7 ___ ___ __ __
14        });
15 
16        result.setValue('9000000000'); // устанавливаем значение
17    });
18</script>

PhoneNumber

Хотя для масок телефонного номера лучше использовать другую библиотеку — phone_number.

 1<?php
 2 
 3CJSCore::Init(['phone_number']);
 4?>
 5 
 6<span id="flag"></span>
 7<input type="text" id="number" placeholder="Укажите ваш телефон" />
 8 
 9<script>
10    BX.ready(function() {
11        new BX.PhoneNumber.Input({
12            node: BX('number'),
13            forceLeadingPlus: false, // принудительно установить +
14            flagNode: BX('flag'), //
15            flagSize: 16, // Размер флага [16, 24, 32]
16            defaultCountry: 'ru', // Страна по-умолчанию
17            onChange: function(e) {
18              // вызывается при изменении значения
19            }
20        });
21    });
22</script>

PopupWindowManager

Всплывающие окна в 1С-Битрикс можно организовать с помощью BX.PopupWindowManager. Данная библиотека подходит, как для диалоговых окон, так и полноценных всплывающих страниц:

 1<?php
 2 
 3CJSCore::Init(['popup']);
 4?>
 5 
 6<script>
 7    // BX.element - элемент, к которому будет привязано окно, если null – окно появится по центру экрана
 8 
 9    BX.ready(function () {
10        var popup = BX.PopupWindowManager.create("popup-message", BX('element'), {
11            content: 'Контент, отображаемый в теле окна',
12            width: 400, // ширина окна
13            height: 100, // высота окна
14            zIndex: 100, // z-index
15            closeIcon: {
16                // объект со стилями для иконки закрытия, при null - иконки не будет
17                opacity: 1
18            },
19            titleBar: 'Заголовок окна',
20            closeByEsc: true, // закрытие окна по esc
21            darkMode: false, // окно будет светлым или темным
22            autoHide: false, // закрытие при клике вне окна
23            draggable: true, // можно двигать или нет
24            resizable: true, // можно ресайзить
25            min_height: 100, // минимальная высота окна
26            min_width: 100, // минимальная ширина окна
27            lightShadow: true, // использовать светлую тень у окна
28            angle: true, // появится уголок
29            overlay: {
30                // объект со стилями фона
31                backgroundColor: 'black',
32                opacity: 500
33            },
34            buttons: [
35                new BX.PopupWindowButton({
36                    text: 'Сохранить', // текст кнопки
37                    id: 'save-btn', // идентификатор
38                    className: 'ui-btn ui-btn-success', // доп. классы
39                    events: {
40                      click: function() {
41                          // Событие при клике на кнопку
42                      }
43                    }
44                }),
45                new BX.PopupWindowButton({
46                    text: 'Копировать',
47                    id: 'copy-btn',
48                    className: 'ui-btn ui-btn-primary',
49                    events: {
50                      click: function() {
51 
52                      }
53                    }
54                })
55            ],
56            events: {
57               onPopupShow: function() {
58                  // Событие при показе окна
59               },
60               onPopupClose: function() {
61                  // Событие при закрытии окна
62               }
63            }
64        });
65 
66        popup.show();
67    });
68</script>

PopupMenu

Выпадающие меню и списки в стиле Битрикс24 можно сделать с помощью PopupMenu:

 1<?php
 2 
 3CJSCore::Init(['popup']);
 4?>
 5 
 6<div style="background: red; width: 100px; height: 40px; margin-left: 500px" id="element"></div>
 7 
 8<script>
 9    BX.ready(function () {
10        BX.bind(BX('element'), 'click', function () {
11            BX.PopupMenu.show('demo-popup-menu', BX('element'), [
12                {
13                    text: 'Обычный пункт', // Название пункта
14                    href: '#', // Ссылка
15                    className: 'menu-popup-item menu-popup-no-icon', // Дополнительные классы
16                    onclick: function(e, item){
17                       BX.PreventDefault(e);
18                       // Событие при клике на пункт
19                    }
20                },
21                {
22                    text: 'Выбранный пункт',
23                    href: '#',
24                    className: 'menu-popup-item menu-popup-item-accept'
25                }
26            ], {
27              autoHide : true, // Закрытие меню при клике вне меню
28              offsetTop: 0, // смещение от элемента по Y
29              zIndex: 10000, // z-index
30              offsetLeft: 100,  // смещение от элемента по X
31              angle: { offset: 45 }, // Описание уголка, при null – уголка не будет
32              events: {
33                 onPopupShow: function() {
34                    // Событие при показе меню
35                 },
36                 onPopupClose : function(){
37                    // Событие при закрытии меню
38                 },
39                 onPopupClose : function(){
40                    // Событие при уничтожении объекта меню
41                 }
42              }
43            });
44        });
45    });
46</script>

SpotLight

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

 1<?php
 2 
 3CJSCore::Init(['spotlight']);
 4?>
 5 
 6<div style="background: red; width: 100px; height: 40px; margin-left: 500px" id="element"></div>
 7 
 8<script>
 9    BX.ready(function () {
10        var obj = new BX.SpotLight({
11            renderTo: BX('element'), // Привязать к элементу
12            top: 0, // позиционирование относительно элемента
13            left: 0, // позиционирование относительно элемента
14            content: '1. Сначала нажмите на эту кнопку',
15            lightMode: false, // Темный режим или светлый
16            observerTimeout: 10000, // Таймаут автопоказа
17            events: {
18                onPopupShow: function() {
19                  // Событие при показе подсказки
20                }
21            }
22 
23        });
24 
25        obj.show();
26    });
27</script>

ColorPicker

Если необходимо выбрать цвет на сайте – для этого есть ColorPicker.

 1<?php
 2 
 3CJSCore::Init(['color_picker']);
 4?>
 5 
 6<input type="text" id="example" />
 7 
 8<script>
 9  BX.ready(function() {
10    var element = BX('example');
11 
12    BX.bind(element, 'focus', function () {
13        new BX.ColorPicker({
14            bindElement: element, // Элемент, к которому будет прикреплена область с выбором цвета
15            defaultColor: '#FF6600', // Цвет по-умолчанию
16            allowCustomColor: true, // Разрешить указывать произвольный цвет
17            onColorSelected: function (item) {
18                element.value = item // Вызывается при выборе цвета
19            },
20            popupOptions: {
21                angle: true, // треугольник
22                autoHide: true, // Закрытие по клику вне области
23                closeByEsc: true, // Закрытие по esc
24                events: {
25                    onPopupClose: function () {
26                        // Вызывается при закрытии окна
27                    }
28                }
29            }
30        }).open();
31    })
32  }
33</script>

Списки

Чтобы сделать красивые выпадающие списки в стиле Битрикс24, необходимо правильно разметить html-вёрстку:

 1<?php
 2CJSCore::Init(['ui']);
 3 
 4$items = [
 5    ['NAME' => 'Первый вариант', 'VALUE' => '1'],
 6    ['NAME' => 'Второй вариант', 'VALUE' => '2'],
 7];
 8?>
 9 
10<div style="padding: 100px" id="filter">
11    <div data-name="SELECT_SINGLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
12        <span class="main-ui-control-field-label">Одиночный выбор</span>
13        <div data-name="SELECT_SINGLE"
14             data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
15             data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => false]); ?>'
16             id="select" class="main-ui-control main-ui-select">
17 
18            <span class="main-ui-select-name">Выберите</span>
19            <span class="main-ui-square-search">
20            <input type="text" tabindex="2" class="main-ui-square-search-item">
21        </span>
22        </div>
23    </div>
24 
25    <div data-name="SELECT_MULTIPLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
26        <span class="main-ui-control-field-label">Множественный выбор</span>
27        <div data-name="SELECT_MULTIPLE"
28             data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
29             data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => true]); ?>'
30             id="select2" class="main-ui-control main-ui-multi-select">
31 
32            <span class="main-ui-square-container"></span>
33            <span class="main-ui-square-search"><input type="text" tabindex="2" class="main-ui-square-search-item"></span>
34            <span class="main-ui-hide main-ui-control-value-delete"><span class="main-ui-control-value-delete-item"></span></span>
35        </div>
36    </div>
37 
38    <span class="ui-btn-primary ui-btn" id="update_filter">Найти</span>
39</div>

Минусы этого подхода – результаты списков придётся получать с помощью JavaScript.

 1<script>
 2    BX.ready(function() {
 3        var filter = BX('filter'),
 4            submit = BX('update_filter');
 5 
 6        BX.bind(submit, 'click', function() {
 7            var fields = BX.findChildren(filter, {
 8                attribute: 'data-name',
 9                className: 'main-ui-control'
10            }, true);
11 
12            fields.forEach(function(element){
13                console.log(element.getAttribute('data-name'));
14                console.log(JSON.parse(element.getAttribute('data-value')));
15            });
16        })
17    })
18</script>