Введение
Введение
В данном разделе представлено описание Javascript-библиотеки Bitrix Framework
Документация по данной библиотеке предполагает уверенные знания разработчика в JavaScript.
Javascript-библиотека Битрикс очень разнообразна. Основным (главным) классом является класс BX. Также к услугам разработчика представлено достаточно большое количество расширений. Например, расширение по работе с датами. К сожалению, не все расширения описаны в документации, но мы постоянно работаем над этим и количество описанных расширений растет.
Для подключения библиотеки предусмотрен серверный метод
CJSCore::Init ( [array $arExtensions] )
Метод подключает ядро, стили и языковые сообщения библиотеки.
Параметры функции
| Параметр | Описание |
|---|---|
| $arExtensions | Массив требуемых расширений библиотеки. Необязательный. |
К примеру, код подключения ядра и двух расширений:
CJSCore::Init(array('ajax', 'window'))
Использование своего кода
JavaScript-код пишется в отдельном js-файле шаблона сайта, js-файле шаблона компонента, или отдельно расположенном js-файле, подключаемом программно (подробнее о подключении JS-кода можно прочитать в курсе). Любой код с использованием библиотеки должен быть расположен внутри метода BX.ready(). К примеру:
BX.ready(function(){
//здесь ваш код
});
Это позволит запуститься вашему коду только когда DOM-структура будет полностью загружена и сформирована.
Для дальнейшей простой работы с BX надо уяснить для себя два простых правила:
- Все методы библиотеки работают только с конкретным элементом DOM-структуры. При работе в других фреймворках вы привыкли задавать селектор, и с возвращаемыми объектами сразу производить какие-то действия (к примеру, $(‘input).remove()). В BX такого нет, в BX нужно сначала получить элемент, или массив элементов, и произвести действие с каждым отдельно. Ссылка на конкретный элемент DOM-структуры можно получить методом BX(‘атрибут id DOM-элемента’);
- Большинство методов работает по парному принципу - первым параметром идет элемент, вторым (и далее) параметром - некие данные, которые применяются к указанному элементу (к примеру, BX.setOpacity). Оставшаяся часть методов работает по формату BX.метод(элемент) (к примеру, BX.focus).
В качестве закрепления информации приведем код для удаления всех тегов input в административной части сайта:
BX.ready(function(){
var fields = BX.findChild(BX('bx-admin-prefix'), {tag: 'input'}, true, true);
fields.forEach(function(element){
BX(element).remove();
});
});