整合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 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...
随机推荐
- HTTP中GET,POST和PUT的区别
一.HTTP中定义了以下几种请求方法: 1.GET:2.POST:3.PUT:4.DELETE;5.HEAD:6.TRACE:7.OPTIONS: 二.各个方法介绍: 1.GET方法:对这个资源的查操 ...
- apache thinkphp5 强制https://访问
根目录下,.htaccess文件 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On ...
- (备忘)Window7下安装Python2.6及Django1.4
1.Python2.6安装 1.1 Python2.6的下载及安装 Python 版本:2.6 下载地址:http://www.python.org/download/releases/2.6.1/ ...
- 《数据结构与算法之美》 <01>复杂度分析(上):如何分析、统计算法的执行效率和资源消耗?
我们都知道,数据结构和算法本身解决的是“快”和“省”的问题,即如何让代码运行得更快,如何让代码更省存储空间.所以,执行效率是算法一个非常重要的考量指标. 那如何来衡量你编写的算法代码的执行效率呢?这里 ...
- RT-Thread代码启动过程与$Sub$ $main、$Super$ $main
文章转载自:https://blog.csdn.net/yang1111111112/article/details/80913001 我们找到系统复位的地方,可以往下单步跟踪. ①从系统初始化开始执 ...
- [Abp vNext微服务实践] - vue-element-admin登录二
简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...
- Shell 语法报错记录
sh: missing ] if 条件语句 “或”多个条件并行时 执行then命令 变量a等于aa且变量b等于bb 或者 变量c等于cc且变量d等于dd 这样的条件成立的话,输出success if ...
- PAT Basic 1095 解码PAT准考证 (25 分)
PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级:A 代表甲级:B 代表乙级: 第 2~4 位是考场编号,范围从 101 到 999: 第 5~10 位是考试日期,格式为年.月. ...
- 原生js中如果有多个onload事件解决方案
在一个页面中有两个JavaScript 分别都用到了window.onload 一个是:window.onload=func1,另一个是:window.onload=func2 这样就造成了一个Jav ...
- Caffe---Pycaffe进行网络结构(xxx.prototxt)可视化
Pycaffe---进行网络结构(xxx.prototxt)可视化 解决网络结构(xxx.prototxt)可视化,还可以借助python接口,编写一个类似如下的pycaffe_draw_net.py ...