Elt*_*ton 4 twitter-bootstrap bootstrap-tour
<!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.我已经查看了插件主页的说明,但它也没有帮助.
Dam*_*eem 17
Bootstraptour将巡演的进度存储在localStorage中.这也意味着当你试图设置它时,即.使用了错误的元素ID,bootstraptour仍然可以存储它应该下次显示第2步..即使它不存在,此时它什么都不做.
您需要在浏览器中清除localStorage,或者(可能更容易),更改您的游览名称,如下所示:
var tour = new Tour({
name: '<some random name>'
});
上面的方法对我有用,因为我遇到了同样的问题.我在调试代码本身后找到了修复程序并发现它试图获得currenttep"1"而不是"0",这是错误的索引.
Nic*_*lai 10
element: "#see-schedule".没有它,在第一步之后,"旅行"将变得无形.tour.start(true)- 来自文档API:开始游览.传递true以强制开始.
可能你会想要一些按钮来开始巡回赛.它的代码如下所示:
<a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>
$("#startTour").click(function(){
tour.restart();
})
关于JsFiddle的示例- 在窗口上启动游览自动加载,并在"开始游览"按钮单击开始.
我发现在使用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();
| 归档时间： |
|
| 查看次数： |
8058 次 |
| 最近记录： |