上一篇介绍了pjax插件的基本功能和实际，这篇咱们来说说怎么使用插件

初始化

1
2
3
4
5
$.pjax({
	mainContainer:'main',
    suffix:'html',
	defaultLoad:'demo1'
});

DOM Attr 跳转

1
2
3
4
5
6
7
<title>我是Demo1</title>
<div>
	<p>我是Demo1</p>
	<p>DOM Attr 方式跳转</p>
	<a pa-href="demo2">我是直接可以跳转到demo2.html</a><br>
	<a pa-href="demo2" pa-notBack>我是直接可以跳转到demo2.html,但不可以回退</a>
</div>

JS跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<title>我是Demo2</title>
<div>
	<p>我是Demo2</p>
	<p>JS方式跳转</p>
	<a id="goto3">我是直接可以跳转到demo3.html</a><br>
	<a id="goto3ForParam">我是直接可以跳转到demo3.html,还可以带参数 </a><br>
	<a id="goto3ForNotBack">我是直接可以跳转到demo3.html,但不可以回退</a><br>
	<a id="back">返回</a>
	<script>
		jQuery(document).ready(function() {
			
	        $('#goto3').click(function(){
		$.pjax('load','demo3');
	     });
	    $('#goto3ForParam').click(function(){
				$.pjax('load','demo3',{
					param1:1,
					param2:'hello would'
				});
	    });
	    $('#goto3ForNotBack').click(function(){
				    $.pjax('load','demo3',{
					param1:1,
					param2:'hellowould'
				},true);
		});
	    $('#back').click(function(){
				$.pjax('back');
			});
		});
	</script>
</div>

最后一个页面。

1
2
3
4
5
6
7
8
9
10
11
12
<title>我是Demo3</title>
<div>
	<p>我是Demo3</p>
	<a id="back">返回</a>
	<script>
		jQuery(document).ready(function($) {
			$('#back').click(function(){
				$.pjax('back');
			});
		});
	</script>
</div>

jquery.pjax 就此写完啦，我已经把各种资源放到了git上，大家可以star或fork。
git项目地址