java pjax_通过pjax实现无刷新翻页(兼容新版jquery)
摘要:这篇jQuery栏目下的“通过pjax实现无刷新翻页(兼容新版jquery)”,介绍的技术点是“jQuery、无刷新翻页、pjax、无刷新、刷新、翻页”,希望对大家开发技术学习和问题解决有帮助。
pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html
目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用。
pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。
关于pjax这里就不多介绍了,简单易用,轻松地实现部分刷新,告别链接带来的闪烁。
之前看过pjax并实现了demo,还写了篇笔记,不过jquery 1.9把live()方法删掉了,新版pjax也随之换了用on()方法实现,最近项目有用到,所以了解了新的使用方法,这里也做一个新的笔记。
环境:
jquery 1.10.2 下载
jquery.pjax.js 下载
使用方法:
监控所有class为pjaxlink的链接,采用pjax更新链接页面中id为ToInsert的容器内容到本页面中id为Content的容器中。若获取内容时间超过5秒,则直接跳转:
$(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});
使用实例:
原始页面是通过跳转的翻页,我在不改变页面内容的前提下,使用pjax监控翻页链接,仅更新列表(保证列表容器是分页容器的父节点)的内容。
if ($.support.pjax) {
//遍历所有分页容器
$('.pagercontainer').each(function(){
//取得列表容器
$listcontainer=$(this).parent();
//取得列表容器的ID
var listcontainerid=$listcontainer.attr('id');
//用pjax监控所有分页链接并定义pjax来实现更新
$(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});
});
$(document).on('pjax:send', function() {
//在pjax发送请求时,显示loading动画层
$('#loading').show();
});
$(document).on('pjax:complete', function() {
//在pjax处理完成后,隐藏loading动画层
//由于速度太快会导到loading层闪烁,影响体验,所以在此加上500毫秒延迟
setTimeout(function(){$('#loading').hide()},500);
});
}
java pjax_通过pjax实现无刷新翻页(兼容新版jquery)相关推荐
- 用AjaxPro实现无刷新翻页效果及数据库分页技术介绍
在看本文之前,建议查看本人的系列文章: <AjaxPro与服务器端交互过程中如何传值>:http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/ ...
- yii2.0下,JqPaginator与load实现无刷新翻页
JqPaginator下载地址http://jqpaginator.keenwon.com/ 控制器部分: <?php namespace backend\controllers;use com ...
- jquery+ajax无刷新翻页
前台自定义通用分页jquery插件 (一)框架:用jquery+ajax+struts1实现 自动创建行和列 持久层用的是abatis.数据库用的是MySQL. ( ...
- 学习笔记:SildeShow 相册无刷新翻页或幻灯片方式浏览..
基本实现 <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server" ...
- php v9 ajax 翻页,php ajax 无刷新翻页实现代码
下面只是一个测试,在实际应用中,可能这种方法会比较占系统资源,不建意利用这样的方法处理分页效果. var http_request=false; function send_request(url){ ...
- php ajax无刷新翻页,php ajax 无刷新翻页实现代码
$page=isset($_get['page'])?intval($_get['page']):1; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1. $num= ...
- 图文翻页-兼容IE8和Chrome浏览器
在线测试 打包下载 图文翻页-兼容IE8和Chrome浏览器
- JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
最新文章
- 哈工大中文信息处理_【NLP】哈工大车万翔教授 自然语言处理NLPer的核心竞争力是什么?19页ppt...
- InputFlinger崩溃问题分析报告
- python和java一样吗-python和java的区别,看了这个就会区分了!
- Java Programming Test Question 3
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题...
- 深度学习核心技术精讲100篇(六十四)-特征选择原理及应用实战案例
- 11个鲜为人知的实用Linux命令 - Part 2
- (25)npm scripts 实践—构建脚本文件
- Spring,FetchType.LAZY和FetchType.EAGER什么区别?
- 顶会|关于数据库顶级会议 SIGMOD 2018,看这一篇就够了!
- CCF NOI1065 最小公倍数
- scala解析xml_Scala XML处理–文字,序列化,解析,保存和加载示例
- Tensorflow官方文档学习理解 (三)-MNIST
- 技术要求→物理安全→防雷击
- python基础运用_python基础----python的使用(三)
- cv2-drawline
- base ring shell skirt skirt 压力容器_压力容器工程规定(中英文版)
- 文件夹删除不掉-需要管理员权限删除
- Py正则表达式学习笔记:常用函数——单词检索、索引方法
- golang 数学函数
热门文章
- 身份证号码校验位生成代码
- JavaScript 判断闰年典型案例,小算法
- phy (LAN8720 RTL8201)自动极性 自动协商在PCB LAYOUT中应用
- POSTGRESQL TOAST 数据扩展存储技术原理与优势
- Mythical Games宣布与韩国领先游戏发行商Kakao Games合作,推动亚太区业务扩张
- Java微信公众号开发之开源框架推荐
- 【Azure】微软 Azure 基础解析(八)Azure 存储服务:探索Blob存储、队列存储、文件存储的特性与适用场景
- 记汶川地震微软华人赈灾义卖
- 【Mysql】大批量(百万级)数据插入数据库应该怎么做(提高效率)?
- 《华为数据之道》读书笔记