JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能
因某个单独网页中的功能较多，或者按钮提示较多，为方便用户更了解页面功能，在网上找了一个类似安装教程下一步下一步的代码。对所找到的代码进行了封装，更方便调用和扩展。目前可以配置的选项只有showCloseButton，值为布尔类型。
先看效果图：
调用时，需引入jquery文件，WebPageGuide.js，WebPageGuide.css。调用时先实例化一个WebPageGuide对象，然后使用其newGuidStep进行调用，方法中第一个参数为提示框针对的页面标签，即指向页面中想要介绍功能的标签。第二个参数是标题，第三个参数是内容。
，网页代码以及调用的方式：
无标题文档
插件代码：
(function ($) {
var WebPageGuide = function (options) {
this.settings = {
showCloseButton:true,
source: null
}
this.closeButton='×';
this.stepTemplate=''
+''
+''
+'
下一步
';
this.settings = $.extend(this.settings, options);
this.stepList=[];
if(this.settings.showCloseButton)
this.mask=''+this.closeButton+'';
else
this.mask='';
$("body").append(this.mask);
$(".WPGhelp").css({height:document.body.offsetHeight});
$(".WPGclose").click(function(){
$('.WPGhelp').remove();
});
return this;
}
var num;
WebPageGuide.prototype = {
newGuidStep: function (source,title,content) {
var item = {};
num = this.stepList.length;
item.source=source;
item.title = title;
item.content = content;
item.container=$(this.stepTemplate);
item.container.find(".WPGstepTitle").html(item.title);
item.container.find(".WPGstepContent").html(item.content);
item.container.attr("step",num);
item.container.attr("id","step"+num);
item.container.find(".WPGstepNum").html(num+1);
//绑定下一步事件
item.container.find(".WPGnext").click(function(){
var obj = $(this).parents('.WPGstep');
var step = obj.attr('step');
obj.hide();
if(parseInt(step)==num)//最后一个按钮时候删除添加的标签
{
$('.WPGhelp').remove();
}
else
{
$('#step'+(parseInt(step)+1)).show();
var scroll_offset = $('#step'+(parseInt(step)+1)).offset(); //得到pos这个div层的offset，包含两个值，top和left
$("body,html").animate({
scrollTop: scroll_offset.top-window.screen.availHeight/2 //让body的scrollTop等于pos的top，就实现了滚动
}, 400);
}
});
this.stepList.push(item);
//先添加到页面中，否则无法获取container的宽高
$(".WPGhelp").append(item.container);
var target=$(source);
var corner = item.container.find(".WPGjt");
var tleft = target.offset().left;
var ttop = target.offset().top;
var twidth = target.width();
var theight = target.height();
var cheight=item.container.height();
var cwidth = item.container.width();
var cpaddingHeight = parseInt(item.container.css("padding-bottom"))+parseInt(item.container.css("padding-top"));
var cpaddingWidth = parseInt(item.container.css("padding-left"))+parseInt(item.container.css("padding-right"));
var cnBorder=20;
//根据target的位置设置提示框的位置
if(tleft<(document.body.offsetWidth/2))
{
if(ttop<(document.body.offsetHeight/4))
{
item.container.css({
top:ttop+theight+cnBorder,
left:tleft+twidth/2
});
corner.addClass("WPGjt_topleft");
}
else if(ttop>(document.body.offsetHeight*3/4))
{
item.container.css({
top:ttop-cheight-cpaddingHeight-cnBorder,
left:tleft+twidth/2
});
corner.addClass("WPGjt_bottomleft");
}
else
{
item.container.css({
top:ttop+(theight-cheight-cpaddingHeight)/2,
left:tleft+twidth+cnBorder
});
corner.addClass("WPGjt_left");
}
}
else
{
if(ttop<(document.body.offsetHeight/4))
{
item.container.css({
top:ttop+theight+cnBorder,
left:tleft-cwidth/2
});
corner.addClass("WPGjt_topright");
}
else if(ttop>(document.body.offsetHeight*3/4))
{
item.container.css({
top:ttop-cheight-cpaddingHeight-cnBorder,
left:tleft-cwidth/2
});
corner.addClass("WPGjt_bottomright");
}
else
{
item.container.css({
top:ttop+(theight-cheight-cpaddingHeight)/2,
left:tleft-cwidth-cpaddingWidth-cnBorder
});
corner.addClass("WPGjt_right");
}
}
return item;
},
startGuide:function(){
//建议不要使用display:none，否则在添加时候无法获取目标宽高，位置会有偏差
$(".WPGhelp").css("visibility","visible");
//最后一个按钮内容为完成
this.stepList[this.stepList.length-1].container.find(".WPGnext").html("完成");
this.stepList[0].container.show();
}
}
$.extend({
WebPageGuide:function(options){
return new WebPageGuide(options);
}
});
})(jQuery);CSS：
*{margin:0;padding:0}
form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p{list-style:none outside none}
span,a{font-family: 微软雅黑}
html{height:100%;overflow:hidden;-moz-user-select:none;-khtml-user-select:none;user-select:none}
.WPGhelp{position:absolute;z-index:5555;width:100%;height:100%;background:none rgba(0, 0, 0, 0.4);visibility: hidden;top:0px;left:0px;}
.WPGclose{float:right;font-size:40px;color:#fff;width:40px;height:40px;line-height:36px;text-align:center;background:none;background:none rgba(50, 50, 50, 0.7);text-decoration:none}
.WPGclose:hover{background:none rgba(0, 0, 0, 0.7)}
.WPGstep{position:absolute;padding:15px;color:#eee;background:none rgba(0, 0, 0, 0.7);border-radius:5px;display:none;width:250px;height:auto;}
.WPGstep .WPGjt{font-size:0;height:0;border:20px solid rgba(0, 0, 0, 0);position:absolute}
.WPGstep .WPGjt_left{border-right:20px solid rgba(0, 0, 0, 0.7);left:-40px;top:40px}
.WPGstep .WPGjt_right{border-left:20px solid rgba(0, 0, 0, 0.7);left:280px;top:40px;}
.WPGstep .WPGjt_topleft{border-bottom:20px solid rgba(0, 0, 0, 0.7);left:20px;top:-40px}
.WPGstep .WPGjt_topright{border-bottom:20px solid rgba(0, 0, 0, 0.7);left:220px;top:-40px}
.WPGstep .WPGjt_bottomleft{border-top:20px solid rgba(0, 0, 0, 0.7);bottom:-40px;left:20px;}
.WPGstep .WPGjt_bottomright{border-top:20px solid rgba(0, 0, 0, 0.7);bottom:-40px;left:220px;}
.WPGstep .WPGstepNum{display: inline-block;
border: 3px solid white;
width: 34px;
height: 34px;
text-align: center;
border-radius: 20px;
font-weight: bolder;
font-size: 27px;}
.WPGstep .h2{font-size:28px;font-weight:bold;padding-left:10px}
.WPGstep .WPGnext,
.WPGstep .WPGover{border:1px solid #fff;color:#fff;padding:0 5px;float:right;margin-top:10px;text-decoration:none}
.WPGstep .WPGnext:hover,
.WPGstep .WPGover:hover{background:none gray}
.WPGstep .WPGstepContent{text-indent: 2em;display: block;}目前还没有扩展很多内容，后续添加