Просмотров: 30651
Дата последнего изменения: 23.09.2021
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
3
4
5
Подсказки пользователям в интерфейсе
С версии модуля Библиотека интерфейсов (UI) 17.6.3 рекомендуется использовать js-расширение ui.hint, показывающее всплывающие подсказки пользователям на странице.
Подключение на PHP-странице:
\Bitrix\Main\UI\Extension::load("ui.hint");
Как использовать библиотеку
В html-коде достаточно указать у элемента атрибут data-hint c текстом:
<span data-hint="Моя первая подсказка"></span>
В js-коде необходимо инициализировать подсказку. Будут созданы подсказки для всех дочерних элементов контейнера:
BX.UI.Hint.init(BX('container'));
Пример:
<?
\Bitrix\Main\UI\Extension::load("ui.hint");
?>
<script type="text/javascript">
BX.ready(function() {
BX.UI.Hint.init(BX('my-container'));
})
</script>
<div id="my-container">
<div>
Подсказка 1
<span data-hint="<?=Loc::getMessage('MY_HINT_1')?>"></span>
</div>
<div>
Подсказка 2
<span data-hint="<?=Loc::getMessage('MY_HINT_2')?>"></span>
</div>
</div>
Использование в JavaScript
При формировании верстки в js, можно получить элемент для вставки из текста:
containerElement.appendChild(
BX.UI.Hint.createNode("Моя вторая подсказка.")
);