触发由父视图引起的任何事件的退出巡视 - Intro.js

时间:2017-03-08 09:16:24

标签: php jquery yii2 intro.js

File Manager - Home Normal File Manager - Home Normal 我正在使用基于AJAX回调的大部分内容。单击我页面上的链接按钮弹出一个模态(btn有一些类和jquery事件被触发加载模态弹出并显示内容)。我的应用程序中使用的导游是Intro.js,我是根据社区的一些建议从http://www.introjs.com下载的。

只要执行正常程序,IntroJs就能正常工作。

这是我的代码(仅包含相关行):

elementsArrays = getIntroElements();    //  Get All the elements that can be in tour list

availableElements = getAvailableElements(elementsArrays)    //  Input the Array of Elements and Return Available Elements in page
TotalCount = availableElements.ids.length + availableElements.classes.length + 2;   //  Set the Object for ease-of-access

setUpIntroElements();   //  SetsUp the route path for tourguide to move through

introJs().start();  //  Starts the Tour Guide

但是当我点击一个链接按钮时(当导游正在进行时,该按钮可以在那一刻被访问(例如,目标突出显示的元素是主容器,更新按钮是突出显示区域的一部分。所以它是可点击的。 )),弹出相应的模态窗口,但巡视尚未完成。我按左/右箭头键,introjs的下一个数据步骤出现在我的模态弹出窗口中。 (Modal popup windowModal popup window

这是我尝试关闭游览的代码

//  Close the wizard on any button click or disabled clicking any button there in the page
$("body").on("click", ".filemgt-file-index a", function(e){
    if( $(".introjs-showElement")[0] )  //  case: the tour is in process
    {
        //e.stopPropagation();  //  not working
        e.stopImmediatePropagation()    //  not working

        //var esc = $.event("keydown", {keyCode:27});
        //$("body").trigger(esc);   //  didnt work at all

        //  Trigger the below event
        //  a.introjs-button.introjs-skipbutton
        introJs().exit();   //  Exit the Tour and Work on new set   //  doesn't work very well
        //  need to apply "press Esc event" programmatically in jquery
        //  Triggering event equavalent to pressing Esc button
        //  disable all events associated with it 
        introJs().exitIntro()
    }
});

当我关闭/取消我的模态窗口时,仍然没有终止游览并按左/右箭头键显示相应的数据步骤元素简介。 (File Manager - Home (after Closing Modal popup)File Manager - Home (after Closing Modal popup)

我想要达到的目标是,如果点击导游中的任何链接,游览应该结束,并且弹出新模态并全部关注它。

附图说明了情况是什么以及我想要具备什么。看看他们,如果我在问题陈述中遗漏了某些内容,请告诉我。

非常感谢您提前。 保持祝福。

1 个答案:

答案 0 :(得分:5)

这不是一个标准的解决方案,但它帮助我解决了我的问题。

在查看我的浏览器窗口中出现的源代码时(检查元素(F12功能键),我找到了一个类" introjs-skipbutton"反对工具提示弹出的跳过按钮。

我发现单击此按钮会退出巡视路线,因此我将以下代码放入JQUERY文件中:

//  Close the wizard on any button click or disabled clicking any button there in the page
$("body").on("click", ".main_container_div_of_view a", function(e){
    if( $(".introjs-showElement")[0] )  //  case: the tour is in process
    {
        $('.introjs-skipbutton').click();   //  Terminate Introduction
    }
});

这就是诀窍并退出巡演。但在我看来,它仍然不是标准做法。