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;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%;opacity: .2}
1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。
2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。
3.开源Pjax使用这个:https://github.com/defunkt/jquery-pjax
PJAX全局无刷新的设置方法~的更多相关文章
- 使用 pjax 实现无刷新切换页面
一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- 页面被iframe与无刷新更换url方法
页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ if ...
- typecho开启pjax,ajax,无刷新
1.引入jquery和pjax 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 https://files.cnblogs.com/files/fan-bk/pjax. ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- yii2.0下,JqPaginator与Pjax实现无刷新翻页
控制器部分 <?php namespace backend\controllers; use common\models\Common; use Yii; use yii\base\Contro ...
- 浅谈页面无刷新技术ajax
现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...
- ASP.NET—015:ASP.NET中无刷新页面实现
原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的 ...
- 黄聪:Pjax 无刷新开发web,更好用户体验
什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...
随机推荐
- hdu 4888 最大流给出行列和求矩阵
第一步,考虑如何求是否有解.使用网络流求解,每一行和每一列分别对应一个点,加上源点和汇点一共有N+M+2个点.有三类边: 1. 源点 -> 每一行对应的点,流量限制为该行的和 2. 每一行对应的 ...
- libcloud代码研究(三)——bugs
Bug 1:对不可迭代类进行迭代(libcloud.storage.driver.cloudfile line. 141-142) 使用libcloud连接自搭建swift服务,自己在服务器 ...
- [APIO2014] [Uoj103] [Bzoj3676] Palindromes回文串 [Manacher,后缀数组]
用Manacher算法枚举回文子串,每次在后缀数组排序后的后缀数组中二分,因为用某一后缀和其他子串分别求匹配的长度,匹配长度在排序后该后缀的两侧具有单调性(匹配长度为min{H[x]|i<=x& ...
- N天学习一个linux命令之lsof
用途 列出进程已打开的文件,文件可以是常规文件,特殊文件,目录,socket,设备,共享库等.如果不带参数,lsof显示所有进程打开的所有文件. 用法 lsof [ -?abChlnNOPRtUvVX ...
- fixed_date , 赋权技巧 ,procedure执行方式, PL/SQL注意的地方
本文讨论4个知识点, 1. fixed_date参数 2. 赋权技巧 3. procedure执行的方式 4. PL/SQL中要注意的几个地方 fixed_date参数 客户想修改oracle的 系统 ...
- 关于Openstack的浅层次认知
Openstack浅析 英文好的应该直接跳到官方文档去看相关的介绍,以下是具体介绍的连接,包含Openstack的具体架构: http://docs.openstack.org/kilo/instal ...
- 深入分析JavaWeb Item38 -- 监听器(Listener)高速学习
一.监听器介绍 1.1.监听器的概念 监听器是一个专门用于对其它对象身上发生的事件或状态改变进行监听和对应处理的对象,当被监视的对象发生情况时,马上採取对应的行动.监听器事实上就是一个实现特定接口的普 ...
- C语言编程入门——程序练习(上)
大家能够敲写一下以下的练习代码.看下执行结果,都非常easy.关键要理解. if: # include <stdio.h> int main(void) { int i = 1; i = ...
- 高阶MapReduce_1_链接多个MapReduce作业
链接MapReduce作业 1. 顺序链接MapReduce作业 顺序链接MapReduce作业就是将多个MapReduce作业作为生成的一个自己主动化运行序列,将上一个MapReduce作 ...
- 安卓Recovery模式该怎么用?【转】
本文转载自:http://android.baike.com/article-109914.html 安卓系统出了名的刷机刷机再刷机,说起刷机就不能不谈Recovery模式,这项刷机过程中最重要的一到 ...