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
转载于:https://www.cnblogs.com/telwanggs/p/7136729.html
PJAX全局无刷新的设置方法~相关推荐
- php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...
- java pjax_通过pjax实现无刷新翻页(兼容新版jquery)
摘要:这篇jQuery栏目下的"通过pjax实现无刷新翻页(兼容新版jquery)",介绍的技术点是"jQuery.无刷新翻页.pjax.无刷新.刷新.翻页", ...
- tp5 分页php不能foreach,tp5框架无刷新分页实现方法分析
本文实例讲述了tp5框架无刷新分页实现方法.分享给大家供大家参考,具体如下: 已tp5 分页为例, 1.默认生成的分页 页码如下: « 1 2 » 2.点击页码 值,跳转到对应的页面,并get传 p ...
- 360浏览器自动刷新选项设置方法
360浏览器自动刷新选项设置方法 360浏览器不安装插件自动刷新怎么设置?我们使用浏览器在游览器贴吧的时候,经常会不同的按"Ctrl+R"或者是"F5"来刷新页 ...
- 网络计算机无权限访问共享文件,win7共享文件夹无法访问怎么办?共享文件夹无权限访问设置方法...
win7共享文件夹无权限访问设置方法: 第一步.同步工作组 不管使用的是什么版本的 Windows 操作系统,首先要保证联网的各计算机的工作组名称一致,要查看或更改计算机的工作组.计算机名等信息,请右 ...
- win7为什么无法共享计算机名称,win7共享文件夹无法访问怎么办?共享文件夹无权限访问设置方法...
win7共享文件夹无权限访问设置方法: 第一步.同步工作组 不管使用的是什么版本的 Windows 操作系统,首先要保证联网的各计算机的工作组名称一致,要查看或更改计算机的工作组.计算机名等信息,请右 ...
- win10禁止dpi缩放在哪_如何在Win10中调整dpi缩放? Win10全局启用dpi缩放设置方法!...
如何在Win10中调整dpi缩放?在Windows 10 Creators Update(版本1703)的操作中win10更改高dpi设置,我们可以将DPI扩大到200%. 关于如何在win10系统中 ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- html5 pjax,pjax——页面无刷新跳转
pjax虽然不是什么新的技术,然而本人是最近才发现这个比较牛叉的技术.下面是对pjax的介绍: pjax是在HTML5里面引用的新技术,是对ajax + pushState的封装,是实现无刷新ajax ...
最新文章
- dmol3给定关键字不在字典中_python中的数据结构与算法(2):字典与集合
- 【分块】#6281. 数列分块入门 5(区间开方,区间求和)
- System.Insert - 插入字符串
- buffer java作用_Java NIO之Buffer的使用
- java动态执行逻辑_动态执行代码逻辑
- 云炬60s看世界20211117
- mysql 金额 类型,SQL实现根据类型对金额进行归类
- Python对图像的基本操作
- alsa的动态库安装在哪里_Linux链接库一(动态库,静态库,库放在什么路径下)...
- nsq Android客户端,NSQ的golang客户端简单使用
- 【下载】DE2、DE2-70、DE1光盘资料
- VBA代码助手,代码库收藏管理工具,代码对齐,破解Excel工程密码,设置隐藏模块
- 英文学习20180410
- 修改迅雷下载链接的方法。
- 我的极限Scrum实践
- 能讲一下关于 18 世纪哲学家大卫 • 休谟和恐怖悖论吗
- 2019最新Android常用开源库总结(持续更新,建议收藏)
- 杜克研究生计算机专业,杜克研究生CS专业排名,谨记好好去看
- 贝壳上市背后的秘密武器-ACN
- The Meaning of Life
热门文章
- Flume Sink Processor
- html5做一个相册_HTML5最新版本介绍
- (133)FPGA面试题-Xilinx FPGA Block RAM的三种写模式是什么?
- (77)FPGA时钟激励(always)
- (44)Verilog HDL 计数器设计
- 【STM32】高级定时器、通用定时器和基本定时器---配置寄存器产生PWM
- 【C语言】常用字符(string库函数,ctype库函数),字符数组的输入与处理)
- 本地和ssh服务器传文件,SSH远程登录实现本地机和服务器的文件传输
- 进程调度 操作系统第二章知识点归纳总结
- MyBatis-Plus工具快速入门使用