整合pjax无刷新
一:整合pjax的准备工作;
检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入
1.新浪CDN提速:
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js";></script>
2.下载本地化jq:
<script type="text/javascript" src="....自己写...../jquery.js"></script>
1.7.0版本以上的才有pushState的封装。
二:开始整合Pjax;
1.下载pjax.js ;
2.在你喜欢的位置(最好body代码结束前)引入pjax.js;
三:使用pjax;
编辑模版footer.php在</body>标记结束前插入:
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>
这句话是什么意思呢?--绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换contentleft的容器的内容为新内容contentleft,ajax超时时间8秒;
OK,因为每个模版的替换区不同,修改掉contentleft容器,保存。
现在看看,是否可以无刷新加载了?
四:解决pjax的缓冲--加入等待动画;
pjax.js提供了两个接口;
<div class="pjax_loading"></div>
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
$(".pjax_loading").css("display", "none");
});
</script>
当然要为pjax_loading定义css,这里就不多说了。
五:解决pjax之后,容器中一些jq事件失效的问题;
问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。
问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。
解决方法:利用pjax的加载完成回调函数,重新绑定事件。
例:
<script>
$(document).on('pjax:complete', function() {
pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
var dus=$(".ds-thread");
if($(dus).length==1){
var el = document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
}
}
</script>
OK,我们发现多说可以正常载入了。
六:全部代码汇总一下,就是这样:
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js";></script>
<script type="text/javascript" src="你的域名/pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
$(".pjax_loading").css("display", "none");
pajx_loadDuodsuo();
});
function pajx_loadDuodsuo(){
var dus=$(".ds-thread");
if($(dus).length==1){
var el = document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
}
}
</script>
整合pjax无刷新的更多相关文章
- 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- 黄聪:Pjax 无刷新开发web,更好用户体验
什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...
- Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- 给网站添加pjax无刷新,换页音乐不中断
自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能 在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番 最后发现网上实现pjax功能基本上是两种方 ...
- 使用 pjax 实现无刷新切换页面
一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...
- 有趣的API: history pushState/popstate 无刷新跳转(pjax)
API介绍 首先看看API如何使用: history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录. state(any) 需要保存的数据, ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- 使用pjax实现类似github无刷新更改页面url
pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url.一起来学习一下这个插件吧. 我们都知道 ...
- Spring整合DWR comet 实现无刷新 多人聊天室
用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无刷新,一般会使用到Ajax.Ajax 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...
随机推荐
- Delphi 编写线程的清除代码
- redis—持久化操作
简介 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(d ...
- 2.02_Python网络爬虫分类及其原理
一:通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫是捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...
- Ubuntu在命令行安装显卡驱动
Ubuntu在命令行安装显卡驱动 1.进入电脑的BIOS,把Security Boot设置为Disabled. 2.进入终端,输入一以下命令(这里以安装NVIDIA-390进行演示) sudo add ...
- Educational Codeforces Round 40 C. Matrix Walk( 思维)
Educational Codeforces Round 40 (Rated for Div. 2) C. Matrix Walk time limit per test 1 second memor ...
- 浅谈IT人的发展(转载)
一个人如果能确定他喜欢的行业,他一生都会非常幸福. 相反,则往往痛苦,也许竟然会因此成为一个哲学家也说不定. 中国的贫穷决定了我们当中的大多数人不能根据自己的爱好来选择职业,而只是因为生活所迫,或者世 ...
- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xd0 in position 140: invalid continuation byte
web阅片系统,遇到dicom文件在文件夹不能正常读取的问题.解决方法如下: def rep7(request): file_path = os.path.dirname(__file__) + re ...
- 《深入理解Java虚拟机》之(二、垃圾收集器与内存分配策略)
程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭,这几个区域的内存分配和回收都具备确定性,不需要过多考虑回收的问题,因为方法结束或者线程结束时,内存自然就跟着回收了,而java堆和方法区 ...
- Xftp6 和 Xshell 6 下载与安装使用
官网地址:https://www.netsarang.com/zh/all-downloads/ 然后进行安装吧,基本没有什么配置. 打开 xftp 连接 Linux,进行文件操作. 然后 名称:随意 ...
- bzoj3993: [SDOI2015]星际战争(二分+最大流)
题目描述 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战. 在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型机器人的装甲值 ...