Как добавить кнопку «Готово» на заключительном этапе многостраничного тура intro.js?

Question

Я успешно установил многостраничный тур с 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" 
     });     
    }     
}); 

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 для кнопок, которые применяются к вашей кнопке, а также внести необходимые изменения.