Js用户引导插件bootstrap-tour
1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：http://bootstraptour.com/。
2.这个bootstrap-tour插件的版本是v0.12.0，复制下来代码，引入库应该直接可以运行。
3.点评一下：
a.插件会自己在localStorage里记录引导的信息，一般需求下，不用手动写这方面代码了
b.在每个step里提供onNext钩子，这个还是很方便的
c.可以像demo里这样动态产生一个节点(my-other-element)，提前在它上面定义step也是可以找到的
d.backdrop的时候，点下一步会闪，这个没找到在那设置，也不知道能不能设置，个人感觉不好看
e.这个插件没有提供hints的支持
f.element为id的时候没啥说的，为class的时候，会每个匹配上的class都出现引导
<html>
<head>
<link href="bootstrap-tour-standalone.min.css" rel="stylesheet"></link>
<script src="jquery-2.1.4.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>
<script>
$(function(){
$("#subm").on('click',function(){
var txt = $("#my-element").val();
$("#xiaol").html("<div >"+txt+"</div>");
})
tour = new Tour({
steps: [
{
element: "#div1",
title: "Title of my step",
content: "Content of my step",
placement:"auto",
backdrop:true,
onNext: function(tour){
var txt = $("#my-element").val();
if(!txt){
$("#my-element").val("xiaol")
}
$("#subm").click();
}
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step1111",
backdrop:true,
backdropContainer:"#my-other-element",
placement:"auto"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
})
</script>
</head>
<body>
<div >
<input ></input>
<button >submit</button>
</div>
<div ></div>
<button onclick="tour.restart()">test</button>
</body>
</html>