如何从简介.js工具提示中动态添加或删除下一个/上一个按钮

How to dynamically add or remove the next/prev buttons from intro.js tooltips

本文关键字:添加 动态 删除 下一个 按钮 上一个 工具提示 何从简 从简 js      更新时间:2023-09-26

我正在使用介绍.js来创建通过站点的游览,但我需要根据 tootip 动态添加下一个/上一个按钮。

示例:我想在第三个工具提示上显示下一个/上一个按钮,而不是第一个和第二个工具提示。原因是我试图通过单击网站上的按钮而不是工具提示中的下一个按钮来帮助用户浏览网站,以提供更具交互性的游览。这是我的代码:

        want_tour.click(function() {
                    var introguide = introJs();
                    introguide.setOptions({
                          showStepNumbers: false,
                          showBullets: false,
                          showButtons: false,
                          scrollToElement: true,
                          exitOnEsc: true,
                          exitOnOverlayClick: false,
                          steps: [
                                {
                                      element: '#postcodeEntry',
                                      intro: 'Enter Postcode',
                                      position: 'bottom'
                                },
                                {
                                      element: '.home_Intro_Main',
                                      intro: 'Register or Start Shopping',
                                      position: 'bottom'
                                },
                                {
                                      element: '#searchform ',
                                      intro: 'Search',
                                      position: 'bottom'
                                },
                                {
                                      element: '.mainNavigation ',
                                      intro: 'Categories',
                                      position: 'bottom'
                                }
                          ]
                    }); 
                    introguide.start();
                    $('.chk-my-postcode').click(function() {
                          console.log("Clicked: .chk-my-postcode");
                          want_tour.hide();
                          introguide.goToStep(1).start();
                    });
                    $('#startShoppingWeDeliver').click(function() {
                          console.log("Clicked: #startShoppingWeDeliver");
                          introguide.setOption("skipLabel", "ExitOption");
                          introguide.setOptions({ skipLabel: 'ExitOptions', showButtons: true});
                          introguide.goToStep(2).start();
                    }); 
              });

目前,skipLabel 标签通过使用 setOption() 或 setOptions() 更改其文本,但所需的 showButton 未设置为 false。

你能告诉我怎么做吗?

禁用 introjs 的类现在添加到第一步的"上一个"按钮和最后一步的"下一步"按钮中。 我真的只是想隐藏它们,所以我将以下内容添加到我的 CSS 中。噗!做!

.introjs-disabled {
     display: none !important;
}

@Adam克拉科夫,这是禁用CSS的不良做法。

如果IntroJS onKeypress处于活动状态,则用户只能按"Enter",他将被带到下一步。