扫一扫分享
pushState是一个可以操作history的api, pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。
将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和对应的ajax组件。
QW.pjax( selector: 'a', container: '#container', cache: true, storage: true, titleSuffix: '', filter: function(){}, callback: function(){} })
kissy版需要在页面引入kissy。
KISSY.pjax( selector: 'a', container: '#container', cache: true, storage: true, titleSuffix: '', filter: function(){}, callback: function(){} })
由于kissy核心没有引用sizzle, 只支持一些简单的selector, 所以selector参数的值最好只为a, 对于一些不使用pjax的链接,可以通过filter函数参数进行过滤,具体的使用方法见下面的参数说明。
备注:[WARNING] 该项目已经停止维护
手机预览