方法非常简单,首先引入 jquery.js 和 jquery.pjax.js

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

然后在body内放一个div作为容器,并设置一个id,我设置的id是pjax-container

<div id="pjax-container">
  //在此处放置跳转页面时要更新的部分
</div>

然后在容器外添加以下代码

<script type="text/javascript">
  $(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
  }).on('pjax:send', function() { //Pjax加载中执行
    $("#pjax_loading").show(); //显示遮罩层与加载动画
  }).on('pjax:complete', function() { //Pjax加载完成执行
    $("#pjax_loading").hide();  //隐藏遮罩层与加载动画
  });;
</script>

参考文章:https://www.ihewro.com/archives/354/

标签: none

添加新评论