twitter-bootstrap 如何使 bootstrap-tour 工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20816893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap-tour work?
提问by ST''
I have this code in a page. I'm trying to make bootstrap-tour work but it's not happening. What am I doing wrong? What am I missing here?
我在一个页面中有这个代码。我正在尝试使 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>
I searched in google but it seems no one has ever had any trouble in getting the tour set-up. I don't know what am I missing. Can be some simple thing. Help me guys. I've included these files:
我在谷歌上搜索过，但似乎没有人在设置旅游时遇到过任何麻烦。我不知道我错过了什么。可以是一些简单的事情。帮帮我吧伙计们。我已经包含了这些文件：
CSS::
CSS::
Bootstrap.css v3.0.0
bootstrap-tour.css - v0.8.0
bootstrap-tour.min.css - v0.8.0
JS::
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
回答by Dev
See http://jsfiddle.net/4uS59/
you have wrong ids in yout html
你在你的 html 中有错误的 id
<div id="#content">
Hello, World!
</div>
<br><br><br>
<div id="#content1">
Another Hello, World!
</div>
should be
应该
<div id="content">
Hello, World!
</div>
<br><br><br>
<div id="content1">
Another Hello, World!
</div>
回答by BigMan Kev
From my experience you have to put the stages below when you call the tour script.
根据我的经验，当您调用游览脚本时，您必须将阶段放在下面。
So the steps you outline in the tag should be inserted just before the end tag. This should then make the steps work. Currently you are initialising steps which are for a script that hasn't been loaded.
因此，您在标签中概述的步骤应插入在结束标签之前。然后这应该使这些步骤起作用。当前，您正在为尚未加载的脚本初始化步骤。
So it should look like this:
所以它应该是这样的：
<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>
That's how I got mine to work.
这就是我如何让我的工作。
回答by Damien Overeem
Bootstraptour stores the tour's progress in your localStorage. This also means that when you are trying to set it up and ie. used a wrong element ID, bootstraptour can still store that it should display step 2 next time.. even if it does not exist, at which point it does nothing.
Bootstraptour 将游览的进度存储在您的 localStorage 中。这也意味着当您尝试设置它时，即。使用了错误的元素 ID，引导程序仍然可以存储它下次应该显示第 2 步......即使它不存在，此时它什么也不做。
You either need to clear your localStorage in your browser, or (perhaps easier), change the name of your tour like so:
您要么需要在浏览器中清除 localStorage，要么（也许更简单）像这样更改您的游览的名称：
var tour = new Tour({
name: '<some random name>'
});
The above method worked for me, since i was having the same problem. I located the fix after debugging the code itself and finding out it was trying to get currentstep "1" instead of "0", which was the wrong index.
上述方法对我有用，因为我遇到了同样的问题。我在调试代码本身并发现它试图获取当前步骤“1”而不是“0”后找到了修复程序，这是错误的索引。
回答by shivaP
check the sample code
检查示例代码
HTML
<input id="one" value="one"/><br/>
<input id="two" value="two"/><br/>
<input id="three" value="three"/><br/>
CSS
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
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();
回答by user11678618
<!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??
回答by laney
For anyone else landing on this issue, assuming you've tried the other suggestions, if using JQuery with Bootstrap Tour, wrapping the script in the JQuery onload function worked for me to ensure all requirements were loaded first:
对于遇到此问题的其他人，假设您已经尝试了其他建议，如果将 JQuery 与 Bootstrap Tour 一起使用，将脚本包装在 JQuery onload 函数中对我有用，以确保首先加载所有要求：
$(function() { ... });
like this:
像这样：
<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>
Make sure each 'element' in the steps is referencing an id of a HTML element on your page so the tour knows what it should be pointing at - otherwise it wont show.
确保步骤中的每个“元素”都引用了页面上 HTML 元素的 id，以便游览知道它应该指向什么 - 否则它不会显示。
