一:整合Pjax的准备工作

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

  1. 1.新浪CDN提速:

  2. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

  3. 2.下载本地化jq:(本文底部)

  4. <script type="text/javascript" src="....自己写...../jquery.js"></script>

1.7.0版本以上的才有pushState的封装。

二:开始整合Pjax;

     1.下载pjax.js (本文底部);

     开源地址:https://github.com/defunkt/jquery-pjax

     2.在你喜欢的位置(最好body代码结束前)引入pjax.js;

三:使用pjax;

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

  1. <script>

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

  3. </script>

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

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

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

四:解决pjax的缓冲--加入等待动画;

    pjax.js提供了两个接口;


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

  2. <script>

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

  4.     $(".pjax_loading").CSS("display", "block");

  5. });

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

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

  8. });

  9. </script>


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

五:解决pjax之后,容器中一些jq事件失效的问题;

    问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。

    问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。

    解决方法:利用pjax的加载完成回调函数,重新绑定事件。

    例:

  1. <script>

  2. $(document).on('pjax:complete', function() {

  3.     pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数

  4. });

  5. function pajx_loadDuodsuo(){

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

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

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

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

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

  11. DUOSHUO.EmbedThread(el);

  12. $(dus).html(el);

  13. }

  14. }

  15. </script>


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

六:全部代码汇总一下,就是这样:

  1. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 

  2. <script type="text/javascript" src="你的域名/pjax.js"></script>

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

  4. <script>

  5. $(document).pjax('a', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax,#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置;

  6. $(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class;

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

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

  9. });

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

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

  12.    pajx_loadDuodsuo();//解决多说评论;

  13. });

  14. function pajx_loadDuodsuo(){

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

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

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

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

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

  20. DUOSHUO.EmbedThread(el);

  21. $(dus).html(el);

  22. }

  23. }

  24. </script>


其他一些文件下载地址:密码:wufh