JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能

来源：互联网发布：windows 重叠io 编辑：程序博客网时间：2024/06/06 03:46

因某个单独网页中的功能较多，或者按钮提示较多，为方便用户更了解页面功能，在网上找了一个类似安装教程下一步下一步的代码。对所找到的代码进行了封装，更方便调用和扩展。目前可以配置的选项只有showCloseButton，值为布尔类型。

先看效果图：

调用时，需引入jquery文件，WebPageGuide.js，WebPageGuide.css。调用时先实例化一个WebPageGuide对象，然后使用其newGuidStep进行调用，方法中第一个参数为提示框针对的页面标签，即指向页面中想要介绍功能的标签。第二个参数是标题，第三个参数是内容。
，网页代码以及调用的方式：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title>    <link href="WebPageGuide.css" rel="stylesheet" /><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" src="WebPageGuide.js"></script><script type="text/javascript">$(function(){var steplist = $.WebPageGuide({showCloseButton:true});steplist.newGuidStep("#target","这是标题1啊这是标题1啊这是标题1啊这是标题1啊","更嫩诶诶额更嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额更嫩诶诶额");steplist.newGuidStep("#target2","这是标题2啊","更嫩诶诶额");steplist.newGuidStep("#target3","这是标题3啊","更嫩诶诶额");    steplist.newGuidStep("#target4","这是标题4啊","更嫩诶诶额");    steplist.newGuidStep("#target5","这是标题5啊","更嫩诶诶额");    steplist.newGuidStep("#target6","这是标题6啊","更嫩诶诶额");steplist.startGuide();});</script></head><body style="height:2500px;"><div style="width:200px;height:200px;background-color:blue;margin:0px 0px 0px 200px;" id="target"></div>   <div style="width:200px;height:200px;background-color:red;position:absolute;left:20px;top:500px" id="target2"></div>       <div style="width:200px;height:200px;background-color:yellow;position:absolute;left:20px;top:1700px" id="target3"></div>       <div style="width:200px;height:200px;background-color:green;position:absolute;right:20px;top:700px" id="target4"></div>       <div style="width:200px;height:200px;background-color:brown;position:absolute;right:20px;top:300px" id="target5"></div>       <div style="width:200px;height:200px;background-color:pink;position:absolute;right:20px;top:20px" id="target6"></div></body></html>

插件代码：

(function ($) {            var WebPageGuide = function (options) {                this.settings = {                showCloseButton:true,                    source: null                }                this.closeButton='<a href="javascript:void(0);" class="WPGclose" title="关闭新手帮助">×</a>';                this.stepTemplate='<div class="WPGstep" step="" >'                +'<b class="WPGjt" style=""></b>'                +'<p><span class="h1 WPGstepNum"></span><span class="h2 WPGstepTitle"></span>'                +'<br><span class="WPGstepContent"></span><a href="###" class="WPGnext">下一步</a></p></div>';                this.settings = $.extend(this.settings, options);                this.stepList=[];                if(this.settings.showCloseButton)                    this.mask='<div class="WPGhelp">'+this.closeButton+'</div>';                else                    this.mask='<div class="WPGhelp"></div>';                $("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;}

目前还没有扩展很多内容，后续添加

0 0