Emlog实现局部pjax​无刷新

Emlog实现局部pjax无刷新


一:整合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="自己写/js/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://www.sishiwu.com/post/49.html




另一种方法:

先添加必要文件:

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script>
然后下面加上:

<script type="text/javascript" language="javascript">
$(function() {
$(document).pjax('a', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax。#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
   $(document).on('pjax:send', function() {
         //执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
         });
   $(document).on('pjax:complete', function() {
         //执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
         });
});
</script>

1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。

2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。

原文:http://www.iitboy.cn/wzjs/56.html

Pjax大小:84KB | 来源:百度网盘
已经过安全软件检测无毒,请您放心下载。
  • 版权声明:若无特殊注明,本文皆为( 飞雪 )原创,转载请保留文章出处。
  • 文本链接:http://feixue.me/emlog/28.html
  • avatar

    飞雪 V认证

    有时候,你对人生所有的规划,抵不过命运一次不怀好意的安排。

    正文到此结束

    热门推荐

    发表评论

      avatar
      • 嘻嘻 大笑 可怜 吃惊 抛媚眼 调皮 鄙视 示爱 哭 开心 偷笑 嘘 奸笑 委屈 抱抱 怒 思考 流汗 勾引 耶 握手 鼓掌 围观 给力
      0
      假装提交肿...

      已有6条评论

      1. avatar wys.meFloor
        2015-11-22 08:40
        [回复] 等EM6出来,我再上pjax​。
        1. avatar 飞雪
          2015-11-22 10:59
          [回复] @wys.me:一直都在等EM6,就是不知道要内测多久
      2. avatar 姜辰Bench
        2015-11-21 17:19
        [回复] 很不错的代码,一定是大神。
        1. avatar 飞雪
          2015-11-21 19:57
          [回复] @姜辰:一个不懂代码的菜鸟
      3. avatar Gu.Sofa
        2015-11-21 12:26
        [回复] 回访来了~加油
        另外你是怎么知道我的( •ิ_• ิ
        1. avatar 飞雪
          2015-11-21 14:28
          [回复] @Gu.:我的磨:)