EMLOG无刷新翻页加载教程

  • 内容
  • 相关

  其实就是Pjax局部无刷新,这个东西很早人问,为什么别人博客的翻页播放歌曲不会中断,我也算是一个吧,一开始,看到王小刀,刘培杰等人的博客都有,自己也很想弄,可是像我这种小白,度娘的资料完全看不懂!需要傻瓜式的教程,正好,鬼少博客放出教程,虽然,写得很清楚,但对于我这样的新手来说,搞了几天才有点眉目,这里我转载过来,大家可以看看,学习下。当然,要播放器的可以去鬼少博客申请接口,地址是:http://tv1314.com .如果你有别的播放器,这一步省略!

接下来看教程


  教程开始


一:整合pjax的准备工作
    检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入

1.新浪CDN提速:
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>
2.下载本地化jq:(本文底部)
<script type="text/javascript" src="....自己写...../jquery.js"></script>
    1.7.0版本以上的才有pushState的封装



二:开始整合Pjax;
     1.下载pjax.js (本文底部);
     2.在你喜欢的位置(最好body代码结束前)引入pjax.js;

三:使用pjax
    编辑模版footer.php在</body>标记结束前插入:

<script>
    $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>
    这句话是什么意思呢?--绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换contentleft的容器的内容为新内容contentleft,ajax超时时间8秒;
    OK,因为每个模版的替换区不同,修改掉contentleft容器,保存。

    现在看看,是否可以无刷新加载了?


四:解决pjax的缓冲--加入等待动画;
    pjax.js提供了两个接口;
<div class="pjax_loading"></div>
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
});
</script>

 当然要为pjax_loading定义css,这里就不多说了。


五:解决pjax之后,容器中一些jq事件失效的问题;
    问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。
    问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。
    解决方法:利用pjax的加载完成回调函数,重新绑定事件。
    例:
<script>
$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
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>

    OK,我们发现多说可以正常载入了。


六:全部代码汇总一下,就是这样:
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="你的域名/pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").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>

所需的附件

百度网盘http://pan.baidu.com/s/1kTsw6OZ

360 网盘下载地址:http://yunpan.cn/cjCMBENwir9Tt (提取码:8eb2


本文标签:

版权声明:若无特殊注明,本文皆为《Finally》原创,转载请保留文章出处。

本文链接:EMLOG无刷新翻页加载教程 - https://pjax.cn/post/72

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知

评论

6条评论
  1. avatar

    iEdon Lv.3 Chrome 44.0.2403.89 Windows 回复

    绑定了太多事件  处理不来
    而且我的JS都是整合在一起的

    江苏省泰州市 移动

    1. avatar

      liufu Lv.2 Sogou Explorer Windows 7 x64 Edition 回复

      加载动画做不出来啊

      广东省广州市 鹏博士长城宽带

      1. avatar

        御坂网络 Lv.1 Chrome 37.0.2062.120 Windows 7 x64 Edition 回复

        咋到我这就不能实现pjax了呢,JS代码不是一样的么...

        广东省广州市 鹏博士长城宽带

        1. avatar

          香港vps Lv.1 Chrome 41.0.2272.118 Windows 7 回复

          又遇到一个代码高手, {smile:6}

          重庆市 电信

          00:00 / 00:00
          顺序播放