emlog通过pjax实现无刷新加载网页
emlog通过pjax实现无刷新加载网页
zhy准备文件
编辑模板 header.php 的 head 添加必要文件：
jquery-1.11.1.min.js：下载
jquery.pjax-1.8.2.min.js：下载
下载到模板的 scripts 目录(没有的话就新建一个)下后将下面两句添加到所有script标签的最前面:
注意：jQuery需要1.7.0版本以上的才有pushState的封装
使用pjax
编辑模版 footer.php 在/body标记结束前插入：
< script type=”text/javascript”>
$(document).pjax(‘a[target!=_blank]‘, ‘#contentleft‘, {fragment: ‘#contentleft‘,timeout: 8000});
< /script>
参数解释：
a[target!=_blank]：绑定本页面非新窗口打开的所有链接
#contentleft：链接点击之后，仅仅更新#contentleft容器的内容，页面其他内容不变，需自行修改这个参数
fragment:‘#contentleft‘：#contentleft选择器的碎片从Ajax响应提取
timeout:8000：Ajax超时时间为8秒，如果未响应则直接刷新网页
注意：这个 #contentleft 怎么找呢？
小指的方法是打开模板的 echo_log.php，找到包裹文章页面的 div 的 id 就是了，一般是第一第二个
id 名字都是 contentleft,content或者main之类的，按照这个方法一般都可以了，如果不行回我吧～
解决pjax的缓冲–加入等待动画
编辑模板 footer.php 在/body标记前插入下面代码
没有用音乐插件的需要在模板css文件末尾添加css:
.qingzz_pjax_loading {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(90,90,90,.5);
display: none;
}
.qingzz_pjax_spinner {
margin: 300px auto;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}
.qingzz_pjax_spinner > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.qingzz_pjax_spinner .qingzz_pjax_rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.qingzz_pjax_spinner .qingzz_pjax_rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.qingzz_pjax_spinner .qingzz_pjax_rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.qingzz_pjax_spinner .qingzz_pjax_rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
刷新一下，挺酷的吧～
解决无法提交和多说不加载问题：
编辑模板的 footer.php，在/body标签前添加下面这段代码：
里面的#contentleft一样需要改成前面的容器id哦～
解决容器中javascript事件失效的问题：重点
问题：pjax之后多说评论框不加载，ajax评论不能提交等等问题。
问题原因：原先容器绑定的事件被新容器替换掉了，新容器的div没有绑定事件，所以点击无效。
解决方法一：利用pjax的加载完成回调函数，重新绑定事件。
解决方法二：将javascript添加到 echo_log.php 的容器，一般加到容器末尾，即/div标签上面。
更准确的方法查看本站文章：
pjax javascript失效解决(小指亲测)
将javascript添加到 echo_log.php 的容器
原理是容器里面的内容是会刷新重新加载的，所以把javascript放在这里会重新加载～
这里只列出常用的，其他具体的自行摸索添加吧～
最好放到容器末尾/div前面哦～
解决代码高亮问题添加：
