jquery intro.js show and hide data-hint

yxyvkwin  于 2023-03-22  发布在  jQuery
关注(0)|答案(5)|浏览(125)

我想有一个按钮,可以打开和关闭intro.js中的'hints'功能。
我有一个工作版本要显示,然后隐藏,但显示只工作一次。我如何让它重复工作?此功能适用于标准的数据介绍,但不适用于数据提示。

<div class="jumbotron">
    <h1 id='step1'>Hints</h1>
    <p class="lead">Adding hints using JSON + callbacks</p>
    <a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a>
</div>

function addHints(){
    intro = introJs();
      intro.setOptions({
        hints: [
          {
            element: document.querySelector('#step1'),
            hint: "This is a tooltip.",
            hintPosition: 'top-middle'
          },
          {
            element: '#step2',
            hint: 'More features, more fun.',
            position: 'left'
          },
          {
            element: '#step4',
            hint: "<b>Another</b> step.",
            hintPosition: 'top-middle'
          }
        ]
      });
      intro.onhintsadded(function() {
          console.log('all hints added');
      });
      intro.onhintclick(function(hintElement, item, stepId) {
          console.log('hint clicked', hintElement, item, stepId);
      });
      intro.onhintclose(function (stepId) {
          console.log('hint closed', stepId);
      });
      intro.addHints();
  }
 $(function() {
    $('#step2').click(function(){
        if ( $('#step2').hasClass('clicked') ) {
            introJs().hideHints();
            $('#step2').removeClass('clicked');
        } else {
            addHints();
            $('#step2').addClass('clicked');
        }
    });
});
tsm1rwdh

tsm1rwdh1#

不使用hideHints intro.js API方法,只需从DOM中删除intro.js的div块:

var introDiv = document.getElementsByClassName("introjs-hints")[0];
introDiv.parentNode.removeChild(introDiv);

(You如果你想的话,可以用jQuery做同样的事情)。
当div从DOM中删除后,只要像addHints方法那样再次初始化hints就可以了。

omqzjyyz

omqzjyyz2#

你可以使用.removeHints()来代替用javascript删除div块
此函数是intro.js的一部分,但未包含在文档中。

polkgigr

polkgigr3#

也许有点hacky,但这对我来说很有效...
首先,把你的提示放到它们自己的变量中:

hints = [{...}, ...]

然后,在介绍选项中重置提示

intro.onhintclose(function(stepId) { 
  if (document.querySelectorAll('.introjs-hidehint').length === hints.length) {
    intro.setOptions({hints: hints}) 
  } 
})

隐藏的提示被赋予了一个类introjs-hidehint,document.querySelectorAll将返回一个数组中的所有提示。一旦该数组与提示数组大小相同,请重置intro选项中的提示,这将重置所有提示,以便您可以再次显示它们。

8i9zcol2

8i9zcol24#

下面是一个更完整的示例,它还允许:
(a)通过点击一个按钮来切换提示开/关(位于导航栏上,所以在多个页面上使用)。
(b)一旦所有的提示都被点击了,提示div就会被移除,这样点击显示提示按钮就会再次显示提示...
(c)允许你在一个json对象数组中存储多个页面的提示(re:导航栏)。

var jquery = require('jquery');
var introJs = require('intro.js');

* ===========================================================================
*       define onclick of hints button
* =========================================================================*/
jquery('#hints_button').on('click', function() {
    if (document.getElementsByClassName('introjs-hints').length == 0){
        addSomeHints();
    }
    else {
        destroyHints();
    };
});

/* ===========================================================================
 *      Add hints using the IntroJS library
 * =========================================================================*/

/* define hints */
var theHints = [
{
        element: document.querySelector('#step1'),
        hint: "This is a tooltip.",
        hintPosition: 'top-middle'
      },
      {
        element: '#step2',
        hint: 'More features, more fun.',
        hintPosition: 'left'
      },
      {
        element: '#step4',
        hint: "<b>Another</b> step.",
        hintPosition: 'top-middle'
      }
];

/* generate hints with introjs */
function addSomeHints() {
    intro = introJs();

    intro.setOptions({
        hints: theHints
    });

    intro.onhintclose(function (stepId) {
        var remaining_hints = all_hints - document.getElementsByClassName("introjs-hidehint").length;
        if (remaining_hints == 0) {
            destroyHints();
        };
    });

    /* add hints */
    intro.addHints();

    /* store number of hints created */
    var all_hints = document.getElementsByClassName('introjs-hint').length;

};

/* remove hints div */
function destroyHints() {
    var hintsDiv = document.getElementsByClassName("introjs-hints")[0]
    hintsDiv.parentNode.removeChild(hintsDiv);
};

...希望这可以节省我花20分钟拼凑答案并将其应用于超级常见用例的时间。

eni9jsuy

eni9jsuy5#

我想为 Jmeter 板做同样的事情,解决方案是将以下代码放在样式中:

.introjs-hidehint {
     display: block !important;
}

相关问题