zoukankan      html  css  js  c++  java
  • PJAX全局无刷新的设置方法~

    先添加必要文件:

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

    <script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script>

    然后下面加上:

    <script type="text/javascript" language="javascript">

    $(function() {

    $(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() {

    $(".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>

    参考css代码(可自己去百度搜索,本站也有)

    .pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999; 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; 100%;height: 100%;opacity: .2}

    1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。

    2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。

    3.开源Pjax使用这个:https://github.com/defunkt/jquery-pjax

  • 相关阅读:
    okhttp连接池:put,get方法&connection回收
    okhttp拦截器之ConnectInterceptor解析
    okhttp拦截器之CacheInterceptor解析
    okhttp缓存策略源码分析:put&get方法
    java线程基础巩固---ThreadGroup API学习
    通过JDBC驱动加载深刻理解线程上下文类加载器机制
    线程上下文类加载器实战分析与难点剖析
    ServiceLoader在SPI中的重要作用分析
    小试牛刀【龙哥翻译】
    小试牛刀【自己翻译】
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7136729.html
Copyright © 2011-2022 走看看