Bx android click detect

Битрикс JS

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

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

amCharts

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

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

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

amcharts — Базовая библиотека
amcharts_funnel – Воронка, пирамида Маслоу
amcharts_gauge – Диаграмма в виде спидометра
amcharts_pie – Круговая диаграмма
amcharts_radar – Радарная диаграмма
amcharts_serial – Обычные графики
amcharts_xy – График XY

Пример графика (serial)

MaskedInput

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

PhoneNumber

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

Пример работы библиотеки

PopupWindowManager

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

Пример работы

PopupMenu

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

Пример работы

SpotLight

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

Пример работы (да, круги будут анимированные)

ColorPicker

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

Пример работы

Списки

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

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

Пример работы

Источник

Введение

Введение

В данном разделе представлено описание Javascript-библиотеки Bitrix Framework

Документация по данной библиотеке предполагает уверенные знания разработчика в JavaScript.

Javascript-библиотека Битрикс очень разнообразна. Основным (главным) классом является класс BX. Также к услугам разработчика представлено достаточно большое количество расширений. Например, расширение по работе с датами. К сожалению, не все расширения описаны в документации, но мы постоянно работаем над этим и количество описанных расширений растет.

Для подключения библиотеки предусмотрен серверный метод

Метод подключает ядро, стили и языковые сообщения библиотеки.

Параметры функции

Параметр	Описание
$arExtensions	Массив требуемых расширений библиотеки. Необязательный.

К примеру, код подключения ядра и двух расширений:

Использование своего кода

JavaScript-код пишется в отдельном js-файле шаблона сайта, js-файле шаблона компонента, или отдельно расположенном js-файле, подключаемом программно (подробнее о подключении JS-кода можно прочитать в курсе). Любой код с использованием библиотеки должен быть расположен внутри метода BX.ready(). К примеру:

Это позволит запуститься вашему коду только когда DOM-структура будет полностью загружена и сформирована.

Для дальнейшей простой работы с BX надо уяснить для себя два простых правила:

• Все методы библиотеки работают только с конкретным элементом DOM-структуры. При работе в других фреймворках вы привыкли задавать селектор, и с возвращаемыми объектами сразу производить какие-то действия (к примеру, $(‘input).remove()). В BX такого нет, в BX нужно сначала получить элемент, или массив элементов, и произвести действие с каждым отдельно. Ссылка на конкретный элемент DOM-структуры можно получить методом BX(‘атрибут id DOM-элемента’);
• Большинство методов работает по парному принципу — первым параметром идет элемент, вторым (и далее) параметром — некие данные, которые применяются к указанному элементу (к примеру, BX.setOpacity). Оставшаяся часть методов работает по формату BX.метод(элемент) (к примеру, BX.focus).

В качестве закрепления информации приведем код для удаления всех тегов input в административной части сайта:

Смотрите также

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Источник

duke_red

duke_red

Нашел кое-какую документацию с партнерской конференции по стандартному битриксовому аяксу и ихней JS-библиотеке.

Ниже — описание функций с небольшими примерами.

Для начала об архитектуре и подключении.

Все файлы — скрипты и стили библиотеки находятся в папке

Файл core.js — это ядро самой библиотеки. В него лазить — править мне еще не приходилось, да и думаю врядли понадобится.

Ядро определяет глобальный объект BX, который содержит статические методы для работы с событиями, DOM и др. По сути это аналог

«$» в jquery. с него начинаются все действия и манипуляции с объектами страницы.

/bitrix/js/main/core/ в большинстве нужны следующие файлы:

core_ajax.js — аяксовые функции;

core_date.js — функции для работы с датами и календарями;

core_popup.js — функции для создания всплывающих окон;

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

Для того чтоб это все заработало на страницах нужно подключить эти библиотеки через:

Эта функция принимает параметры — названия бибилиотек из /bitrix/js/main/core/, которые нужно подключить в данный момент, только без первого префикса «_core». Т.е. если нам надо подключить всплывающие окна и аякс, то

Соответственно подключит core_ajax.js и core_popup.js

В стандартной поставке битрикса есть jquery и ее также можно подключать черз функцию CUtil::InitJSCore(), если конечно она не была подключена ранее.

Использование на странице

Сначала нужно убедиться, что страница загрузилась полностью. Полную загрузку страницы гарнатирует функция

Это аналог джейкверивской функции:

Пройдемся по основным функциям

Поиск элемента по id

BX(«my_div»;); //выбирает любой элемент с

BX.create(tag[, data[, context]])

Создает узел DOM-дерева с именем тега tag.

Описательный объект data может иметь следующие поля:

tag: имя тега узла,

children: [массив дочерних узлов],

text: текстовое содержимое узла,

html: HTML-содержимое узла

DOMNode BX.adjust(DOMNode node, object data)

Изменяет свойства узла node.

DOMNode BX.addClass(DOMNode node, string className)

Добавляет узлу node CSS-класс className, если он такового не имеет.

DOMNode BX.removeClass(DOMNode node, string className)

Удаляет CSS-класс className, у узла node.

DOMNode BX.toggleClass(DOMNode node, string|array className)

Переключить наличие/отсутствие CSS-класса className у узла node или устроить ротацию CSS-классов, если className – массив.

bool BX.hasClass(DOMNode node, string className)

Проверяет — есть ли сласс «className» у элемента

DOMNode BX. style(DOMNode node, string property[, string value])

Получить текущее значение стиля property узла node или установить его в значение value.

