pjax的初步了解和简单实例尝试,局部刷新,平滑过渡,拒绝闪烁

由于jquery和pjax版本更新,以下内容已不可用,传送门:最新的pjax使用心得

局部刷新不是什么新概念了,我最初接触的局部刷新是通过height=0的iframe调用网页执行javascript操作实现局部变更的,而后知道了ajax,然后jquery使一切变得更加简单,我便一直用jquery实现局部刷新的效果。

今天看到pjax的介绍,读了源码,发现是如此简单的结构,但却把局部刷新的概念打包起来,简单清晰地完成了我们所需要的效果。而且可以通过简单的参数进行控制,通过设置fragment的值排除不必要的内容,使所有页面都可以作为访问入口,timeout控制过期跳转,避免了不兼容或者由于页面出问题而卡死的问题。

下面分享一下使用笔记:

  1. 加载jquery和jquery.pjax,(pjax有几个版本,我用的是作为jquery插件的版本)

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
     <script type="text/javascript" src="/js/jquery.pjax.js"></script>
    
  2. 给特定的超链接添加pjax操作,更多参数请往下看

     <script type="text/javascript">
         $(document).ready(function(){
             $('a.topjax').pjax('#main'); //表示读取的内容更新到id为main的容器
         });
     </script>
    
  3. 参数可指定更新到的container,及timeout,fragment等参数

     //pjax的第二个参数是options数组
     //fragment指定获取页面中用于更新的部分,下例中表示获取id为main的container中的内容;更新到第一个参数指定的当前页面的container中
     //timeout指定pjax的读取时间,超出时间未完全读取新页面,将直接进行location.href的跳转
     //url指定pjax的读取页面,可通过指定该值来代替a标签中的href,也可使用非a标签来实现该按钮
     $('a.topjax').pjax('#main',{fragment:'#main', timeout:1000});
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