资源大全_资源网 登录

首页  php  jsp  js  java  python  .net  H5  asp  易语言  C#   jQuery  游戏  微信小程序  插件

您当前的位置:首页 >  jQuery

pjax (ajax + pushState的封装) 无刷新翻页等

2021-01-21 22:42:51  35资源网(www.35d.net)
   jQuery
下载本资源原文网址:http://www.daima.org/jQuery/jq15629.html
pushState是一个可以操作history的api,该api的介绍和使用请见这里://www.welefen.com/use-ajax-and-pushstate.html

目前已经有//github.com/, //plus.google.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]
下载地址: [ 下载地址1 ]  消耗积分:0分  [ 下载地址2 ]  消耗积分:0分
[ 下载地址3 ]  消耗积分:0分    
网盘密码 (密码:)
impleValidate (jQuery Simple Validation)
仿新浪电影频道2013版幻灯片支持自动轮播
赞助
相关代码
    无相关信息
最新代码
栏目热门
Tags: 微信小程序 源码 源码下载 HTML5游戏 92Game 整站源码 PHP 商业版 帝国CMS cms 完整版 网站源码 织梦模板 织梦 wordpress插件 下载 最新 html5源码 微信小程序源码 帝国CMS内核 带后台 微信公众号 DEDECMS HTML5 完整源码 微信 自动采集 完整版源码 ecshop 源代码 Thinkphp dede织梦模板 PHP+MYSQL 小程序 小程序源码 DESTOON6.0 搜客淘宝客 淘宝客 更新包合集 带手机版 整站 手机版 完整运营版 游戏 92 92kaifa 完整商业版源码 管理系统 dedecms模板 织梦CMS内核 带数据 电影网站 系统 多城市 生成静态 免费下载 一键安装版 系统源码 多多淘宝客 同步包
资源大全_资源下载网站:www.35d.net    本站资源仅限研究学习使用,如需商用请联系版权方,     本站事务联系QQ:939804642