Question

我正在使用introjs构建我的应用程序之旅。我已经在网上和文档中搜索了很多地方，但似乎无法找到如何在浏览中跳过或点击完成后运行函数的方法。我正在尝试制作一个cookie，以便存储cookie并且在用户请求它或新用户访问该站点之前不再运行该游览。任何帮助都会很棒，谢谢！

$(function(){
    var introguide = introJs();

    introguide.setOptions({
        showProgress: true,
        steps: [
            { hidden }
        ]
    });  

    introguide.start();
});

Answer 1

此代码允许存储旅游信息

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#ff0000" />
            <stroke
                android:width="2dip"
                android:color="#c20000" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#ff0000" />
            <stroke
                android:width="2dip"
                android:color="#c20000" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
        </shape>
    </item>
</selector>

Answer 2

是的，有一种方法，但有一些警告。

首先，在加载intro.js之后，你将拥有一个名为introJs的全局，其属性为fn（标准的jquery插件方法）。

通过使用introJS.fn下的oncomplete()功能设置功能，您可以在用户点击“完成”时执行某些操作。按钮。

这是一个只显示控制台消息的示例：

introJs.fn.oncomplete(function() { console.log("Finished"); });

这可以按预期工作。在包含intro.js库之后，您可以随时将其放入脚本中。

＆＃39;跳过＆＃39;但是，按钮功能只会调用“不完整”按钮。处理程序，如果你在最后一步。代码的作者认为不完整，因此不会运行该代码，正如您从代码中提取的那样：

  skipTooltipButton.onclick = function() {
    if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
      self._introCompleteCallback.call(self);
    }

    _exitIntro.call(self, self._targetElement);
  };

这基本上说它必须在最后一步考虑调用完整的回调。

当然，您可以分叉代码并删除限制。我建议你是否要这样做，以类似于_introlCompleteCallback的方式创建一个_introSkipCallback并调用它，除非在最后一步你可以调用这两个函数（如果存在）。

希望这有帮助。

Answer 3

我注意到当你点击完成按钮时会调用onexit（跳到最后一步）。 onexit似乎没有将它绑定到introjs对象，所以我能够解决在演练完成时调用onexit的问题：

// during setup
introJs.oncomplete(handleOnComplete);
introJs.onexit(() => handleOnExit(introJs));

function handleOnComplete() {
  console.log(this._currentStep); // this is bound to the introJs object
}
function handleOnExit(introJs) {
  const currentStep = introJs._currentStep;
  if (currentStep < introJs._options.steps.length) {
    doSomethingOnSkip();
  }
};

Answer 4

我打算添加评论，但我的代表太低了。我不想回答，因为我还没有真正测试过这个，但是在2.5.0版本（也许也是以前的版本）中，有onexit函数，我认为它应该处理中断以及最后点击完成。你试过吗？

Answer 5

在完成＆＃39;完成后使用oncomplete功能。点击

在＆＃39; Skip＆＃39;之后使用onexit功能点击

奖励功能：onchange将记录每一步，这可用于调用特定步骤的功能

document.getElementById('startButton').onclick = function() {

    // log each step
    introJs().onchange(function(targetElement) {  
      console.log(this._currentStep)
      if (this._currentStep === 3){
        stepThreeFunc()
      }
    }).start()

    // clicking 'Done'
    .oncomplete(function(){
      someFunc()
    })

    // clicking 'Skip'
    .onexit(function(){
      someOtherFunc()
    });
};

Answer 6

     if ($(".introjs-skipbutton").is(":visible")) {
    $( document ).on('click', '.introjs-skipbutton', function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        self.exitTourguide();
    });
}

Answer 7

我正在应用程序中使用introJS工具提供应用程序的导游信息。
我使用了一些函数来动态处理它。在这里，步骤以数组格式发送数据。

var intro = introJs(); 
intro.setOptions( { 
    'nextLabel': 'Next >', 
    'prevLabel': '< Back', 
    'tooltipPosition': 'right', 
    steps: this.stepsData, 
    showBullets: false, 
    showButtons: true, 
    exitOnOverlayClick: false, 
    keyboardNavigation: true, 
} );

希望它将有助于处理跳过按钮的操作。

var self = this; intro.start().onbeforechange( function() { /* skip action*/ 
    if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { 
        $( document ).on( 'click', '.introjs-skipbutton', function( event ) { 
            self.exitTourguide(); 
        }); 
    } 
});

跳过并执行动作处理。

/ 完成点击操作 / intro.oncomplete（function（）{if（$（“ .introjs-skipbutton”）.is（“：visible”））{$（document）.on（'click'，'.introjs-skipbutton'，function（event ）{event.stopPropagation（）; event.stopImmediatePropagation（）; self.exitTourguide（）;}）;}}））；

/ 单击“跳过”操作 / intro.onexit（function（）{if（$（“ .introjs-skipbutton”）.is（“：visible”））{$（document）.on（'click '，'.introjs-skipbutton'，function（event）{event.stopPropagation（）; event.stopImmediatePropagation（）; self.exitTourguide（）;}）;}}））;

跳过或完成后的IntroJS回调函数？

7 个答案: