使用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方法返回一個空值，因此switch語句根本不起作用。我發現將introJs（）。onbeforechange（）更改爲introJs（）。onchange（），getAttribute（「data-step」）會返回一個數字（儘管樣式依然不起作用）。 onbeforechange（）和onchange（）之間有真正的區別嗎？ – elisaeo10

@MonElisa謝謝。我很抱歉地說這是舊版IntroJs中的一個錯誤，它將在下一個版本中修復它（它也在Github存儲庫的master分支中修復）。 –

我設法弄清楚，排序的。原來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();

否則，case「1」的css函數將不會觸發。我嘗試用案例「1」的css函數替換introJs().start()，但它不起作用。所以你必須兩次啓動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

回答

相關問題