3

我正在尝试改变第一步（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 的新手。

4

4 回答 4

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();
于 2013-07-02T10:30:13.883 回答
0

我设法弄清楚了，有点。事实证明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 之后也根本不起作用）。很遗憾，但你能做什么？

我希望这对将来的其他人有所帮助。

于 2013-07-03T17:17:55.923 回答
0

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

为此，将data-tooltipClass="sample-class"属性添加到您想要的元素。

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

于 2014-10-02T22:47:46.343 回答
0

targetElement.getAttribute("data-step")null如果您使用 JSON 进行步骤初始化，将返回。

我有另一个解决方案，您可以申请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();
于 2019-03-12T08:19:37.833 回答