Comment ajouter un bouton 'Terminé' à la dernière étape de la visite intro.js multipage?

Question

J'ai réussi à configurer une visite de plusieurs pages avec intro.js Dans la dernière étape, je ne peux pas afficher le bouton 'Terminé'. J'ai actuellement un bouton allant à la page d'accueil. Comment pourrais-je également ajouter le bouton 'Terminé'?

Le script dans la dernière page (ne contenant que la dernière étape de la tournée):

$(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

Pour ce faire, vous devez éditer le fichier lui-même introjs. Vous pouvez créer votre propre bouton en js pur, puis l'ajouter à buttonLayers (comme vous le verrez dans le fichier introjs). Ensuite, vous le verrez dans la vue. Maintenant, ce que vous devez faire est de faire jouer le bouton sur une fonction onclick et cette fonction fermera la vue introjs. Ou vous pouvez faire le contraire, le nouveau bouton va charger votre page d'accueil et vous pouvez laisser la page terminée.

Voici un exemple de code que j'ai fait:

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 est un échantillon que j'ai fait dans codepen.

Rappelez-vous également d'obtenir le css pour les boutons à appliquer à votre bouton, et apporter les modifications nécessaires.