如果你细心的话，你就会发现有部分网站在升级或者注册后，会出现分步引导。引导我们如何使用网站。最常见的应该就是支付宝。那么支付宝是如何实现这样的功能的呢？今天我就为大家介绍bootstrap-tour插件来揭开它的面纱。运行效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用tour对网站进行分步引导</title>
<link href="http://cdn.gbtags.com/bootstrap-tour/0.9.0/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.gbtags.com/bootstrap-tour/0.9.0/js/bootstrap-tour-standalone.js"></script>
<style type="text/css">
body{
background: #f5faff;
}
.demo_con{
width: 960px;
margin:40px auto 0;
}
.button{
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(5n){
margin-right: 0;
}
.button.gray{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.button.black{
border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
}
.button.red{
border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
.button.yellow{
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
}
.button.green{
border:1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);
}
.button.blue{
border:1px solid #1e7db9;
box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
background: linear-gradient(top,#42a4e0,#2e88c0);
}
</style>
</head>
<body>
<div class="page">
<section class="demo">
<div class="demo_con">
<button type="button" class="button gray" id="btn0">第1步</button>
<button type="button" class="button black" id="btn1">第2步</button>
<button type="button" class="button red" id="btn2">第3步</button>
<button type="button" class="button yellow" id="btn3">第4步</button>
<button type="button" class="button green" id="btn4">第5步</button>
<button type="button" class="button blue" id="btn5">第6步</button>
<button type="button" class="button gray" id="btn6">第7步</button>
<button type="button" class="button black" id="btn7">第8步</button>
<button type="button" class="button red" id="btn8">第9步</button>
<button type="button" class="button yellow" id="btn9">第10步</button>
<button type="button" class="button green" id="btn10">第11步</button>
<button type="button" class="button blue" id="btn11">第12步</button>
<button type="button" class="button gray" id="btn12">第13步</button>
<button type="button" class="button black" id="btn13">第14步</button>
<button type="button" class="button red" id="btn14">第15步</button>
<button type="button" class="button yellow" id="btn15">第16步</button>
<button type="button" class="button green" id="btn16">第17步</button>
<button type="button" class="button blue" id="btn17">第18步</button>
<button type="button" class="button gray">第19步</button>
<button type="button" class="button black">第20步</button>
<button type="button" class="button red">第21步</button>
<button type="button" class="button yellow">第22步</button>
<button type="button" class="button green">第23步</button>
<button type="button" class="button blue">第24步</button>
<button type="button" class="button gray">第25步</button>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function(){
var tour = new Tour({
storage: false,//可选参数：window.localStorage(缺省), window.sessionStorage ，false 或者自定义obj
debug:false,//是否调试,默认为false
steps: [
{element: "#btn0",title: "提示0",content: "内容0"},
{element: "#btn1",title: "提示1",content: "内容1"},
{element: "#btn2",title: "提示2",content: "内容2"},
{element: "#btn3",title: "提示3",content: "内容3"},
{element: "#btn4",title: "提示4",content: "内容4"},
{element: "#btn5",title: "提示5",content: "内容5"},
{element: "#btn6",title: "提示6",content: "内容6"},
{element: "#btn7",title: "提示7",content: "内容7"},
{element: "#btn8",title: "提示8",content: "内容8"},
{element: "#btn9",title: "提示9",content: "内容9"},
{element: "#btn10",title: "提示10",content: "内容10"},
{element: "#btn11",title: "提示11",content: "内容11"},
{element: "#btn12",title: "提示12",content: "内容12"},
{element: "#btn13",title: "提示13",content: "内容13"},
{element: "#btn14",title: "提示14",content: "内容14"},
{element: "#btn15",title: "提示15",content: "内容15"},
{element: "#btn16",title: "提示16",content: "内容16"},
{element: "#btn17",title: "提示17",content: "内容17"},
{element: "#btn18",title: "提示18",content: "内容18"},
{element: "#btn19",title: "提示19",content: "内容19"},
{element: "#btn20",title: "提示20",content: "内容20"},
{element: "#btn21",title: "提示21",content: "内容21"},
{element: "#btn22",title: "提示22",content: "内容22"},
{element: "#btn23",title: "提示23",content: "内容23"},
{element: "#btn24",title: "提示24",content: "内容24"},
{element: "#btn25",title: "提示25",content: "内容25"}
],
//操作模板
template:"<div class='popover'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'>" +
"<div class='btn-group'><button class='btn btn-sm btn-default' data-role='prev'>« 上一步</button><button class='btn btn-sm btn-default' data-role='next'>下一步 »</button>" +
"<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>暂停</button></div><button class='btn btn-sm btn-default' data-role='end'>知道了</button></div></div>"
});
//打印出对象，可以设置更多属性，包括键盘控制，箭头指向等
console.log(tour);
tour.init();
tour.start();
//分步引导框架还有很多，如：TourTip、Intro.js、aSimpleTour、pageguide.js、Joyride、WEBSITE TOUR、Bootstro.js、Bootstrap Tour、、jQuery Site Tour、jQuery TourBus、Trip.js、Crumble等
});
</script>
</body>
</html>
： » 使用tour对网站进行分步引导
原创文章，作者：carmelaweatherly，如若转载，请注明出处：https://blog.ytso.com/251117.html