Intro.js如何选择多个元素,在连续步骤的页面之间导航?

时间:2017-10-11 04:16:40

标签: javascript jquery laravel intro.js

我目前正在为我的网站使用Intro.js,代码工作在这里

//Page 1
    function startIntro(){
            var intro = introJs();

    intro.setOptions({
            steps: [
                {
                element: "#id_supplier",
                //   intro: "This is a dropdown",
                intro:'User click apply <hr><p><b>The tutorial video as shown below:<b></p><iframe class="abcd" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" ></iframe>',

            },
            {
                element: ".panel-group",
                intro: "Hello world!",
            },
            {
                element: ".panel-group",
                intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
                position: 'left'
            },
            {
                element: '#step4',
                intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
                position: 'bottom'
            },
            {
                element: '#step5',
                intro: '<strong>Get</strong> it, <strong>use</strong> it.'
            }
        ]
});

intro.onchange(function(element) {
     if (this._currentStep === 0) {

     $("#id_supplier")[0].selectedIndex = 1;
         $("#id_supplier").trigger('change');
     }
     else{
        window.location.href= "/index?multipage=true";
     }
});
        intro.start();
};

$('#info').click(function () {
        startIntro();
})

-

//Page 2
 if (RegExp('multipage', 'gi').test(window.location.search)) {

        var intro = introJs();

        intro.setOptions({
            steps: [
                {
                    intro:'User click apply <hr><p><b>The tutorial video as shown below:<b></p><iframe class="abcd" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" ></iframe>',

                },
                {
                    element: "#create",
                    intro: "Hello world!",
                },
                {
                    element: ".panel-group",
                    intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
                    position: 'left'
                }            
            ]
        });

        intro.start();
    }

如何让它选择多个元素?例如。选择相同的班级名称

当转到下一页时,如何返回上一页并从上一页开始继续该步骤?例如。第1页 - 步骤1-步骤3,当重定向到第2页时,步骤将从4开始。

有人知道这个问题的解决方案吗?谢谢你提前。

0 个答案:

没有答案