javascript - Trip.js : onFinishStep and onStartStep

Question

为了使我的网络应用程序更可用，我想在应用程序中使用一些分步用户指南，以便用户知道点击什么、何时何地来实现其目标。

所以，经过大量研究，我想出了 trip.js ，它是可设计的并且几乎可定制。

但是!当尝试执行某些步骤时，我错过了两个函数:onFinishStep 和 onStartStep。

是的，您有一个名为 onTripChange 的事件，在这里，考虑到步骤的 index，您可以执行一些操作。但是，如果我想在步骤结束后立即执行操作怎么办？直到下一步开始时它才会执行，那就太晚了。

我不知道是否有任何我可能错过的隐藏功能(或不那么隐藏)，但我已经阅读了 Docs似乎没有。另外，查看代码我找不到任何以这种方式执行的调用。

所以，我要求的是如何实现这一目标:两个函数，一个在步骤开始时执行，一个在步骤结束时执行。

Answer 1

阅读了一些代码后，我想出了一小段可以实现结果的文本。

从版本 2.0.2 开始，在 trip.js 文件中，第 386 行之后(在 next() 函数内)，编写以下代码来执行函数 onFinishStep():

if(this.tripData[this.tripIndex].onFinishStep !== undefined) this.tripData[this.tripIndex].onFinishStep()

从 onStartStep() 开始，它将位于第 585 行之后(在 run() 函数内):

if(this.tripData[this.tripIndex].onStartStep !== undefined) this.tripData[this.tripIndex].onStartStep()

这样就可以了。它正在我的测试中运行(Chrome 40、Firefox 35.0.1)。

那么，步骤的定义是:

var trip = new Trip([
      { sel : $("#element"), content : '<p>The content</p>', position : "n", onFinishStep: function(){/*your code here*/}},
      { sel : $("#element_2"), content : '<p>The content of step 2</p>',  position : "n", onStartStep: function(){/*your code here*/}}
    ], tripjs_general_options)

trip.start()

希望它对某人有帮助。

我要感谢EragonJ - Trip.js 的作者- 对于这样一个令人惊叹的插件。

亲切的问候。