1
intro.js의 '힌트'기능을 켜거나 끌 수있는 버튼이 필요합니다.intro.js 데이터 힌트 표시 및 숨기기
표시하고 숨기기 작업 버전이 있지만 쇼는 한 번만 작동합니다. 반복적으로 작동 시키려면 어떻게해야합니까? 이 기능은 표준 데이터 인트로에 대해서는 작동하지만 데이터 힌트에는 작동하지 않습니다.
hints = [{...}, ...]
다음, 인트로 옵션에서 힌트를 재설정 :
<div class="jumbotron">
<h1 id='step1'>Hints</h1>
<p class="lead">Adding hints using JSON + callbacks</p>
<a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a>
</div>
function addHints(){
intro = introJs();
intro.setOptions({
hints: [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
]
});
intro.onhintsadded(function() {
console.log('all hints added');
});
intro.onhintclick(function(hintElement, item, stepId) {
console.log('hint clicked', hintElement, item, stepId);
});
intro.onhintclose(function (stepId) {
console.log('hint closed', stepId);
});
intro.addHints();
}
$(function() {
$('#step2').click(function(){
if ($('#step2').hasClass('clicked')) {
introJs().hideHints();
$('#step2').removeClass('clicked');
} else {
addHints();
$('#step2').addClass('clicked');
}
});
});