Pjax在TP中的详细使用
Pjax在TP中的详细使用
在页面放入音乐播放器后，遇到个问题，怎样在切换页面时音乐不被刷新呢，度娘了下，可以采用局部刷新的方式来实现，然后一阵搜，找到了它------PJAX，找到是一回事，使用起来坑是不断，记录下入坑的辛酸。
NO1：pjax对应的JS啥的就不提供了，网上大把，使用PJAX注意事项：就是所有页面布局应该高度一致，内容部分能够统一替换，要不然就没有必要使用
NO2：在TP项目内引入js文件，由于pjax对应js使用必须依赖jquery，所有引入时候必须同时引入jquery对应的js，我的项目中js，css均置放在头部公共文件"public/header.html"内，左侧菜单等部分置放在“public/side.html”，底部公共部分在"public/footer.html"
<script src="/static/home/js/jquery-2.1.4.js"></script>
<script src="/static/home/js/jquery.pjax.js"></script>
NO3：所以我的通用页面格式如下：
<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<!--配合pjax使用的进度条-->
<div id="progress">
<span></span>
</div>
{include file="public/side" /}
<div id="content" class="container">
<!--通用pjax替换部分 -->
<div id = "content-main" class="content-main">
PJAX替换页面内容部分
</div>
<!--通用替换部分结束 -->
{include file="public/footer"/}
</div>
</body>
</html>
NO4：重要说明部分：
a：左侧菜单部分跳转链接对应的<a href='xxx'>部分都要添加pjax对应的操作属性名 <a data-pjax href='xxx'>
b：NO3中 PJAX替换页面内容部分对应的<a href='xxx'>也是需要添加操作属性名 <a data-pjax href='xxx'>
c：特别注意的是用来做替换的页面也必须是要包含头部，左侧，底部页面引用的完整内容，之所以如此是当用户操作页面刷新时会出现异常，自行尝试
d：用于替换的页面如果包含js部分，可以将js内容置放与<div id = "content-main" class="content-main"><div>之中，否则将不会被加载
NO5：js关于'pjax处理部分' 我放置于/public/footer.html内，主要内容如下:
<script>
$(function(){
//pjax局部加载处理
if($.support.pjax){
$(document).pjax('a[data-pjax]', '#content_main', {//监听a[data-pjax]，并替换#content_main的内容
fragment: '.content-main',
timeout: 200000000,
show: 'fade',
cache: true, //是否使用缓存
push: true, //是否启用浏览器前进后退相应
replace: false //是否使用 window.history.replaceState 改变地址栏 url （度娘到的示例给的ture值坑我找了N久）
});
$(document).on('pjax:send', function(){//pjax链接点击后加载进度条动画
$("#progress").removeClass("done"); //完成后隐藏进度条
$({property: 0}).animate({property: 100}, {
duration: 500,
step: function(){
var percentage = Math.round(this.property);
$("#progress").css('width', percentage + "%")
if(percentage == 100){
$("#progress").addClass('done');
}
}
});
});
$(docment).on("pjax:success", function(data, status, xhr, options){//pjax加载完成处理
//可以处理统计、更新标题操作啥的
$('title').text(data.relatedTarget.innerText);
});
$(docment).on("pjax:complete", function(){
//隐藏进度条
$("#progress").removeClass("done");
});
$(docment).on("pjax:error", function(){
//加载失败
});
$(docment).on("pjax:timeout", function(event){
//阻止超时导致链接跳转时间发生
event.preventDefault();
});
}
});
</script>
NO6：其他
//滚动条样式，可置放于public/header.html内
<style type='text/css'>
#progress {
position:fixed;
height: 2px;
top: 0;
background: #32BACA;
transition: opacity 500ms linear
}
#progress.done {
opacity:0
}
#progress span {
position:absolute;
height:2px;
-webkit-box-shadow:#32BACA 1px 0 6px 1px;
-webkit-border-radius:100%;
opacity:1;
width:150px;
right:-10px;
-webkit-animation:pluse 2s ease-out 0s infinite;
}
@-weblit-keyframes pluse {
30% {
opacity:.6
}
60% {
opacity:0;
}
100% {
opacity:.6;
}
}
</style>