1551天 瑾忆

重要的人越来越少,剩下的人也越来越重要 ​​

Pjax局部刷新

发布于 4年前 / 2.0k 次围观 / 0 条评论 / 杂七杂八 / 瑾忆

1.将以下代码插入 css

 .pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}
.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: .2} 

2.将以下代码插入网页头部 header.php 中的</head>前

 <script type="text/javascript" src="你我域名网址/js/jy_pjax.js"></script>

	<div class="pjax_loading"></div>

<div class="pjax_loading1"></div>

<script>

//pjax

$(document).pjax('a[target!=_blank]', '.container', {fragment:'.container', timeout:8000});

$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;

    $(".pjax_loading1").css("display", "block");

    $(".pjax_loading").css("display", "block");

});

$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;

$(".pjax_loading").css("display", "none");

$(".pjax_loading1").css("display", "none");

    pajx_loadDuodsuo();

});

function pajx_loadDuodsuo(){

    var dus=$(".ds-thread");

    if($(dus).length==1){

        var el = document.createElement('div');

        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数

        el.setAttribute('data-url',$(dus).attr("data-url"));

        DUOSHUO.EmbedThread(el);

        $(dus).html(el);

    }

}

</script> 

3.然后根据你的网站模板的框架修改

//pjax
$(document).pjax('a[target!=_blank]', '.container', {fragment:'.container', timeout:8000});

中的   .container 

 

打开你的网站,然后按下  F12  


然后找到你需要局部刷新的地方  例如我的是  <div class="fkcontainer">…</div>

如果是<div class="fkcontainer">那么 .container  就改为    .fkcontainer

如果是<div id="fkcontainer">那么 .container  就改为    #fkcontainer


需要的附件下载 http://pan.baidu.com/s/1i48GBnn

pjax_loading.gif放进 images 文件夹里