2

我在我的网站和这个小提琴中设置了以下非常简单的演示。它与官方演示几乎相同。在这两种情况下，我都没有参观。我错过了什么？

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.8.1/css/bootstrap-tour.min.css"> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.8.1/js/bootstrap-tour.min.js"></script>

<button class="btn" id="tour-go">Start the tour!</button>

<form>
    <input id="one" value="one" />
    <input id="two" value="two" />
    <input id="three" value="three" />
</form>

$(function () {
    var tour = new Tour({
        steps: [{
            element: "#one",
            title: "Title of my step",
            content: "Content of my step"
        }, {
            element: "#two",
            title: "Title of my step",
            content: "Content of my step"
        }, {
            element: "#three",
            title: "Title of my step",
            content: "Content of my step"
        }]
    });

    // Initialize the tour
    tour.init();

    $('#tour-go').click(function () {
        // Start the tour
        tour.start();
    });
});
4

4 回答 4

4

您使用的是 bootstrap-tour v0.8.1，因此您的代码不正确，正确的是：

var tour = new Tour() ;

tour.addSteps([{
    element: "#one",
    title: "Title of my step",
    content: "Content of my step"
}, {
    element: "#two",
    title: "Title of my step",
    content: "Content of my step"
}, {
    element: "#three",
    title: "Title of my step",
    content: "Content of my step"
}]) ;

这个小提琴正在工作：http: //jsfiddle.net/9LcQx/

于 2014-05-12T20:38:37.433 回答
3

用你的小提琴中的这个替换你的js ：

$(function () {
    var tour = new Tour();
    tour.addStep({
      element: "#one",
      title: "Step 1",
      content: "Content for step 1"
    });

    tour.addStep({
      element: "#one",
      title: "Step 2",
      content: "Content for step 2"
    });

    tour.addStep({
      element: "#three",
      title: "Step 3",
      content: "Content for step 3"
    });
    // Initialize the tour
    tour.init();

    $('#tour-go').click(function () {
        // Start the tour
        tour.start();
    });
});
于 2014-05-12T20:34:56.933 回答
0

你的错误是使用steps. 但正确的是你必须用它tour.addStep来做到这一点。

检查这个Demo js Fiddle

jQuery

var tour = new Tour();

tour.addStep({
        element: "#one",
        title: "Title of my step",
        content: "Content of my step"
    });
tour.addStep({
        element: "#two",
        title: "Title of my step",
        content: "Content of my step"
});
tour.addStep({
        element: "#three",
        title: "Title of my step",
        content: "Content of my step"
});

// Initialize the tour
tour.init();

$('#tour-go').click(function () {
    // Start the tour
    console.log("Click");
    tour.start();
});
于 2014-05-09T16:20:13.457 回答
0

我尝试了上述所有建议的解决方案，但仍然无法使其工作，所以我在网上找到了一篇文章，指出现有引导用户不应该使用bootstrap-tour-standalone.min.js. 相反，他们应该使用boostrap-tour-min.js.

另外，请确认您使用的是适当版本的引导程序。在我切换到的情况下，“弹出窗口”没有显示

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
于 2015-10-27T11:13:28.290 回答