发新帖

pjax教程,无刷新翻页加载教程

[复制链接]
2735 1

一:整合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 (本文底部);

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



三:使用pjax;

    编辑模版footer.php在</body>标记结束前插入:
  1. <script>
  2.     $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
  3. </script>
复制代码


这句话是什么意思呢?--绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换contentleft的容器的内容为新内容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[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
  6. $(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
  7.     $(".pjax_loading").css("display", "block");
  8. });
  9. $(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
  10.     $(".pjax_loading").css("display", "none");
  11.     pajx_loadDuodsuo();
  12. });
  13. function pajx_loadDuodsuo(){
  14.         var dus=$(".ds-thread");
  15.         if($(dus).length==1){
  16.                 var el = document.createElement('div');
  17.                 el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
  18.                 el.setAttribute('data-url',$(dus).attr("data-url"));
  19.                 DUOSHUO.EmbedThread(el);
  20.                 $(dus).html(el);
  21.         }
  22. }
  23. </script>
复制代码
pjax.zip (84.25 KB, 下载次数: 2)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多

精彩推荐

更多

热点动态

更多

随手拍

更多

客服中心

快速回复 返回列表 联系我们 官方QQ群
快速回复 返回顶部 返回列表