15  /  37

Подсказки пользователям

Просмотров: 493 (Статистика ведётся с 06.02.2017)
Дата последнего изменения: 11.07.2018
Роберт Басыров
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
1
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("Моя вторая подсказка.")
);


10
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии