如何在多页 intro.js 游览的最后一步添加“完成”按钮？答案

【问题标题】：How to add a 'Done' button at the final step of multipage intro.js tour?如何在多页 intro.js 游览的最后一步添加“完成”按钮？
【发布时间】：2016-10-25 12:19:38
【问题描述】：

我已使用 intro.js 成功设置了多页导览在最后一步中，我无法显示“完成”按钮。我目前有一个转到主页的按钮。我怎样才能添加“完成”按钮？

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

$(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"
        });                 
    }                 
});

【问题讨论】：

标签： javascript intro.js

【解决方案1】：

为此，您必须编辑 introjs 文件本身。您可以在纯 js 中创建自己的按钮，然后将其附加到 buttonLayers（正如您将在 introjs 文件中看到的那样）。然后你会在视图中看到它。现在你需要做的是让按钮在点击时播放一个函数，该函数将关闭 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 也应用到您的按钮，并进行必要的更改。

【讨论】：

【解决方案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);
}

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

【讨论】：