pjax的用法

 提示:转载请注明原文链接

 本文永久链接:http://360us.net/article/36.html

pjax=ajax + pushState。

像github上面点击一个链接都会有个load的动画,github用的就是pjax加载的这些链接内容。

这里用jQuery的pjax库:jquery-pjax.js,github地址:https://github.com/defunkt/jquery-pjax

最基础的用法:

$(document).pjax('a', '#pjax-container')

会在本页面的所有a链接上面启用pjax,内容替换的容器是id为pjax-container的元素,也可以是一个class的元素。
上面这句话会使页面上所有的a链接都启用pjax,但是如果我只想部分链接启用呢?
我们可以给a元素加上data-pjax属性,然后选择器写上a[data-pjax],这样就只有类似<a data-pjax href=""></a>的链接才会启用pjax。

pjax函数的原型:

$(document).pjax(selector, [container], options)

第一个参数selector是一个字符串,代表一个可以被点击的元素。
第二个参数是选择器字符串,代表了内容替换的元素。
第三个参数是对象,键值对的选项。具体选项可以看项目github主页。


主要函数如下。

$.pjax.click
例子:

$("a:last").on("click", function(e){
    var con = $(".new-container");
    $.pjax.click(e, {container:con});
});


可以指定元素的点击事件绑定pjax,然后指定内容在哪里替换。

$.pjax.submit
这个是通过pjax提交表单。
例子:

$(document).on('submit', 'form[data-pjax]', function(event) {
    $.pjax.submit(event, '#pjax-container')
})

这个其实和上面的click很相似,只不过一个是点击一个是提交。

$.pjax.reload
这个是用pjax重新载入当前URL,但是不会添加浏览器历史记录。

$("button").click(function(){
    $.pjax.reload("#new2-container")
});


$.pjax

这个和上面基础的用法里面的pjax是不同的,上面那个是$.fn.pjax。
手动调用pjax,主要是用在一些不是点击事件的处理上面。

var url = urlForFilters()
$.pjax({url: url, container: '#pjax-container'})


还有一些pjax和浏览器前进后退生命周期之内的事件,可以参考github主页的说明。

 评论
昵称
邮箱
网址
最多500个字符