本人大二小学生一枚，大二的这个暑假时间有幸跟到一位老师做一些项目有关的事情。以上背景。
intro.js可以更好地介绍网站和功能，并为您的项目提供分步指南。
(点击上方文字可以链接到github)
基本功能嘛，相信大家能够搜索这个名字一定是慕名而来，在这里就不多讲了，在Github仓库中example文件夹中可以打开index的html文件，可以看到各种引导形式的web表现。
这篇文章主要讲以下intro.js的以下几点滴啊：
1、如何插入图片
只需将data－intro中加入img标签即可，就按照最标准的html标记语言来写就OK。例如：data-intro＝“balabala......nuo,this is a photo<img src='./1.png'>.”
2、如何跳页引导
跳页引导是一种很常见的web引导方式，在进行页面转换的时候就要传递相应的web页面参数告诉浏览器‘我要跳转了 老兄 你继续吧’
那么在跳转的页面中你就需要做一些工作来进行喊话：
喊话方式A：直接型（直接定义url的传递变量）
href="second.html?multipage=true"
喊话方式B：羞涩型（增加一个js标签，把这个函数加进去，发送参数，顺便把最后一步的结束标签替换成下一页）
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
window.location.href = 'second.html?multipage=true';
});
3、如何从制定的步数开始引导
这个是用两种官方方式的one is goToStep()；another is goToStepNumber()
用起来比较顺手的是introJs().goToStepNumber(1).start()；这种方式的话在括号中直接定义出需要跳转步骤的序号（data-step）即可，
4、利用js进行对按钮的监听，若有此按钮则进行引导，若无则pass
if (RegExp('multipage', 'gi').test(window.location.search)) {
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
function IsLoad(_url,fun){
$.ajax({
url:_url,
type:"get",
success:function(){
//说明请求的url存在，并且可以访问
if($.isFunction(fun)){
fun(true);
}
},
statusCode:{
404:function(){
//说明请求的url不存在
if($.isFunction(fun)){
fun(false);
}
}
}
});
}
//调用
var enter=[],
_enter=document.getElementsByTagName('a');
var enter_href;
var buffer_href;
for (var i=0; i<_enter.length; i++){
var re = '/home';
buffer_href=_enter[i].href;
if (buffer_href.match(re)!=null){
enter_href=buffer_href;
break;
}
}
if(enter_href!=undefined){
enter_href=enter_href+'?multipage=true';
window.location.href = enter_href;
}
else
{
alert("引导需要资源不存在，请您按照上一步引导操作之后，在进行点击。");
}
});
introJs().start();
}
5、引导中对于引导文字的设计
呃呃，程序员加理工男在这说这个是不是有点多余。。。算了不说了。。。
网友评论