4

我正在玩 Bootstrap Tour，发现自己卡在导航页面上。

在我的导览中，第四步将用户从 index.cshtml 带到 page.cshtml，效果很好，但是导览框在 page.cshtml 中没有打开，因此我无法从目标页面导航回来。

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

我尝试了不同的选择，但并不快乐。那么，任何人都可以帮我在 page.cshtml 中打开一个弹出窗口并使用它导航回原始 index.cshtml 吗？谢谢。

这是我所拥有的：

索引.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>
4

2 回答 2

2

我看到几个问题：

  1. #step-four在标记中找不到您为第四步 ( ) 指定的元素page.cshtml

  2. 第五步没有element定义，我相信除非您将orphan选项设置为true

  3. 如果您在最后一个引用的脚本中page.cshtml检查演示的源代码包含游览实例，则您还必须包含所有游览代码。page.htmlindex.js

最后，我不确定这是否会有所不同，但我认为您的电话tour.restart();应该 tour.start(true);交换位置

于 2013-09-15T19:56:27.503 回答
1

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

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

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

索引.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>

页面.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>
于 2013-09-16T11:40:44.487 回答