null BX.remove(DOMNode node)

Удалить узел DOM-структуры.

DOMNode BX.cleanNode(DOMNode node[, bool bSuicide])

Очистить DOM-узел от всех дочерних элементов. Если второй параметр равен true, сам узел также будет удален.

BX.show(DOMNode node), BX.hide(DOMNode node)

Выбор элементов на странице

Array BX.findChildren(DOMNode obj, Object params, bool recursive)

DOMNode BX.findChild(DOMNode obj, Object params, bool recursive)

tagName|tag: имя тега требуемого узла,

className|class: CSS-класс, который должен содержать требуемый узел,

attribute: | attribute | [attribute, attribute], — атрибут или коллекция атрибутов, которые должны присутствовать в требуемом узле

property: < prop: value, prop: value>| prop | [prop, prop] – свойство или коллекция свойств, которые должны присутствовать в требуемом узле

callback: функция для произвольной фильтрации

DOMNode BX(String id)

Поиск элемента по id

DOMNode BX.findParent(DOMNode obj, Object params)

DOMNode BX.findNextSibling(DOMNode obj, Object params)

DOMNode BX.findPreviousSibling(DOMNode obj, Object params)

Поиск соседних элементов

void BX.bind(DOMNode element, String event, Function handler)

Установить функцию handler в качестве обработчика события event элемента element.

void BX.unbind(DOMNode element, String event, Function handler)

Снять обработчик handler события event элемента element.

void BX.unbindAll(DOMNode element)

Снять все зарегистрированные обработчики событий с элемента element

Запретить всплывание события

BX.addCustomEvent(Object eventObject, string eventName, Function handler) —

Назначить обработчик eventHandler кастомному событию с именем eventName, возникающем в объекте eventObject.

BX.removeCustomEvent(Object eventObject, string eventName, Function handler)

Удалить обработчик eventHandler кастомного события с именем eventName.

BX.onCustomEvent(Object eventObject, string eventName[, Array arEventParams])

Вызвать все обработчики события eventName для объекта eventObject и передать перевым параметром arEventParams.

object BX.pos(DOMNode node) —

Возвращает координаты и размеры узла, объект с ключами top, right, bottom, left, width, height.

object BX.GetWindowScrollSize([DOMDocument doc])

— Возвращает размеры скролла, объект с ключами scrollWidth, scrollHeight

object BX.GetWindowScrollPos([DOMDocument doc]) —

Возвращает позицию скролла, объект с ключами scrollLeft, scrollTop

object BX.GetWindowInnerSize([DOMDocument doc]) —

Возвращает размер окна, объект с ключами innerWidth, innerHeight

BX.browser – проверка на браузер

BX.browser.isIE(), BX.browser.isOpera(), BX.browser.isSafari()

BX.type – проверка типа объекта

BX.type.isArray(), BX.type.isDate() и др.

Низкоуровневая функция для отправки ajax-запросов.

url: URL запроса

dataType: html|json|script – данные какого типа предполагаются в ответе

timeout: 60 – таймаут запроса в секундах

async: true|false – должен ли запрос быть асинхронным или нет

processData: true|false – нужно ли сразу обрабатывать данные?

scriptsRunFirst: false|true – нужно ли выполнять все найденные скрипты перед тем, как отдавать содержимое обработчику

start: true|false – отправить ли запрос сразу или он будет запущен вручную

onsuccess: функция-обработчик результата

onfailure: функция-обработчик ошибки

XHRequest BX.ajax.get(string url, function callback)

Отправка GET-запроса и передача результата обработчику callback.

XHRequest BX.ajax.post(string url, string|object data, function callback)

Отправка POST-запроса и передача результата обработчику callback. Параметр data – это строка или ассоциативный массив POST-данных запроса.

XHRequest BX.ajax.insertToNode(string url, string|DOMNode node)

Запросить url и вставить результат в контейнер node. Если node – строка, то параметр будет интерпретирован как идентификатор контейнера.

XMLHttpRequest BX.ajax.loadJSON(string url, function callback)

Class BX.fx(Object options)

start: стартовое значение и набор значений

finish: конечно значение и набор значений

time: время, в течение которого должна производиться анимация

type: linear|accelerated|decelerated – закон изменения параметров

callback : обработчик значения параметра

callback_start : обработчик начала анимации

callback_complete : обработчик завершения анимации

step: длительность промежутка анимации

BX.fx.prototype.start() – начать анимацию

BX.fx.prototype.pause() – затормозить/запустить снова анимацию

BX.fx.prototype.stop() – закончить анимацию

Class BX.PopupWindow(id, bindElement, options)

Работа с датами и календарями

BX.date.format(format, [date[, currentDate[, isUtc]]])

format – полный аналог формата php-функции date, за исключением формата «T» и «e» (символьное название таймзоны).

date – дата в формате timestamp или объект класс Date.

currentDate – текущая дата (timestamp|Date).

isUTC – дата в UTC? Если необходимо работать с датами в UTC.

BX.date.format(«d-m-Y H:i:s») // 24-01-2012 18:22:12

BX.date.format(«j F Y H:i:s») // 24 Января 2012 18:22:32

BX.date.format(«iago», new Date(2012, 0, 23)) // 2545 минут назад

Примеры использования аякс функций

Простой пример всплывающего окна.

Подключим нужные библиотеки

Создадим нужные контейнеры на странице:

Аяксовый скрытый контейнер, из которого будем загружать данные в окошко

ссылка, при клике на которую будет открываться окно

Источник