Comment configurer deux visites d'introduction à l'aide d'introJs dans une seule page Web?

Configurez différentes instances et étapes et appelez-les intro1 et intro2 (ou tout ce que vous voulez).

Vous pouvez ensuite les déclencher de manière indépendante comme intro1.start () et intro2.start ()

Consultez le code pour configurer les étapes ci-dessous:

var intro1 = introJs(); intro1.setOptions({ tooltipPosition : 'top', steps: [ { element: '#intro1_step1', intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...', position: 'top' }, { element: '#intro1_step2', intro: 'Your profile contains important information which is important to complete so that...', position: 'bottom' }, { element: '#intro1_step3', intro: 'Make sure your attribute is included in your profile because the client may express a preference.', position: 'top' }, { element: '#intro1_step4', intro: 'Click here to add a photograph of yourself.', position: 'top' }, { element: '#intro1_step5', intro: 'Your photograph will appear when your profile matches a ...', position: 'top' }, { element: '#intro1_step6', intro: 'Take example.com with you, on your Android or Apple phone by clicking here.', position: 'top' } ] }); var intro2 = introJs(); intro1.setOptions({ tooltipPosition : 'top', steps: [ { element: '#intro2_step1', intro: 'Welcome to your example2.com dashboard, where...', position: 'top' }, { element: '#intro2_step2', intro: 'Your...', position: 'bottom' }, { element: '#intro2_step3', intro: 'Make sure...', position: 'top' }, { element: '#intro2_step4', intro: 'Click here to...', position: 'top' }, { element: '#intro2_step5', intro: 'In this step...', position: 'top' }, { element: '#intro2_step6', intro: 'Take example2.com with you, on your Android or Apple phone by clicking here.', position: 'top' } ] }); 

La beauté est que vous n'avez pas autant de méta-informations intégrées dans le html, juste

 <p id="intro1_step1">Blah Blah Blah</p> 

J'avais une situation similaire, où j'avais deux panneaux dans la page. Chaque panneau a sa section d'aide. Cependant, lorsque j'étais en train de cliquer sur une section d'aide, l'intro js était activée dans l'autre. J'ai supprimé tous les attributs de l'intro js chaque fois que je démarre l'aide, de sorte qu'une section d'aide ne pourra pas activer l'autre.

$ ('[Data-intro]'). RemoveAttr ('data-intro data-position data-step');

C'est tout simplement impossible.

Vous ne pouvez pas avoir deux visites pour toute la page ( document.body ) à la fois, au lieu de cela, vous pouvez créer deux visites séparées pour des éléments distincts sur le DOM.

Comme @brianlmerritt, j'ai fait deux intro.js programmatiques et lancez-le avec différents boutons.

 <a href="#" class="btn btn-flat success" id="encomienda_help"> <a href="#" class="btn btn-flat success" id="bitacora_help"> [...] <script type="text/javascript"> document.getElementById('encomienda_help').onclick = function() { var intro = introJs(); intro.setOptions({ doneLabel: 'Siguiente Página', steps: [ { element: document.querySelectorAll('#encomienda_step_1')[0], intro: "This is the help text for encomienda." }, { element: document.querySelectorAll('#encomienda_step_2')[0], intro: "This is another help text for encomienda.", position: "top" } ] }); intro.start().oncomplete(function() { window.location.href = '/ruta1?multipage=true'; }); }; document.getElementById('bitacora_help').onclick = function() { var intro = introJs(); intro.setOptions({ doneLabel: 'Siguiente Página', steps: [ { element: document.querySelectorAll('#bitacora_step_1')[0], intro: "This is the help text for bitácora." } ] }); intro.start().oncomplete(function() { window.location.href = '/ruta2?multipage=true'; }); }; </script>