殷德瑶博客
喜欢的歌,静静地听!喜欢的人,远远地看!

emlog网站PJAX局部刷新的实现

殷德瑶 2015-9-20 emlog教程 1条评论 4584 次

我在网上看到的一些有讲过关于pjax局部刷新的教程,但对于新手来讲可能会不太明白,于是我就在这里讲明白一点

先在header.php里面加上以下代码:


<script src="http://www.yindeyao.cn/pjax/jquery.js"></script>
<script src="http://www.yindeyao.cn/pjax/pjax.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:6000}); //这是a标签的pjax。#contentleft 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#contentleft', {fragment:'#contentleft', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
    $(document).on('pjax:send', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "block");//参考的loading动画代码
          //执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
          });
    $(document).on('pjax:complete', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "none");//参考的loading动画代码
          //执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
          });
});
</script>
<div class="pjax_loading"></div>
<div class="pjax_loading1"></div>


然后在main.css里面加上如下代码:(不知道加到哪的,就把它加到最后面)


.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}
.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: .2}



main.css代码中的('images/pjax_loading.gif')为你要加载时的gif图片地址,自己更换。

示例图片:

              

刚刚更改上传后可能不会看到效果,要清理缓存后再看看是否有效果了。


本文转自鬼少博客,略有修改,方便我们这些不懂网站的菜鸟学习!

如有侵权请联系QQ657280703删除!


殷德瑶博客推荐

评论

七彩网络 2018-06-30 00:25
您好,我发现使用你发的这个代码,出现?post=1:792 Uncaught TypeError: $(...).pjax is not a function

发表评论


粤ICP备15078261号 Powered by 黑暗之夜
Theme by 殷德瑶博客