JS library

Introduction

This section provides description of Bitrix Framework Javascript-library

Documentation for this library presupposes that the reader is a developer with confident knowledge of JavaScript.

Bitrix24 Javascript-library is very versatile. Principal (main) class is the BX class. Also, quite a significant number of extensions is provided for a developer. For example, date handling extension. Unfortunately, not all extensions are described in documentation, but we are continuously working on this and the number of described extensions is increasing.

Server method is available to connect the library

CJSCore::Init (
       [array $arExtensions]
)

The method connects the kernel, styles and language messages of the library.

Function parameters

Parameter	Description
$arExtensions	Array of required library extensions. Optional.

For example, connection code for the kernel and two extensions:

CJSCore::Init(array('ajax', 'window')) 

Using your on code

JavaScript code is written in a separate js-file of a site template, js-file of component template, or in a separately located js-file, connected via software. Any code with the use of library shall be located inside the BX.ready() method. For example:

BX.ready(function(){
	//your code is here
});

This will allow your code to be launched only when DOM-structure will be completely uploaded and configured.

For further routine work with BX, two simple rules must be learned and understood:

• All library methods work only with the specific element of DOM-structure. When working in other frameworks you are accustomed to creating a selector, and immediately performing certain operations with the returned objects (for example, $(‘input).remove()). Its different in the BX: first you must retrieve an element, or an array of elements and perform operation with each one separately. Link to a specific element of DOM-structure can be retrieved via the BX(‘DOM-element id attribute’) method;
• Majority of element works based on pair principle - first parameter is the element, second (and further) parameter - is certain data that is applied to the specified element (for example, BX.setOpacity). The rest of methods operate as per the BX.method(element) format (for example, BX.focus).

To detail the information above, please find the code for deleting all input tags in the site's Control panel:

BX.ready(function(){
    var fields = BX.findChild(BX('bx-admin-prefix'), {tag: 'input'}, true, true);
    fields.forEach(function(element){
        BX(element).remove();
    }); 
});