使用 intro.js 在步骤中触发函数
Trigger a function during step with intro.js
我已经尝试了这里的步骤:
Step with click functionality in intro.js
在步骤中触发函数。我没有成功执行函数,但教程仍在运行。最终目标是让函数触发按钮点击。谢谢你的帮助。
<script type="text/javascript">
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
intro: "Welcome to the page!",
onchange: function(){
console.log("test");
},
onbeforechange: function() {
console.log("before");
}
},
{
element: '#step1',
intro: "You can start doing something by clicking the New Item button."
},
{
element: '.thefilter',
intro: "You can filter any of the stock items in the table by using the search fields ",
position: 'bottom'
}
]
});
intro.start();
}
</script>
<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>
我错过了示例中的某些内容,这些内容为我提供了所需的指导。
这是更新后的代码。
TLDR;删除了步骤中的内联 onchange 并将其附加到 intro.start 之前。有效!
<script type="text/javascript">
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
intro: "Welcome to the page!"
},
{
element: '#step1',
intro: "You can start doing something by clicking the New Item button."
},
{
element: '.thefilter',
intro: "You can filter any of the stock items in the table by using the search fields ",
position: 'bottom'
}
]
});
intro.onbeforechange(function () {
if (this._currentStep === 2) {
console.log('what is happening')
return false;
}
});
intro.start();
}
</script>
<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>
我已经尝试了这里的步骤: Step with click functionality in intro.js
在步骤中触发函数。我没有成功执行函数,但教程仍在运行。最终目标是让函数触发按钮点击。谢谢你的帮助。
<script type="text/javascript">
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
intro: "Welcome to the page!",
onchange: function(){
console.log("test");
},
onbeforechange: function() {
console.log("before");
}
},
{
element: '#step1',
intro: "You can start doing something by clicking the New Item button."
},
{
element: '.thefilter',
intro: "You can filter any of the stock items in the table by using the search fields ",
position: 'bottom'
}
]
});
intro.start();
}
</script>
<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>
我错过了示例中的某些内容,这些内容为我提供了所需的指导。
这是更新后的代码。
TLDR;删除了步骤中的内联 onchange 并将其附加到 intro.start 之前。有效!
<script type="text/javascript">
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
intro: "Welcome to the page!"
},
{
element: '#step1',
intro: "You can start doing something by clicking the New Item button."
},
{
element: '.thefilter',
intro: "You can filter any of the stock items in the table by using the search fields ",
position: 'bottom'
}
]
});
intro.onbeforechange(function () {
if (this._currentStep === 2) {
console.log('what is happening')
return false;
}
});
intro.start();
}
</script>
<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>