하나의 웹 페이지에서 introJs를 사용하여 두 개의 소개 둘러보기를 설정하는 방법은 무엇입니까?

Question

introJs를 사용하여 하나의 웹 페이지에서 두 개의 개별 둘러보기를하고 싶습니다. 그러나 이렇게하는 동안 한 둘러보기의 데이터 단계가 다른 둘러보기와 일치합니다.

Answer 1

간단히 말해서 불가능합니다.

전체 페이지 (document.body)에 대해 두 번 둘러보기를 수행 할 수는 없지만 DOM의 개별 요소에 대해 두 개의 개별 둘러보기를 만들 수 있습니다.

Answer 2

비슷한 상황이었는데 페이지에 두 개의 패널이있었습니다. 각 패널에는 도움말 섹션이 있습니다. 그러나 하나의 도움말 섹션을 클릭했을 때 인트로 js는 다른 섹션에서도 활성화되었습니다. 도움말을 시작할 때마다 모든 intro js 특성을 제거하여 하나의 도움말 섹션이 다른 도움말 섹션을 활성화 할 수 없도록했습니다.

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

Answer 3

다른 인스턴스와 단계를 설정하고 intro1 및 intro2 (또는 원하는 다른 무엇이라도)라고 부릅니다.

그런 다음 intro1.start로 독립적으로 실행할 수()와 intro2.start()

참조 아래의 단계를 설정하는 코드 :

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' 
     } 
    ] 
}); 

아름다움은 그렇게하지입니다 나는이 프로그램 intro.js을했다, 단지

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

Answer 4

@brianlmerritt처럼, HTML에 포함 된 많은 메타 정보를 필요로하고 다른 버튼을 실행합니다.

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