简介 Breif
STEP BY STEP Jquery下一步导航插件
如何使用 How to use
/*
1、各初始化参数已经在注释中指明
2、使用插件时，指定触发事件的button即可，可多次实例化。
3、对于已有 非position:relative定位样式的元素 注意在stepIntro.css后，重新将定位写一遍以防止被覆盖。
4、每个step介绍文字的box都会添加相应class,如 第一步，1会添加class "step1" (其它如step2、step3等)，
可以单独设置每个介绍文字box的样式。
5、具体使用参考说明和实例
*/
//简单调用 指定步骤json即可
$(".start-button").stepIntro({
intro:{ //每步说明（可以为html）
1:"这是导航条",
2:"这是一张图片",
3:"这是一个绝对定位元素",
4:"这是一些介绍文字，告诉你该怎么使用"
}
});
//完整调用
$(".start-button").stepIntro({
introBoxId:"", //分步导航的ID (默认自动设置ID，如果自行定义，为保证重用，必须唯一)
stepFirst:1, //导航从第几步开始
animation:true, //是否打开scroll滚动动画效果（默认为true,为false时只有被介绍内容不在可视区域时才调用）
stepTag:"data-step", //HTML文档中步骤标记（默认为data-step,多次实例化时请指定不同data-step）
intro:{ //每步说明（可以为html）
1:"这是导航条",
2:"这是一张图片",
3:"这是一个绝对定位元素",
4:"这是一些介绍文字，告诉你该怎么使用",
5:"这是插件源码"
}
});
插件源码 Plugin Code
(function($){
stepIntroId=0;
$.fn.stepIntro=function(options){
var defaults={
stepTag:"data-step",
animation:true
};
var opts=$.extend(defaults,options);
if(!opts.introBoxId){
opts.introBoxId="stepIntroBox"+stepIntroId;
stepIntroId++;
}
var introBox=$("#"+opts.introBoxId),stepArr=[],i=0;
//intro JSON初始遍历
for(var o in opts.intro){
stepArr[i]=o;
i++;
}
//未指定stepFirst则默认为JSON中的第一个步骤
if(!opts.stepFirst){
opts.stepFirst=stepArr[0];
}
//STEP索引
var stepIndex=function(now,tag){
var j=0;
for(var o in opts.intro){
if(o==now){
return tag=="pre"?stepArr[j-1]:stepArr[j+1];
}
j++;
}
}
//stepBox样式重置
var stepBoxInit=function(){
$(".stepBox").each(function(index, element) {
var step=$(this).attr(opts.stepTag);
$(this).removeClass("stepBox step"+step);
});
}
//关闭STEP导航
var closeStep=function(){
stepBoxInit();
introBox.hide();
$("#intro-overlay").hide();
introBox.find(".close-step").hide();
}
//导航BOX位置自动设置
var boxPosSet=function(waitIntroBox,introBox){
var l=waitIntroBox.offset().left,
t=waitIntroBox.offset().top,
w=waitIntroBox.outerWidth(true),
h=waitIntroBox.height(),
iw=introBox.outerWidth(true),
ih=introBox.height();
//将Intro滑动到可视区域
if(t<0||opts.animation||(t+h>$(window).height())){
$('html,body').animate({ scrollTop: t-20 }, 200);
}
//Intro 超过可视区 则自动移动方位 优先级右->左->下
checkR=$(window).width()-(l+w+iw);
checkL=l-iw;
if(checkR>0){
introBox.css({left:l+w+10,top:t});
}else if(checkL>0){
introBox.css({left:l-iw-10,top:t});
}else{
introBox.css({left:l,top:t+h+10});
}
}
//事件绑定
var eventBind=function(){
introBox.find(".pre-step,.next-step").click(function(){
var step=$(this).attr("step");
stepSet(step);
})
introBox.find(".close-step,.close-step-btn").click(function(){
closeStep();
})
}
//STEP设置
var stepSet=function(now){
var waitIntroBox=$("["+opts.stepTag+"="+now+"]");
//标记检查
if(waitIntroBox.size()==0){
alert("HTML文档中没有"+opts.stepTag+"为 "+now+" 的标记！");
return false;
}
var stepIndexPre=stepIndex(now,"pre"),
stepIndexNext=stepIndex(now,"next"),
introContent=opts.intro[now];
//元素重置初始状态
stepBoxInit();
introBox.find(".close-step,.pre-step,.next-step").hide();
if($("#intro-overlay").size()==0){
$("body").append('<div id="intro-overlay"></div>');
}
if(introBox.size()==0){
var introBoxStr=
'<div class="stepIntroBox" id="'+opts.introBoxId+'">\
<span class="step-num">0</span>\
<span class="introContent"></span>\
<span class="introButtonBox">\
<button class="step-button pre-step">上一步</button>\
<button class="step-button next-step">下一步</button>\
<button class="step-button close-step">关闭</button>\
</span>\
<span class="close-step-btn" title="关闭">X</span>\
</div>';
$("#intro-overlay").append(introBoxStr);
introBox=$("#"+opts.introBoxId);
eventBind(); //事件绑定
}
if(stepIndexPre){
introBox.find(".pre-step").attr("step",stepIndexPre).show();
}
if(stepIndexNext){
introBox.find(".next-step").attr("step",stepIndexNext).show();
}else{
introBox.find(".close-step").show();
}
waitIntroBox.addClass("stepBox step"+now);
introBox.find(".step-num").text(now).end().find(".introContent").html(introContent).end().show();
$("#intro-overlay").show();
boxPosSet(waitIntroBox,introBox); //Set Position
}
return this.each(function(){
$(this).click(function(){
var stepFirst=opts.stepFirst;
stepSet(stepFirst);
})
});
}
})(jQuery);
绝对定位元素