210 lines
9.1 KiB
JavaScript
210 lines
9.1 KiB
JavaScript
|
||
|
||
function WebPageGuide(options) {
|
||
var WPGnextvalType = getlocalStorage("WPGnextval ");
|
||
if (WPGnextvalType===true) {
|
||
console.log("说明框已被阅读")
|
||
} else {
|
||
this.settings = {
|
||
showCloseButton: true,
|
||
source: null
|
||
}
|
||
this.closeButton = '<a href="javascript:void(0);" class="WPGclose" title="关闭使用帮助">×</a>';
|
||
this.stepTemplate = '<div class="WPGnextbox" step="" >'
|
||
+'<div class="WPGstep" step="" >'
|
||
+ '<b class="WPGjt" style=""></b>'
|
||
+ '<span class="h1 demonstration">代码标注使用提示</span>'
|
||
+ '<p><span class="h2 WPGstepTitle"></span>'
|
||
+ '<br><span class="WPGstepContent"></span>' +
|
||
'<div class="webinputcheckbox"><input type="checkbox" style="margin-top: 10px !important;" class="newwebinputcheckbox" value="true" />下次不再显示代码注释提示</div>' +
|
||
'<a href="###" class="WPGnext">下一步</a>' +
|
||
'<a href="###" class="topWPGnext">上一步</a>' +
|
||
'</p>' +
|
||
'</div>'+
|
||
'</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;
|
||
}
|
||
// WebPageGuide.prototype = {
|
||
//
|
||
// }
|
||
$.extend({
|
||
WebPageGuide: function (options) {
|
||
return new WebPageGuide(options);
|
||
}
|
||
});
|
||
}
|
||
var num;
|
||
var step;
|
||
var stepnuma;
|
||
function newGuidStep(source, title, content) {
|
||
var item = {};
|
||
num = this.stepList.length;
|
||
item.source = source;
|
||
item.title = title;
|
||
item.content = content;
|
||
item.container = $(this.stepTemplate);
|
||
var img;
|
||
if( typeof(content)==="string" ){
|
||
img = "<img src=" + item.content + ">";
|
||
item.container.find(".WPGstepContent").append(img);
|
||
}else if(typeof(content)==="object"){
|
||
var img1;
|
||
var img2;
|
||
var img3;
|
||
for(var i=0;i<content.length;i++){
|
||
if(i===0){
|
||
img1="<div class='Codelabeimg'><a href="+content[0].codepath+" target=\"_blank\">"+1+"."+content[0].code+"</a></div>"
|
||
}
|
||
if(i===1){
|
||
img2="<div class='Codelabeimg'><a href="+content[1].codepath+" target=\"blank\">"+2+"."+content[1].code+"</a></div>"
|
||
}
|
||
if(i===2){
|
||
img3="<div class='Codelabeimg'><a href="+content[2].codepath+" target=\"blank\">"+3+"."+content[2].code+"</a></div>"
|
||
}
|
||
}
|
||
img="<div>"+img1+img2+img3+"</div>";
|
||
item.container.find(".WPGstepContent").append(img);
|
||
}
|
||
|
||
item.container.find(".WPGstepTitle").html(item.title);
|
||
|
||
item.container.attr("step", num);
|
||
item.container.attr("id", "step" + num);
|
||
|
||
//绑定下一步事件
|
||
item.container.find(".WPGnext").click(function () {
|
||
var obj = $(this).parents('.WPGnextbox');
|
||
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);
|
||
}
|
||
stepnuma=parseInt(step)+1;
|
||
});
|
||
|
||
//绑定上一步事件
|
||
item.container.find(".topWPGnext").click(function () {
|
||
var obj = $(this).parents('.topWPGnext');
|
||
// var step = obj.attr('step');
|
||
obj.hide();
|
||
console.log(stepnuma)
|
||
|
||
var stepnum=stepnuma- 1
|
||
|
||
if (parseInt(step)===0){
|
||
stepnum=0;
|
||
}
|
||
$('#step' + stepnum ).show();
|
||
var scroll_offset = $('#step' + stepnum - 1).offset(); //得到pos这个div层的offset，包含两个值，top和left
|
||
// $("body,html").animate({
|
||
// scrollTop: scroll_offset.top - window.screen.availHeight / 2 //让body的scrollTop等于pos的top，就实现了滚动
|
||
// }, 400);
|
||
stepnuma=stepnuma-1;
|
||
});
|
||
|
||
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;
|
||
}
|
||
function startGuide() {
|
||
//建议不要使用display:none，否则在添加时候无法获取目标宽高，位置会有偏差
|
||
|
||
$(".WPGhelp").css("visibility", "visible");
|
||
//最后一个按钮内容为完成
|
||
this.stepList[this.stepList.length - 1].container.find(".WPGnext").html("关闭");
|
||
this.stepList[0].container.show();
|
||
// $(".WPGnext").click(function(){
|
||
// var WPGnextval=$(".WPGnext").text();
|
||
// if(!WPGnextval){
|
||
// setlocalStorage("WPGnextval ",true)
|
||
// }
|
||
// });
|
||
$(".newwebinputcheckbox").click(function () {
|
||
var type = $(".newwebinputcheckbox").attr('checked');
|
||
if (type === "checked") {
|
||
setlocalStorage("WPGnextval ", true)
|
||
} else {
|
||
setlocalStorage("WPGnextval ", false)
|
||
}
|
||
|
||
});
|
||
} |