Bootstrap之旅 - 如何从目的地页面返回？

Question

I am playing with Bootstrap Tour and I have found myself stuck navigating pages. 我正在玩Bootstrap Tour，我发现自己陷入了导航页面。

In my tour, step four takes users from index.cshtml to page.cshtml which works fine, however the tour box does not open in page.cshtml so I cannot navigate back from the destination page. 在我的导览中，第四步将用户从index.cshtml带到page.cshtml，它工作正常，但是传统框没有在page.cshtml中打开，所以我无法从目标页面导航回来。

In the Bootstrap tour demo at bootstraptour.com I cannot identify the javascript to open the tour popup in page.cshtml or handle the return back to index.cshtml. 在bootstraptour.com的Bootstrap游览演示中，我无法识别javascript以在page.cshtml中打开游览弹出窗口或处理返回index.cshtml。 There is just a div with a class called container and the dependency links in the Bootstraptour demo page.html. 只有一个带有一个名为container的类的div和Bootstraptour演示page.html中的依赖关系链接。

I have tried different options with no joy. 我尝试了不同的选择而没有快乐。 So, can anyone please help me open a pop up in page.cshtml and use it to navigate back to the original index.cshtml? 那么，任何人都可以帮我打开page.cshtml中的弹出窗口并使用它导航回原始的index.cshtml吗？ Thanks. 谢谢。

Here is what I have: 这是我有的：

