我们应该感谢相遇,无论结局是喜是悲....
整合pjax无刷新翻页加载教程
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年7月11日 22:22 星期一
  • 浏览:10509
  • 字号:
  • 评论:2
  • 一:整合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>


    转自鬼少博客


      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: 整合pjax无刷新翻页加载教程
    本文地址:https://blog.hellozwh.com/?post=70
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    凯凯2016-07-16 17:28
    博客特效太多了 一卡一卡的
    起点终站 没错,我就是那个帅逼站长2016-07-16 23:33
    嗯。明天把鼠标特效去掉看看,不知道是不是广告的原因哈哈
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放