1559天 瑾忆

重要的人越来越少,剩下的人也越来越重要 ​​

为你的网站添加pjax

发布于 3年前 / 2.1k 次围观 / 8 条评论 / 杂七杂八 / 瑾忆

为你的网站添加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就可以。


[pp]

文件名称:jquery.pjax.min.js

提取密码:

立即下載

[/pp]
  1. 3年前 (2017-12-10)
    @
    阿木

    我吐

  2. 3年前 (2017-09-12)
    @
    mcs

    额.

  3. 3年前 (2017-09-12)
    @
    asdsda

    呃呃鹅鹅鹅

  4. 3年前 (2017-09-12)
    @
    asdsda

    下载地址呢?????

    • 3年前 (2017-09-12)
      @ NO

      @asdsda: 地址我记得有在呀

  5. 3年前 (2017-09-03)
    @
    test

    过来看看

  6. 3年前 (2017-07-23)
    @
    biiter

    用你这个之后pjax好像有点问题,第二次点击任何一个链接,loading不会结束,一直处于loading状态。

    • 3年前 (2017-07-23)
      @ NO

      @biiter:我用着有时也会出现这样这样的状况,感觉这个pjax也不怎么好,也只能先用着先。