Question

我正在尝试改变第一步（data-step="1"）的风格，我通过调用onbeforechange()

来解决这个问题

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的新手。

Answer 1

尝试使用此代码：

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();

Answer 2

我设法弄明白了。事实证明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();

否则，情况“1”的css函数不会触发。我尝试将introJs().start()替换为case“1”的css函数，但它不起作用。所以你必须两次开火start()。

不幸的是，我仍然没有弄清楚如何让工具提示完全位于页面的中心（保证金：即使在使用！important之后也根本不起作用）。很遗憾，但你能做什么？

我希望将来能有所帮助。

Answer 3

您可以为该特定步骤的工具提示添加一个类。然后，您可以通过css设置工具提示的样式。

为此，请将data-tooltipClass="sample-class"属性添加到您希望的元素中。

可在以下位置找到已接受属性的完整列表： https://github.com/usablica/intro.js#attributes

Answer 4

如果您使用JSON进行步骤初始化，

targetElement.getAttribute("data-step")将返回null。

我有另一种解决方案，您可以应用id代替step：

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.id)
    {
        case "intendedId":
            $(".introjs-helperLayer").css("text-align", "center");
        break;
    }
}).start();

如果在使用JSON对象进行初始化时仍想知道当前步骤，则使用以下方法：

var intro = introJs();
            intro.setOptions({
                steps: [
                    {
                        intro: "Text1"
                    },

                    {
                        element: document.querySelector(".leg"),
                        intro: "text2",
                        position: 'bottom'
                    }
                ]
            });

    intro().onbeforechange(function(targetElement) {
        var stepNumber = 0;
        for (var i=0; i < intro._options.steps.length; i++) {
            if (intro._options.steps[i].element == targetElement)
                stepNumber = i;
            }
        switch (stepNumber)
        {
           case "1":
             //change CSS styling only for the first box
             $(".introjs-helperLayer").css("text-align", "center");

            break;
        }
    }).start();

使用Intro.js时，如何调整特定步骤的工具提示样式

4 个答案: