为你的网站添加pjax

 6个月前 (04-20)    360  
文章目录

为你的网站添加pjax

首先在</head>前添加:

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

其中jquery.min.js可自行下载到本地,如果你的模板已经引入jquery.js那就选择一个,把另一个去掉。

把jquery.pjax.min.js放进你网站的模板中。文章底部有下载链接

然后在</body>前添加:

<script>
	$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax。#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
    $(document).on('pjax:send', function() {
         $('html').toggleClass('load');//参考的loading动画代码,请自行更换
          //执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
          });
    $(document).on('pjax:complete', function() {
         $('html').toggleClass('load');//参考的loading动画代码,请自行更换
          //执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
czcz();//pjax后重载的代码,其中的czcz可自定义。
          });
czcz();
function czcz(){
//把需要重载的js都放在这里面
};
//其中czcz可自定义
</script>

把上面代码中的四个#content改为你网站在执行pjax后会发生变化的id或class就可以。

PJAX JS下载地址:jquery.pjax.min.rar

版权声明:Mengx 发布于 6个月前 (04-20),共 2012 字。
转载请注明:为你的网站添加pjax

暂无评论

8个月前 (03-06)
微语功能页面做好啦! 详情