本人大二小学生一枚,大二的这个暑假时间有幸跟到一位老师做一些项目有关的事情。以上背景。
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、引导中对于引导文字的设计
呃呃,程序员加理工男在这说这个是不是有点多余。。。算了不说了。。。