如何添加'Done'按钮，位于多页导览的最后一步

How to add a 'Done' button at the final step of multipage intro.js tour?

本文关键字：于多页 最后一步 按钮 添加 何添加 Done      更新时间：2023-09-26

我已经成功地设置了一个多页旅游与介绍。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"
        });                 
    }                 
});

为了做到这一点，你必须编辑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);
    }

这是我用codepen做的一个样品。

还记得让按钮的css也应用到您的按钮，并做必要的更改

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);
}
上面的代码很好。
相关文章：