整合pjax无刷新翻页加载教程

Pjax局部无刷新技术教程 - by：鬼少

想了想，还是不把pjax写到播放器里面了。因为，两个东西都不是必需品；而且pjax有很多小问题，会影响播放器的正常使用也说不定；单独发布一个pjax教程吧

我写的教程从来不说废话，所以直接进入重点。所以“有关什么是pjax和pjax有什么用”的问题，请自行百度！

一：整合pjax的准备工作；

    检查你的网站是否引入1.7.0版本以上的jquery.js，如果没有请全局引入

1 2 3 4

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>标记结束前插入：

1 2 3

<script>     $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000}); </script>

    这句话是什么意思呢？--绑定本页面非新窗口打开的所有本域链接，链接点击之后，替换contentleft的容器的内容为新内容contentleft，ajax超时时间8秒；

    OK，因为每个模版的替换区不同，修改掉contentleft容器，保存。

    现在看看，是否可以无刷新加载了？

四：解决pjax的缓冲--加入等待动画；

    pjax.js提供了两个接口；

1 2 3 4 5 6 7 8 9

<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的加载完成回调函数，重新绑定事件。

    例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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，我们发现多说可以正常载入了。

六：全部代码汇总一下，就是这样：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<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>

七：发一下牢骚；

    有些人找别人帮忙，理直气壮，牛逼哄哄。

    我只想说：不帮忙是本分，帮忙是情分，请注意自己扮演的角色，不要找不自在。

    如果还有谁不懂的，请联系右上角QQ，能帮忙就帮。别问我为什么，我任性！

本文所需要的资料下载链接: http://pan.baidu.com/s/1ntMbRy5 密码: o648