整合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 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...
随机推荐
- 一个SDL2.0程序的分析
//把图片加载到SDL_Texture SDL_Texture* loadTexture(const std::string &file, SDL_Renderer *ren){ ...
- linux入门常用指令1.配置本地yum源
创建光盘挂载点 [root@localhost /]# mkdir /mnt/cdrom 挂载光盘 #挂载光盘 [root@localhost /]# mount /dev/cdrom /mnt/cd ...
- 开放式最短路径优先OSPF
1.OSPF基本知识 OSPF作为基于链路状态的协议,解决了RIP在收敛慢,路由环路,可扩展性差等问题,还有以下优点: 采用组播方式发布报文,可以减少对其他不运行ospf路由器的影响 ospf直尺无类 ...
- git 忽略部分文件
忽略: git update-index --assume-unchanged .mymetadata 取消忽略: git update-index --no-assume-unchanged
- docker 查看系统进程pid
docker inspect -f '{{.State.Pid}} {{.Id}}' $(docker ps -a -q)
- Linux文件系统之目录清单
挂载点:挂载:将设备关联到当前文件系统目录 文件系统:rootfs:根文件系统/boot:系统启动相关文件,如内核.initrd.以及grub(bootleader:引导加载器)/dev:设备文件, ...
- Kubernetes1.16下部署Prometheus+node-exporter+Grafana+AlertManager 监控系统
Prometheus 持久化安装 我们prometheus采用nfs挂载方式来存储数据,同时使用configMap管理配置文件.并且我们将所有的prometheus存储在kube-system #建议 ...
- 包 ,模块(time、datetime、random、hashlib、typing、requests、re)
目录 1. 包 1. 优先掌握 2. 了解 3. datetime模块 1. 优先掌握 4. random模块 1. 优先掌握 2. 了解 5. hashlib模块和hmac模块 6. typing模 ...
- python中重要的概念:类(class)
1.名词解释 类:类代表了具有相同特征的一类事物(人) 对象.实例:具体的某一个事物或者是人 实例化:将类变成对象的这么一个过程,即新建一个对象的过程,就是对类的一个实例化过程. 2.格式 函数定义: ...
- 清除文本中Html的标签
/// <summary> /// 清除文本中Html的标签 /// </summary> /// <param name="Content"> ...