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

时间：2013-09-15 17:03:23

标签： javascript twitter-bootstrap

我正在玩Bootstrap Tour，我发现自己陷入了导航页面。

在我的导览中，第四步将用户从index.cshtml带到page.cshtml，这可以正常工作，但是在page.cshtml中没有打开导览框，所以我无法从目标页面导航回来。

在bootstraptour.com的Bootstrap游览演示中，我无法识别javascript以在page.cshtml中打开游览弹出窗口或处理返回到index.cshtml的回复。只有一个带有一个名为container的类的div，以及Bootstraptour demo page.html中的依赖关系链接。

我尝试了不同的选择而没有快乐。那么，任何人都可以帮我打开page.cshtml中的弹出窗口并使用它导航回原始的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 

    @{

}

<!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>

2 个答案:

答案 0 :(得分：2)

我看到了几个问题：

  1. 在#step-four

    2. 的标记中找不到您为第四步（page.cshtml）指定的元素

  2. 第五步未定义element，我认为除非您将orphan选项设置为true

    3. ，否则需要使用一个page.cshtml

  3. 您必须在page.html中包含所有巡演代码，如果您在index.js中检查演示的来源，则最后引用的脚本tour.restart();包含巡视实例。< / p>

    4. 最后，我不确定这是否会产生任何影响，但我认为您对tour.start(true);和{{1}}的调用应该交换位置

答案 1 :(得分：1)

再看看如何浏览导览中的页面我回到了昨天的位置：导览从index.cshtml更改为page.cshtml并返回，但只需单击一下 - page.cshtml只是闪烁打开。巡视步骤弹出窗口不会在page.cshtml中打开，我们不会留在该页面上。

所以，我想我会在page.cshtml（第五步和第六步）和BINGO上添加另一个步骤！

感谢指针的kuala_dev。工作代码如下：

<强> 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 

@{

}

<!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>
相关问题
最新问题