jquery - 如何使引导程序工作？

Question

我在页面中有此代码。我正在尝试使 bootstrap-tour 工作，但它没有发生。我究竟做错了什么？我在这里想念什么？

<!DOCTYPE html>
<html>
<head>

    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-tour.css" rel="stylesheet">
    <link href="bootstrap-tour.min.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="html5shiv.js"><![endif]-->
        <script>
    // Instance the tour
    var tour = new Tour();

    // Add your steps. Not too many, you don't really want to get your users sleepy
    tour.addSteps([
      {
      element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
      title: "Title of my step", // string - title of the popover
      content: "Content of my step" // string - content of the popover
    },
  {
    element: "#content1",
    title: "Title of my step",
    content: "Content of my step"
  }
 ]);

 // Initialize the tour
 tour.init();

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


</head>
<body>


<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>



<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.js"></script>
<script src="bootstrap-tour.min.js"></script>
</body>
</html>

我在谷歌上搜索过，但似乎没有人在安排旅行时遇到过任何麻烦。我不知道我错过了什么。可以是一些简单的事情。帮帮我，伙计们。我已经包含了这些文件：

CSS::

Bootstrap.css v3.0.0
bootstrap-tour.css - v0.8.0
bootstrap-tour.min.css - v0.8.0

JS::

bootstrap-tour.min.js - v0.8.0
bootstrap-tour.js - v0.8.0
bootstrap-popover.js v2.0.4
bootstrap-tooltip.js v2.0.4
jQuery JavaScript Library v1.9.0

score 6 · Accepted Answer

见http://jsfiddle.net/4uS59/

你在你的 html 中有错误的 id

<div id="#content">
    Hello, World!
</div>
<br><br><br>
<div id="#content1">
    Another Hello, World!
</div>

应该

<div id="content">
    Hello, World!
</div>
<br><br><br>
<div id="content1">
    Another Hello, World!
</div>

score 4 · Accepted Answer

根据我的经验，当您调用游览脚本时，您必须将阶段放在下面。

因此，您在标签中概述的步骤应插入到结束标签之前。这应该使这些步骤起作用。目前，您正在为尚未加载的脚本初始化步骤。

所以它应该是这样的：

<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script>
  // Instance the tour
  var tour = new Tour();

  // Add your steps. Not too many, you don't really want to get your users sleepy
  tour.addSteps([
    {
      element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown
      title: "Title of my step", // string - title of the popover
      content: "Content of my step" // string - content of the popover
    },
    {
      element: "#content1",
      title: "Title of my step",
      content: "Content of my step"
    }
 ]);

 // Initialize the tour
 tour.init();

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

这就是我让我的工作的方式。

score 3 · Accepted Answer

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

您需要在浏览器中清除 localStorage，或者（可能更简单）更改您的游览名称，如下所示：

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

上述方法对我有用，因为我遇到了同样的问题。我在调试代码本身并发现它试图获取当前步骤“1”而不是“0”之后找到了修复，这是错误的索引。

score 1 · Accepted Answer

检查示例代码

HTML

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

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

JS

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"
});

tour.restart();

提琴手

score 1 · Accepted Answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My ToDo Application</title>
    <link href="style.css" rel="stylesheet" type = "text/css"/>
    <link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-tour.min.css" rel="stylesheet">



</head>
<body>
        <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-tour.min.js"></script>


    <div id = "pop-up">

        <div id="form">

                <h2>Welcome to ToDo Manager</h2><hr>
        <input type="text" id = 'username' placeholder = "Enter ToDo Name here"><br>
        <button value="Continue" id='Create'>Continue</button><br><br>
        <p id = "warning">**<span>NOTE: </span>Refreshing the page will lead to loss of data created**</p>
        </div>
    </div>
    <div id = "body">
    <div>
            <p id = "warning" class = "align">**<span> NOTE: </span>Refreshing the page will lead to loss of data created**</p>
    <h1 id = manager>The ToDo Manager</h1><hr>
    <p id = "hello"></p>
        <input type="text" placeholder = "Enter you Todo here" id = 'newTodo'required><br>
        <button id = "add">Add ToDo</button><br>
        <button id = "remove">Remove ToDo</button> <br>
        <button id = "removeAll">Clear List</button> 

        <ul id="list">


        </ul>
    </div>
    <script src="script.js"></script>
    <script>var tour = new Tour({
            steps: [
            {
              element: "#newTodo",
              title: "Todo Title",
              content: "Enter the name of the task here, to add it in your task list."
            },
            {
              element: "#add",
              title: "Add Button",
              content: "Clicking this will add your new task to the list."
            },
            {
                element: "#remove",
                title: "Delete Button",
                content: "Clicking this will delete the completed (striked) tasks from the list."
            },
            {
               element: "#removeAll",
               title: "Delete all Button",
               content: "Clicking this will delete all the tasks from the list."
            },
            {
                element: "#manager",
                title: "ToDo Manager",
                content: "Hey "+username+"! Dont forget to complete your tasks!"
            }

          ],
          animation: true,
    backdrop: true,  
    storage: false,
    smartPlacement: true,
        });

          // Initialize the tour
          tour.init();

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

</div>
</body>
</html>



why is this not working??

score 0 · Accepted Answer

对于其他遇到此问题的人，假设您已经尝试过其他建议，如果将 JQuery 与 Bootstrap Tour 一起使用，则将脚本包装在 JQuery onload 函数中对我有用，以确保首先加载所有要求：

$(function() { ... });

像这样：

    <script>
    $(function () {
        // Instance the tour
        var tour = new Tour({
            name: 'one',
            steps: [
                {
                    element: "#my-element",
                    title: "Title of my step",
                    content: "Content of my step"
                },
                {
                    element: "#my-other-element",
                    title: "Title of my step",
                    content: "Content of my step"
                }
            ]
        });

        // Initialize the tour
        tour.init();

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

确保步骤中的每个“元素”都引用了您页面上的 HTML 元素的 id，以便游览知道它应该指向什么 - 否则它不会显示。

jquery - 如何使引导程序工作？

6 回答 6

Related

Reference