Вот пример:
Скрытый текст
1. Идем в globalTemplate
2. В <head></head> секции добавляем строку:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css" integrity="sha256-OYXGS5m4oWZAAqoAKpf7Y3bIdzdd9jBfly/xCavEpGw=" crossorigin="anonymous"/>
3. Теперь в globalTemplate ищем
<!--ipsQueryLog-->
и добавляем выше:
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js" integrity="sha256-fOPHmaamqkHPv4QYGxkiSKm7O/3GAJ4554pQXYleoLo=" crossorigin="anonymous"></script> <script type="text/javascript"> function startIntro(){ var intro = introJs(); intro.setOptions({ steps: [ { intro: "Step 1 text" }, { element: document.querySelector('#elNavSecondary_71'), intro: "Step 2 text." }, { element: document.querySelectorAll('#elNavSecondary_63')[0], intro: "Step 3 text", position: 'right' }, { element: '#elNavSecondary_56', intro: 'Step 4 text', position: 'left' }, { element: '#step4', intro: "Step 5 text", position: 'bottom' }, { element: '#step5', intro: 'Step 6 text' } ] }); intro.start(); } </script>
Чтобы выбрать свои собственные элементы на вашем форуме, просто измените id элементов в элементе: '#elementid'
Для запуска функции вы можете использовать кнопку:
Цитата<a class="ipsButton ipsButton_normal ipsButton_medium" href="javascript:void(0);" onclick="startIntro();" rel="">Start a tour</a>
Вы можете найти полную документацию IntroJS ТУТ
Рекомендованные комментарии
Нет комментариев для отображения
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Зарегистрировать аккаунтВойти
Уже зарегистрированы? Войдите здесь.
Войти сейчас