twitter-bootstrap - Bootstrap Tour根本不工作

twitter-bootstrap - Bootstrap Tour根本不工作,第1张

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Trello Inspired</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/plugins/bootstrap-tour.min.css">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  </head>
  <body>
    <div class="left-container">
      <span class="logo"><h2>Title 2</h2></span>
      <p class="left-msg welcom-msg">Now that registration and filling out forms is out the way, let's get you all set up.</p>
      <p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
    </div>
    <div class="right-container">
      <button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
      <button class="btn btn-default start-exam-btn" style="display:none;">Preparation</button>
    </div>
  </body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../js/libs/bootstrap.min.js"></script>
  <script src="../js/plugins/bootstrap-tour.min.js"></script>
  <script type="text/javascript">

    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#enrol-btn1",
        title: "Exam Enrolment",
        content: "First let's enrol to an exam"
      },
      {
        element: "#see-schedule",
        title: "Your Schedule",
        content: "Great, let's see your new schedule."
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
  </script>
</html>

我添加了所有必要的依赖项。我正在使用Bootstrap 3,所以不需要单独包含popover.js。我查看了plugin home page的说明,但也没有帮助。

最佳答案:

7 个答案:

答案 0 :(得分:16)

Bootstraptour将巡演的进度存储在您的localStorage中。这也意味着当你试图设置它时,即。使用了错误的元素ID,bootstraptour仍然可以存储它应该下次显示第2步..即使它不存在,此时它什么也不做。

您需要在浏览器中清除localStorage,或者(可能更容易),更改您的游览名称,如下所示:

var tour = new Tour({
    name: '<some random name>'
});

上述方法对我有用,因为我遇到了同样的问题。我在调试代码本身之后找到了修复程序并发现它正试图获得currenttep&#34; 1&#34;而不是&#34; 0&#34;,这是错误的索引。

答案 1 :(得分:10)

  1. 您应该添加为游览的第二步指定的元素:element: "#see-schedule"。在第一步之后没有它&#34;巡演&#34;将变得隐形。
  2. 使用tour.start(true) - 来自documentation API:
  3.   

    开始游览。传递true以强制开始。

    可能你会想要一些按钮来开始巡回赛。它的代码如下:

    <a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>
    
    $("#startTour").click(function(){
        tour.restart();
    })
    

    JsFiddle 上的示例 - 在窗口加载后开始游览,并且开始游览&#34;开始游览&#34;按钮单击。

    答案 2 :(得分:4)

    我发现在使用Bootstrap Tour进行开发时,如果在初始化之前清除“localStorage”,则会使生活更轻松,因此您不会获得任何延迟的会话数据。对于最初的问题,这将是:

    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#enrol-btn1",
        title: "Exam Enrolment",
        content: "First let's enrol to an exam"
      },
      {
        element: "#see-schedule",
        title: "Your Schedule",
        content: "Great, let's see your new schedule."
      }
    ]});
    
    // Clear bootstrap tour session data
    localStorage.removeItem('tour_current_step');
    localStorage.removeItem('tour_end');
    
    // Initialize the tour
    tour.init();
    
    // Start the tour
    tour.start();
    

    答案 3 :(得分:2)

    我发现intro.js要好得多(小包装)Linqer

    答案 4 :(得分:1)

    我发现为巡回赛命名,然后清除本地存储帮助我进行Bootstrap Tour

    var tour = new Tour({
        name: 'mytourname'
    ]});
    
    localStorage.clear();
    // or
    localStorage.removeItem("mytourname_end");
    

    ;

    答案 5 :(得分:0)

    我的巡演不会偶尔开始,我发现每次你必须在本地存储中有以下两个键时,bootstrap-tour才能正常工作(从浏览器的开发者工具中查看本地存储) -

    1. Site Tour_current_step =“0”
    2. Site Tour_end =“yes”
    3. 只要您调用该功能以启动导览,请设置这些密钥(如果它们不在您的本地存储中)。我通过javascript手动设置这些键,它现在完美地工作。希望它有所帮助。

      答案 6 :(得分:0)

      您可能正在使用引导程序4.3.1,此扩展程序与此引导程序版本不兼容。 您可以尝试使用Bootstrap 3.3.1,但此更改可能会损坏您的实际外观。

      本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复