Подборка полезных функций при разработке сайтов на 1С-Битрикс.
amCharts
Очень часто при создании сайта на 1С-Битрикс требуется оформить некоторое количество данных в виде графиков. Так сложилось, что чаще всего, разработчики используют сторонние решения, тогда как в 1С-Битрикс уже все есть для этого.
Одна из самых популярных библиотек для работы с графиками и диаграммами. Штатный вариант подключения библиотеки
CJSCore::Init(['amcharts']);
Количество доступных вариантов типов графиков достаточно, для решения большинства задач:
amcharts - Базовая библиотека
amcharts_funnel – Воронка, пирамида Маслоу
amcharts_gauge – Диаграмма в виде спидометра
amcharts_pie – Круговая диаграмма
amcharts_radar – Радарная диаграмма
amcharts_serial – Обычные графики
amcharts_xy – График XY
MaskedInput
Если в проект есть формы, в которых используются поля для ввода телефонов или другой информации по шаблону, не обязательно использовать jquery.maskedinput. Есть более простое решение:
<?php
CJSCore::Init(['masked_input']);
?>
<input type="text" id="phone" placeholder="Укажите ваш номер телефона">
<script>
BX.ready(function() {
var result = new BX.MaskedInput({
mask: '+7 999 999 99 99', // устанавливаем маску
input: BX('phone'),
placeholder: '_' // символ замены +7 ___ ___ __ __
});
result.setValue('9000000000'); // значение по умолчанию
});
</script>
PhoneNumber
Используете только маски для номеров телефонов? Есть специальное решение для них:
<?php
CJSCore::Init(['phone_number']);
?>
<span id="flag"></span>
<input type="text" id="number" placeholder="Укажите ваш номер телефона">
<script>
BX.ready(function() {
new BX.PhoneNumber.Input({
node: BX('number'),
forceLeadingPlus: false, // поставить + перед номером телефона
flagNode: BX('flag'), //
flagSize: 16, // Размер иконки флага [16, 24, 32]
defaultCountry: 'ru', // Страна по-умолчанию
onChange: function(e) {
// вызывается при изменении значения
}
});
});
</script>
PopupWindowManager
С помощью данной библиотеки можно сделать вывод не только диалоговые окна, но и полноценные всплывающие страницы:
<?php
CJSCore::Init(['popup']);
?>
<script>
// BX.element - элемент, к которому будет привязано окно, если null – окно появится по центру экрана
BX.ready(function () {
var popup = BX.PopupWindowManager.create("popup-message", BX('element'), {
content: 'Контент, отображаемый в теле окна',
width: 400, // ширина окна
height: 100, // высота окна
zIndex: 100, // z-index
closeIcon: {
// объект со стилями для иконки закрытия, при null - иконки не будет
opacity: 1
},
titleBar: 'Заголовок окна',
closeByEsc: true, // закрытие окна по esc
darkMode: false, // окно будет светлым или темным
autoHide: false, // закрытие при клике вне окна
draggable: true, // можно двигать или нет
resizable: true, // можно изменять размер
min_height: 100, // минимальная высота окна
min_width: 100, // минимальная ширина окна
lightShadow: true, // использовать светлую тень у окна
angle: true, // появится уголок
overlay: {
// объект со стилями фона
backgroundColor: 'black',
opacity: 500
},
buttons: [
new BX.PopupWindowButton({
text: 'Сохранить', // текст кнопки
id: 'save-btn', // идентификатор
className: 'ui-btn ui-btn-success', // доп. классы для кнопок
events: {
click: function() {
// Событие при клике на кнопку
}
}
}),
new BX.PopupWindowButton({
text: 'Копировать',
id: 'copy-btn',
className: 'ui-btn ui-btn-primary',
events: {
click: function() {
}
}
})
],
events: {
onPopupShow: function() {
// Событие при показе окна
},
onPopupClose: function() {
// Событие при закрытии окна
}
}
});
popup.show();
});
</script>
PopupMenu
Отлично подходит для создания всплывающих меню и списков в стилистике Битрикс 24
<?php
CJSCore::Init(['popup']);
?>
<div style="background: red; width: 100px; height: 40px; margin-left: 500px" id="element"></div>
<script>
BX.ready(function () {
BX.bind(BX('element'), 'click', function () {
BX.PopupMenu.show('demo-popup-menu', BX('element'), [
{
text: 'Обычный пункт', // Название пункта
href: '#', // Ссылка
className: 'menu-popup-item menu-popup-no-icon', // Дополнительные классы
onclick: function(e, item){
BX.PreventDefault(e);
// Событие при клике на пункт
}
},
{
text: 'Выбранный пункт',
href: '#',
className: 'menu-popup-item menu-popup-item-accept'
}
], {
autoHide : true, // Закрытие меню при клике вне меню
offsetTop: 0, // смещение от элемента по Y
zIndex: 10000, // z-index
offsetLeft: 100, // смещение от элемента по X
angle: { offset: 45 }, // Описание уголка, при null – уголка не будет
events: {
onPopupShow: function() {
// Событие при показе меню
},
onPopupClose : function(){
// Событие при закрытии меню
},
onPopupClose : function(){
// Событие при уничтожении объекта меню
}
}
});
});
});
</script>
SpotLight
Если на сайте есть пошаговая инструкция по работе с системой и нужно провести пользователя по каждому из них, используйте библиотеку SpotLight. Анимированные круги точно привлекут внимание.
<?php
CJSCore::Init(['spotlight']);
?>
<div style="background: red; width: 100px; height: 40px; margin-left: 500px" id="element"></div>
<script>
BX.ready(function () {
var obj = new BX.SpotLight({
renderTo: BX('element'), // Привязать к элементу
top: 0, // позиционирование относительно элемента
left: 0, // позиционирование относительно элемента
content: '1. Сначала нажмите на эту кнопку',
lightMode: false, // Темный режим или светлый
observerTimeout: 10000, // Таймаут
events: {
onPopupShow: function() {
// Событие при показе подсказки
}
}
});
obj.show();
});
</script>
ColorPicker
Для выбора цвета в формах не обязательно использовать стороннюю библиотеку.
<?php
CJSCore::Init(['color_picker']);
?>
<input type="text" id="example">
<script>
BX.ready(function() {
var element = BX('example');
BX.bind(element, 'focus', function () {
new BX.ColorPicker({
bindElement: element, // Элемент, к которому будет прикреплена область с выбором цвета
defaultColor: '#FF6600', // Цвет по-умолчанию
allowCustomColor: true, // Разрешить указывать произвольный цвет
onColorSelected: function (item) {
element.value = item // Вызывается при выборе цвета
},
popupOptions: {
angle: true, // треугольник
autoHide: true, // Закрытие по клику вне области
closeByEsc: true, // Закрытие по esc
events: {
onPopupClose: function () {
// Вызывается при закрытии окна
}
}
}
}).open();
})
}
</script>
Списки
На странице нужно оформить выпадающие списки, с поиском и множественным выбором? Такой функционал тоже есть.
<?php
CJSCore::Init(['ui']);
$items = [
['NAME' => 'Первый вариант', 'VALUE' => '1'],
['NAME' => 'Второй вариант', 'VALUE' => '2'],
];
?>
<div style="padding: 100px" id="filter">
<div data-name="SELECT_SINGLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
<span class="main-ui-control-field-label">Одиночный выбор</span>
<div data-name="SELECT_SINGLE"
data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => false]); ?>'
id="select" class="main-ui-control main-ui-select">
<span class="main-ui-select-name">Выберите</span>
<span class="main-ui-square-search">
<input type="text" tabindex="2" class="main-ui-square-search-item">
</span>
</div>
</div>
<div data-name="SELECT_MULTIPLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
<span class="main-ui-control-field-label">Множественный выбор</span>
<div data-name="SELECT_MULTIPLE"
data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => true]); ?>'
id="select2" class="main-ui-control main-ui-multi-select">
<span class="main-ui-square-container"></span>
<span class="main-ui-square-search"><input type="text" tabindex="2" class="main-ui-square-search-item"></span>
<span class="main-ui-hide main-ui-control-value-delete"><span class="main-ui-control-value-delete-item"></span></span>
</div>
</div>
<span class="ui-btn-primary ui-btn" id="update_filter">Найти</span>
</div>
Перенос скриптов
В 1С-Битрикс есть возможность указать в настройках объединение и перенос скриптов вниз страницы. Но, если у вам необходимо задавать цели для счетчиков Яндекса или Гугла, то они должны подключаться в шапке. Следующий код запрещает перенос скриптов вниз страницы
<script type="text/javascript" data-skip-moving="true"></script>
AJAX для компонентов
Если пишите свой компонент и нужно сделать запрос для получения информации на сервере, можно использовать следующий код:
var query = {
c: 'reimax:maps',
action: 'search',
mode: 'class',
};
var data = {
search_cat_1: search_cat_1 ? search_cat_1 : 0,
search_cat_2: search_cat_2 ? search_cat_2 : 0,
sessid: BX.message('bitrix_sessid')
};
$.ajax({
url: '/bitrix/services/main/ajax.php?' + $.param(query, true),
method: 'POST',
data: data,
success: function (data) {
// обработка результатов запроса
}
});
И на сервере
public function searchAction($search_cat_1, $search_cat_2)
{
$this->_checkModules();
// обрабатываем данные запроса и возвращаем результат
return $arParams;
}
Не забываем про настройки
public function configureActions()
{
return [
'search' => [
'prefilters' => [
//new ActionFilter\Authentication(),
new ActionFilter\HttpMethod(
array(ActionFilter\HttpMethod::METHOD_GET, ActionFilter\HttpMethod::METHOD_POST)
),
new ActionFilter\Csrf(),
],
'postfilters' => []
]
];
}
Для получения значений настроек компонентов, при ajax запросе, можно использовать следующий метод
$signer = new \Bitrix\Main\Component\ParameterSigner;
return [
'params' => $signer->unsignParameters($this->__name, $signedParameters),
];