我想有一个按钮,可以打开和关闭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');
}
});
});
5条答案
按热度按时间tsm1rwdh1#
不使用
hideHints
intro.js API方法,只需从DOM中删除intro.js的div块:(You如果你想的话,可以用jQuery做同样的事情)。
当div从DOM中删除后,只要像
addHints
方法那样再次初始化hints就可以了。omqzjyyz2#
你可以使用.removeHints()来代替用javascript删除div块
此函数是intro.js的一部分,但未包含在文档中。
polkgigr3#
也许有点hacky,但这对我来说很有效...
首先,把你的提示放到它们自己的变量中:
然后,在介绍选项中重置提示
隐藏的提示被赋予了一个类introjs-hidehint,document.querySelectorAll将返回一个数组中的所有提示。一旦该数组与提示数组大小相同,请重置intro选项中的提示,这将重置所有提示,以便您可以再次显示它们。
8i9zcol24#
下面是一个更完整的示例,它还允许:
(a)通过点击一个按钮来切换提示开/关(位于导航栏上,所以在多个页面上使用)。
(b)一旦所有的提示都被点击了,提示div就会被移除,这样点击显示提示按钮就会再次显示提示...
(c)允许你在一个json对象数组中存储多个页面的提示(re:导航栏)。
...希望这可以节省我花20分钟拼凑答案并将其应用于超级常见用例的时间。
eni9jsuy5#
我想为 Jmeter 板做同样的事情,解决方案是将以下代码放在样式中: