容器动画链接免费素材下载 pjax

pushState是一个能够操作history的api，该api的引见以及应用请见这里：//www.welefen.com/use-ajax-and-pushstate.html

今朝曾经有//github.com/, //plus.谷歌.com, //www.welefen.com 等网站曾经应用。

pjax是对ajax + pushState的封装，让你能够很不便的应用pushState技巧。

同时支持了缓存以及内陆存储，下次拜访的时分间接读取内陆数据，无需正在次拜访。

而且展示形式支持动画技巧，能够应用零碎自带的动画形式，也能够自界说动画展示形式。


jquery版
将jquery.pjax.js部署到你的页面中，将需求应用pjax的a链接进行绑定（不克不及绑定外域的url），如:

[code]
$.pjax({
selector: 'a',
container: '#container', //内容交换的容器
show: 'fade', //展示的动画，支持默许以及fade, 能够自界说动画形式，这里为自界说的function便可。
cache: true, //能否应用缓存
storage: true, //能否应用内陆存储
titleSuffix: '', //题目后缀
filter: function(){},
callback: function(){}
})
[/code]

pjax初级应用技术：

对于pjax这里就没有多引见了，简略易用，轻松地完成局部刷新，辞别链接带来的闪动。
以前看过pjax并完成了demo，还写了篇条记，不外jquery 1.9把live()办法删掉了，新版pjax也随之换了用on()办法完成，比来名目有用到，以是理解了新的应用办法，这里也做一个新的条记。

环境：
jquery 1.10.2
jquery.pjax.js 下载

应用办法：
监控一切class为pjaxlink的链接，采纳pjax更新链接页面中id为ToInsert的容器内容到本页面中id为Content的容器中。若猎取内容工夫超越5秒，则间接跳转：

[code]
$(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});
[/code]

应用实例：
原始页面是经过跳转的翻页，我正在没有扭转页面内容的条件下，应用pjax监控翻页链接，仅更新列表（保障列表容器是分页容器的父节点）的内容。

[code]
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);
});
}
[/code]