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官方网站
官方网站:
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。