Question

我已成功使用intro.js设置多页巡视在最后一步中，我无法完成“完成”工作。按钮显示。我目前有一个按钮进入主页。我怎么能添加＆＃39;完成＆＃39;按钮？

最后一页中的脚本（仅包含游览的最后一步）：

$(document).ready(function()    {       
    areComponentsReady();

    if(window.location.href.indexOf("multipage=true") > -1)  {      
        introJs().setOption('doneLabel', 'Back to start').start().oncomplete(function() {
          window.location.href = "/myhomepage"
        });                 
    }                 
});

Answer 1

为了做到这一点，你必须编辑introjs文件本身。您可以在纯js中创建自己的按钮，然后将其附加到buttonLayers（正如您将在introjs文件中看到的那样）。然后你会在视图中看到它。现在你需要做的是让按钮播放一个函数onclick，该函数将关闭introjs视图。或者您可以执行相反的操作，新按钮会将您加载到主页，然后您可以单独完成完成页面。

以下是我制作的示例代码：

    var btn = document.createElement("BUTTON");
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);

    // I have added the button append here because by default this is what intro js will do
    if (this._introItems.length > 1) {
        buttonsLayer.appendChild(prevTooltipButton);
        buttonsLayer.appendChild(nextTooltipButton);
        buttonsLayer.appendChild(btn);
    }

This是我在codepen中制作的一个示例。

另外请记住获取按钮的css以应用于按钮，并进行必要的更改。

Answer 2

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);

// I have added the button append here because by default this is what intro js will do
if (this._introItems.length > 1) {
   buttonsLayer.appendChild(prevTooltipButton);
   buttonsLayer.appendChild(nextTooltipButton);
   buttonsLayer.appendChild(btn);
}

上面的代码很好。但最好将其作为选项。

如何添加＆＃39;完成＆＃39;在多步intro.js巡演的最后一步按钮？

2 个答案: