pjax 介绍
pushState是一个可以操作history的api, pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。
jquery版
将jquery.pjax.js部署到你的页面中,将需要使用pjax的a链接进行绑定(不能绑定外域的url),如:
$.pjax({
selector: 'a',
container: '#container',//内容替换的容器
show: 'fade',//展现的动画,支持默认和fade,可以自定义动画方式,这里为自定义的function即可。
cache: true,//是否使用缓存
storage: true,//是否使用本地存储
titleSuffix: '',//标题后缀
filter: function(){},
callback: function(){}
})
注意:若设置 storage 为 true,为避免多次请求页面后导致本地 localStorage 容量不足而触发异常,请在页面加载完成后加载以下 JavaScript 代码清除已过期的记录。
if (!!window.localStorage) {
for (var key in localStorage) {
try {
if ((key.split("_") || [""])[0] === "pjax") {
var item = localStorage.getItem(key);
if (item) {
item = jsON.parse(item);
if ((parseInt(item.time) + 600 * 1000) <= new Date * 1) {
localStorage.removeItem(key)
}
}
}
} catch (e) { }
}
}
qwrap版
qwrap版需要在页面引入qwrap和对应的ajax组件。QW.pjax(selector: 'a',container: '#container',cache: true,storage: true,titleSuffix: '',filter: function(){},callback: function(){}})kissy版
kissy版需要在页面引入kissy。
KISSY.pjax(
selector: 'a',
cache: true,
storage: true,
titleSuffix: '',
filter: function(){},
callback: function(){}
})
由于kissy核心没有引用sizzle,只支持一些简单的selector,所以selector参数的值最好只为a, 对于一些不使用pjax的链接,可以通过filter函数参数进行过滤,具体的使用方法见下面的参数说明。
备注:[WARNING] 该项目已经停止维护
GitHub:https://github.com/welefen/pjax
网站描述:对ajax + pushState的封装,让你可以很方便的使用pushState技术
pjax
小编说
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。