index.cshtml index.cshtml

    @{    
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <!-- Le Bootstrap Styles -->
       <link href="../assets/css/bootstrap.css" rel="stylesheet">
       <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

        <!-- Bootstrap Tour -->
       <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">

    </head>

<body>

</br>
     </br>

          <p class="step-handle" id="step-welcome"> step welcome </p></br>
          <p class="step-handle" id="step-one"> step 1</p></br>
          <p class="step-handle" id="step-two"> step 2 </p></br>
          <p class="step-handle" id="step-three"> step 3 </p></br>
          <p class="step-handle" id="step-four"> step 4</p></br>
          <p class="step-handle" id="step-five"> step 5 </p></br> <!-- DOES STEP FIVE GO IN page.cshtml? -->
          <p class="step-handle" id="step-six"> step 6</p></br>

<hr />

<button id="pause-tour">Pause Tour</button>
<hr />
<button id="resume-tour">Resume Tour</button>


    </body>
</html>
      <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap-tour/jquery.js"></script>
    <script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
    <script src="../bootstrap-tour/bootstrap-popover.js"></script>
    <script src="../bootstrap-tour/bootstrap-tour.js"></script>

<script type="text/javascript">

var tour = new Tour({
    afterSetState: function(key, value) {
                console.log(key, value, tour.getState(), tour.getStep());
            }
});

tour.addSteps([
        {
        element: "#welcome", 
        title: "WELCOME", 
        content: "Welcome to the bootstrap tour" 
    },
    {
        element: "#step-one", // string (jQuery selector) - html element next to which the step popover should be shown
        title: "Step One Title", // string - title of the popover
        content: "Step One Content" // string - content of the popover
    },
    {
        element: "#step-two",
        title: "Step Two Title",
        content: "Step Two Content"
    },
    {
        element: "#step-three",
        title: "Step Three Title",
        content: "Step Three Content"
    },
    {
       path: "/page.cshtml",
       element: "#step-four",
        title: "Step four Title",
        content: "Step four Content"
    },
    {
        path: "/",
        title: "Step five Title",
        content: "Step five Content"
    },
    {
        element: "#step-six",
        title: "Step six Title",
        content: "Step six Content"
    }
]);

tour.restart();

$("#pause-tour").on("click", function() {

    tour.end();

});


$("#resume-tour").on("click", function() {

    tour.start(true);

});
</script>

page.cshtml page.cshtml

    @{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>


        <!-- Le Bootstrap Styles -->
       <link href="../assets/css/bootstrap.css" rel="stylesheet">
       <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

        <!-- Bootstrap Tour -->
       <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">


    </head>


    <body>


        <div class="container">
          <h1>This is just a test.</h1>
          <p>Nothing to see here. Move on!</p>
        </div>

    </body>
</html>
      <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap-tour/jquery.js"></script>
    <script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
    <script src="../bootstrap-tour/bootstrap-popover.js"></script>
    <script src="../bootstrap-tour/bootstrap-tour.js"></script>

Answer 1

I see a couple of issues: 我看到了几个问题：

The element you specify for the step four ( #step-four ) is not found in the markup for page.cshtml 在page.cshtml的标记中page.cshtml为page.cshtml步（ #step-four ）指定的元素
Step five does not have an element defined, I believe one is required unless you set the orphan option to true 第五步没有定义element ，我相信除非你将orphan选项设置为true否则需要一个element
You must include all your tour code in page.cshtml too, if you check the source of the demo in page.html the last referenced script index.js contains the tour instance. 您必须在page.cshtml包含所有游览代码，如果您在page.html检查演示的来源，则最后引用的脚本index.js包含游览实例。

Finally, I'm not sure if this would make any difference but I think your calls to tour.restart(); 最后，我不确定这是否有任何区别，但我认为你对tour.restart();调用tour.restart(); and tour.start(true); 和tour.start(true); should swap places 应该交换位置

Answer 2

After taking another look at how to navigate pages in the tour I got back to where I was yesterday: The tour changes from index.cshtml to page.cshtml and back, but it happens in one click - page.cshtml just flashes open. 再看看如何在巡视中导航页面我回到了昨天的位置：巡视从index.cshtml变为page.cshtml并返回，但只需点击一下 - page.cshtml只是闪烁打开。 The tour step popup does not open in page.cshtml and we do not stay on that page. 巡视步骤弹出窗口不会在page.cshtml中打开，我们不会留在该页面上。

So, I thought that I would add another step to page.cshtml (step five and step six) and BINGO! 所以，我想我会在page.cshtml（第五步和第六步）和BINGO中添加另一个步骤！

Thanks to kuala_dev for the pointer. 感谢kuala_dev指针。 The working code is below: 工作代码如下：

INDEX.CSHTML INDEX.CSHTML

@{    
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <!-- Le Bootstrap Styles -->
       <link href="../assets/css/bootstrap.css" rel="stylesheet">
       <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

        <!-- Bootstrap Tour -->
       <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">

    </head>

<body>

</br>
     </br>

          <p class="step-handle" id="step-welcome"> step welcome </p></br>
          <p class="step-handle" id="step-one"> step 1</p></br>
          <p class="step-handle" id="step-two"> step 2 </p></br>
          <p class="step-handle" id="step-three"> step 3 </p></br>
          <p class="step-handle" id="step-four"> step 4</p></br>

          <p class="step-handle" id="step-seven"> step 7</p></br>

<hr />

<button id="pause-tour">Pause Tour</button>
<hr />
<button id="resume-tour">Resume Tour</button>


    </body>
</html>
      <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap-tour/jquery.js"></script>
    <script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
    <script src="../bootstrap-tour/bootstrap-popover.js"></script>
    <script src="../bootstrap-tour/bootstrap-tour.js"></script>

<script type="text/javascript">

var tour = new Tour({
    afterSetState: function(key, value) {
                console.log(key, value, tour.getState(), tour.getStep());
            }
});

tour.addSteps([
        {
        element: "#welcome", 
        title: "WELCOME", 
        content: "Welcome to the bootstrap tour" 
    },
    {
        element: "#step-one", 
        title: "Step One Title", 
        content: "Step One Content" 
    },
    {
        element: "#step-two",
        title: "Step Two Title",
        content: "Step Two Content"
    },
    {
       element: "#step-three",
        title: "Step three Title",
        content: "Step three Content"
    },
    {
        path: "/page.cshtml",
        element: "#step-four",
        title: "Step four Title",
        content: "Step four Content"
    },
        {
        element: "#step-five",
        title: "Step five Title",
        content: "Step five Content"
    },
    {
        path: "/index.cshtml",
        element: "#step-six",
        title: "Step six Title",
        content: "Step six Content"
    },
    {
        element: "#step-seven",
        title: "Step seven Title",
        content: "Step seven Content"
    }
]);

tour.restart();

$("#pause-tour").on("click", function() {

    tour.end();

});


$("#resume-tour").on("click", function() {

    tour.start(true);

});
</script>

PAGE.CSHTML PAGE.CSHTML

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>


        <!-- Le Bootstrap Styles -->
       <link href="../assets/css/bootstrap.css" rel="stylesheet">
       <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

        <!-- Bootstrap Tour -->
       <link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">


    </head>


    <body>


           <hr>

<h2 class="step-handle" id="step-five" style="float: left">We're Big Show Offs</h2>

          <hr>

<h2 class="step-handle" id="step-six" style="float: left">We're Big Show Offs</h2>

    </body>
</html>
      <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../bootstrap-tour/jquery.js"></script>
    <script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
    <script src="../bootstrap-tour/bootstrap-popover.js"></script>
    <script src="../bootstrap-tour/bootstrap-tour.js"></script>

<script type="text/javascript">

var tour = new Tour({
    afterSetState: function(key, value) {
                console.log(key, value, tour.getState(), tour.getStep());
            }
});

tour.addSteps([
        {
        element: "#welcome", 
        title: "WELCOME", 
        content: "Welcome to the bootstrap tour" 
    },
    {
        element: "#step-one", 
        title: "Step One Title", 
        content: "Step One Content" 
    },
    {
        element: "#step-two",
        title: "Step Two Title",
        content: "Step Two Content"
    },
    {
       element: "#step-three",
        title: "Step three Title",
        content: "Step three Content"
    },
    {
        path: "/page.cshtml",
        element: "#step-four",
        title: "Step four Title",
        content: "Step four Content"
    },
        {
        element: "#step-five",
        title: "Step five Title",
        content: "Step five Content"
    },
    {
        path: "/index.cshtml",
        element: "#step-six",
        title: "Step six Title",
        content: "Step six Content"
    },
    {
        element: "#step-seven",
        title: "Step seven Title",
        content: "Step seven Content"
    }
]);

tour.restart();

$("#pause-tour").on("click", function() {

    tour.end();

});


$("#resume-tour").on("click", function() {

    tour.start(true);

});
</script>

Bootstrap之旅 - 如何从目的地页面返回？

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-09-15 19:56:27

解决方案2
1 2013-09-16 11:40:44

Bootstrap之旅 - 如何从目的地页面返回？

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-09-15 19:56:27

解决方案2 1 2013-09-16 11:40:44

解决方案1
2 已采纳 2013-09-15 19:56:27

解决方案2
1 2013-09-16 11:40:44