Как настроить стиль подсказки для конкретных шагов при использовании Intro.js

Я пытаюсь изменить стиль самого первого шага (data-step="1"), и я пошел об этом по телефону onbeforechange()Как настроить стиль подсказки для конкретных шагов при использовании Intro.js

introJs().onbeforechange(function(targetElement) { 
    switch (targetElement.getAttribute("data-step")) 
    { 
     case "1": 
      //change CSS styling only for the first box 
      $(".introjs-helperLayer .introjs-tooltip").attr("style", "margin-left: 10%"); 

     break; 
    } 
}).start();

По сути, я пытаюсь сосредоточить всплывающую подсказку для самого первого шага. Любая помощь высоко ценится; Я почти новичок в JavaScript.

источник

2013-07-01 elisaeo10

Попробуйте использовать этот код:

introJs().onbeforechange(function(targetElement) { 
    switch (targetElement.getAttribute("data-step")) 
    { 
     case "1": 
      //change CSS styling only for the first box 
      $(".introjs-helperLayer").css("text-align", "center"); 

     break; 
    } 
}).start();

источник

2013-07-02 10:30:13

Привет г Mehrabani, спасибо за ваш ответ и спасибо за ваш проект :) К сожалению, GetAttribute возвращает нулевое значение так заявление переключателя не работает вообще. Как-то я обнаружил, что изменение introJs(). Onbeforechange() для introJs(). Onchange(), getAttribute («data-step») возвращает число (хотя стилизация все еще не работает). Существует ли реальная разница между onbeforechange() и onchange()? – elisaeo10

@MonElisa Спасибо. Мне очень жаль, что это ошибка в старой версии IntroJs, и она будет исправлена в следующей версии (также она была исправлена в ветке 'master' репозитория Github). –

мне удалось понять это, своего рода. Оказывается, introJs().onbeforechange() не может взять параметр targetElement (об этой ошибке сообщается).

Так что вместо этого я использовал introJs().onchange() и объявил функцию start() до и после. В следующем порядке:

introJs().start(); 
introJs().onchange(function(targetElement) { 
    switch (targetElement.getAttribute("data-step")) 
    { 
     case "1": 
      //Center the tooltip 
      $(".introjs-tooltip").css("margin-left", "300px"); 
     break; 

     case "2": 
      //Remove margin-left 
      $(".introjs-tooltip").css("margin-left", "0"); 
     break; 

    } 
}).start();

В противном случае функция css «1» не будет срабатывать. Я попытался заменить introJs().start() на функцию css «1», но это не сработало. Так что вам придется стрелять start() два раза.

К сожалению, я до сих пор не понял, как получить всплывающую подсказку точно в центре страницы (край: вообще не работает даже после использования! Важно). Позор, но что вы можете сделать?

Я надеюсь, что это поможет другим в будущем.

источник

2013-07-03 17:17:55 elisaeo10

Вы можете добавить класс к подсказке для этого конкретного шага. Затем вы сможете стилизовать всплывающую подсказку с помощью css.

Для этого добавьте атрибут data-tooltipClass="sample-class" к элементу, который вы хотите.

Полный список принятых атрибутов можно найти по адресу: https://github.com/usablica/intro.js#attributes

источник

2014-10-02 22:47:46 Hirshy

Как настроить стиль подсказки для конкретных шагов при использовании Intro.js

ответ

Смежные вопросы