[Emlog教程] Emlog无刷新pjax教程

作者：CC下载站日期：2018-10-10 03:58:51 浏览：2124 分类：站长帮

EMLOG无刷新pjax教程(提取于FLY模板里面),我也曾经为pjax这个纠结过。

百度的话也找不到具体的方法,教程是有但是有点小缺陷,因为pre代码高亮解决不了。

但是呢,经过提取FLY主题里面的无刷新pjax之后,完美的解决了这个问题。

JS这块的话你们直接找渠道下载了,在这里不提供了。

下面直接公布代码,教程不是很详细,但是很Nice。安排

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--头部加载以下JS		-->
<script src="prettify.js"></script>
<script src="pjax.js" type="text/javascript"></script>
</head>
<body>
<div class="container"><!--主体容器pjax		-->
<div class="echo-text">
<?php echo $log_content;?>
</div>
<div class="dudu-x"><!--评论容器pjax		-->
<form method="post" name="commentform" action="<?php echo BLOG_URL; ?>index.php?action=addcom" id="commentform"><!--评论提交pjax		-->
<textarea  name="comment" id="comment" placeholder="在这里输入你的评论"></textarea>
<p class="form-submit">
<div id="error1"></div><div id="ajaxloading1"></div>
<input type="submit" id="submit" value="发表评论" tabindex="6"class="btn dufabiao-primary"/>
</p>
</form>
</div>
</div>
<div class="loading"><!--底部loading pjax		-->
<div class="loading1"><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class='section-left'></div><div class='section-right'></div></div>
</div>
</body>
</html>

JS

/*pjax*/
$(function(){
$(document).pjax('a[target!=_blank]','.container',{fragment:'.container', timeout:6000});
$(document).on('submit','form:not(#commentform,#input)',function(event){$.pjax.submit(event,'#submit',{fragment:'#submit', timeout:6000});});
$(document).on('pjax:send',function(){
    $(".loading,.loading1").css("display","block");
});
$(document).on('pjax:complete',function(){
           $(".loading,.loading1").css("display","none");
		   $("pre").addClass("prettyprint linenums");
		  lanyoupjax();
});
$(document).on('pjax:success',function(a,b,c,d){
if(/#comments$/.test(a.currentTarget.URL)&& $('.pinglun-box').length){
		$('html,body').stop(true).animate({
			scrollTop: $('.pinglun-box').offset().top-120
},300)
}
});
});
$("#submit").on("click",function(){
	$("#ajaxloading1").html('<a style="font-size:12px;margin-left:5px;">正在提交评论..</a>');
	$.ajax({
		url: $("#commentform").attr("action"),
		type:'post',
		data: $("#commentform").serialize(),
		success:function(d){
var reg =/<div class=\"main\">[\r\n]*<p>(.*?)<\/p>/i;
if(reg.test(d)){
				$("#error1").html(d.match(reg)[1]).show().fadeOut(2500);
				$("#ajaxloading1").hide();
}else{
var pid = $('.comment').length ? $('.comment').attr('id').split('-'):0;
				$(".dudu-x").html($(d).find(".dudu-x").html());
				$("div.echo-text").length ? $("div.echo-text").html($(d).find("div.echo-text").html()):'';
				$(".comment-info").hover(function(){$(this).find(".comment-reply").show();},function(){$(this).find(".comment-reply").hide();});
if(pid !=0){
					$("html,body").animate(function(){scrollTop:$("#comment-"+pid[1]).offset().top -260},1000);
}
}
}
})
returnfalse;
});
function ajaxcomments(){
$("#submit").off();
$("#submit").on("click",function(){
	$("#ajaxloading1").html('<a style="font-size:12px;margin-left:5px;">正在提交评论..</a>');
	$.ajax({
		url: $("#commentform").attr("action"),
		type:'post',
		data: $("#commentform").serialize(),
		success:function(d){
var reg =/<div class=\"main\">[\r\n]*<p>(.*?)<\/p>/i;
if(reg.test(d)){
				$("#error1").html(d.match(reg)[1]).show().fadeOut(2500);
				$("#ajaxloading1").hide();
}else{
var pid = $('.comment').length ? $('.comment').attr('id').split('-'):0;
				$(".dudu-x").html($(d).find(".dudu-x").html());
				$("div.echo-text").length ? $("div.echo-text").html($(d).find("div.echo-text").html()):'';
				$(".comment-info").hover(function(){$(this).find(".comment-reply").show();},function(){$(this).find(".comment-reply").hide();});
if(pid !=0){
					$("html,body").animate(function(){scrollTop:$("#comment-"+pid[1]).offset().top -260},1000);
}
}
}
})
returnfalse;
});
}
function lanyoupjax(){
try{
		ajaxcomments()
}catch(a){}
try{
        prettyPrint();
}catch(a){}
}
/*高亮*/
$( document ).ready(function(){
	$("pre").addClass("prettyprint linenums");
	prettyPrint();
});

CSS

/*高亮*/
.prettyprint,pre.prettyprint{overflow:hidden;overflow:auto;margin:20px0;padding:0;border:1px solid #272822;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#272822;color:#666;white-space:pre;white-space:pre-wrap;word-wrap:break-word;font:14px/20px'courier new';word-break:break-all;}
.prettyprint.linenums,pre.prettyprint.linenums{-webkit-box-shadow:inset 40px00#39382E,inset 41px00#464741;-moz-box-shadow:inset 40px00#39382E,inset 41px00#464741;box-shadow:inset 40px00#39382E,inset 41px00#464741;}
.prettyprint.linenums ol,pre.prettyprint.linenums ol{margin:00033px;}
.prettyprint.linenums ol li,pre.prettyprint.linenums ol li{overflow:initial;margin-left:0;padding-left:12px;color:#bebec5;list-style:decimal;line-height:20px;}
.prettyprint.linenums ol li:before{margin:0!important;padding:0!important;border-radius:50%;color:#F57;content:""!important;text-transform:none;font:normal normal normal 14px/2FontAwesome;font-style:normal;font-variant:normal;font-size:14px!important;-webkit-transition:all .24s;transition:all .24s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.prettyprint ol.linenums{margin-bottom:0;padding:8px;background-color:#272822;}
.prettyprint .com{color:#93a1a1;}
.prettyprint .lit{color:#AE81FF;}
.prettyprint .clo,.prettyprint .opn,.prettyprint .pun{color:#F8F8F2;}
.prettyprint .fun{color:#dc322f;}
.prettyprint .atv,.prettyprint .str{color:#E6DB74;}
.prettyprint .kwd,.prettyprint .tag{color:#F92659;}
.prettyprint .atn,.prettyprint .dec,.prettyprint .typ,.prettyprint .var{color:#A6E22E;}
.prettyprint .pln{color:#66D9EF;}
/*加载loader*/
.loading,.loading1{display:none}
.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:9999;background-color:rgba(250,250,250,.1)}
.loading1{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px00-75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}
.loading .block:nth-child(1){content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
.loading .block:nth-child(2){content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
.loading .block:nth-child(3){-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s.3s cubic-bezier(.645,.045,.355,1);transition:all .7s.3s cubic-bezier(.645,.045,.355,1)}
.loading .block:nth-child(4){-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s.3s cubic-bezier(.645,.045,.355,1);transition:all .7s.3s cubic-bezier(.645,.045,.355,1)}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
}