使用 pjax 实现无刷新切换页面
一、目的
1.当打开链接的时候，页面是淡入显示，并且页面顶部会显示加载进度条，页面显示完成时，进度条加载满并且消失。
2.点击页面上的 a 标签时，显示加载进度条，并且当前页面淡出消失，当前页面淡出消失后，目标页面则淡入显示，当页面显示完成时，进度条加载满并且消失。
二、使用的资源
1.jquery.pjax.js 点击直接进入 github 下载，上面带有英文的文档。
百度搜索到的一个中文文档：http://www.uedsc.com/jquery-pjax-js.html
2.jquery 的版本的话，这里使用的是 jquery-1.12.0.min.js
3.nprogress.js 进度条插件
官网地址：http://ricostacruz.com/nprogress/
github ：https://github.com/rstacruz/nprogress
三、说明
不知道是什么原因，我根据文档上的来写但是总是没有效果，百度了很久也没个明确结果，不过还是找到了方法，大概就是初始化定义的数据不够完整。
现在给出一个我这里可以使用的代码：
$(document).pjax('a[target!=_blank]', '#container', { fragment: '#main', timeout: 8000 });
$(这里是要响应 pjax 事件的元素的容器).pjax()函数说明：
1.第一个参数是要响应 pjax 的元素。
这里表示要捕获当前页面中，所有不是新窗口打开的 a 链接。
2.第二个参数是当前页面要替换成新页面的元素的索引器（如：Id, class 等）。
3.第三个参数是一个数组，参数看文档。
3.1.fragment 参数表示，跳转后的页面的哪个容器的内容替换掉当前页面。
3.2.timeout 表示过期时间，即，如果使用 pjax 加载响应超时的话，则使用默认的跳转方法。
示例：
1.现在有两个页面。
2.当前打开的页面 A 中，在 body 元素下有一个 div，它的 Id 是“pjax-container”。
3.现在目的是想要无刷新的跳转到 B 页面。
3.1.由于已经在 A 页面定义了 pjax 的初始化信息：$(document).pjax('a[target!=_blank]', '#pjax-container', { fragment: '#main', timeout: 8000 });。
表示，将 B 页面中，Id 是“main”的元素替换掉 A 页面中 Id 是“pjax-container”的元素。
3.2.在 A 页面增加 Id 是“pjax-container”的元素，并将需要替换掉的内容放到该元素里。
3.3.在 B 页面增加 Id 是“main”的元素，同样将切换后的内容放到该元素里。
4.完成。
补充说明：关于 JS 失效的问题，该功能不会引起 JS 失效！！！子页面如果包含 JS 操作，则必须将要用到的 JS 引用也要放到 fragment 参数标记的容器当中才可以使用。
四、源码
1.基本页面元素
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>test</title> <link href="~/Content/Scripts/Nprogress/nprogress.css" rel="stylesheet" /> <link href="~/Content/Css/base.css" rel="stylesheet" /> <script src="~/Content/Scripts/JQuery/jquery-1.12.0.min.js"></script> <script src="~/Content/Scripts/Nprogress/nprogress.js"></script> <script src="~/Content/Scripts/JQuery/Pjax/jquery.pjax.js"></script> <body> <div id="container"> ...页面内容... <script src="~/Content/Scripts/Application/init.js"></script> </div> <script src="~/Content/Scripts/Application/base.js"></script> </body> </html>
这是一个模板页
“container”容器就是当前页面要替换成新页面的元素。
2.base.css
#container { display: none; }
因为需要淡入淡出效果，所以初始默认让它们不显示。
3.base.js
3.1.当用户通过 URL 直接访问页面的时候（即：不是通过站内的 pjax 进行访问时），也要显示进度条并淡入显示页面内容，所以要加入以下代码
//打开页面时加载进度条。 NProgress.start(); window.onload = function () { NProgress.done(); $("#container").fadeIn(); }
3.2.绑定 pjax 事件
/** * 捕获 a 事件，当点击后要在 300 毫秒以后才会跳转。 */ $(document).on('click', 'a[target!=_blank]', function () { $("#container").fadeOut(); NProgress.start(); var url = $(this).attr("href"); setTimeout(function () { $.pjax({ url: url, container: containerId, fragment: "#container", timeout: 8000 }); }, 300); return false; }); $(document).on('pjax:complete', function () { //加载进度条完成。 NProgress.done(); $("#container").fadeIn(); });
3.2.1.在 jquery 里，需要绑定动态生成的内容的事件，需要使用 $(document).on 来进行事件绑定。
3.2.2.根据文档和源码，可以知道，实际加载页面是使用 $.pjax(...) 函数来进行的。
所以，这里不会使用$(document).pjax(...) 函数来绑定。
3.2.3.这里捕获了所有 a 标签的点击事件，启动加载进度条并将当前页面内容进行淡出操作，并且在 300 毫秒以后执行 pjax 加载目标页面内容，该函数返回 false，则表示禁用默认的跳转。
3.2.4.当 pajx 处理完成后，进度条加载完成并淡入显示页面内容。
4.init.js
/**
* 捕获 a 事件，当点击后要在 300 毫秒以后才会跳转。
*/
$("a").click(function (event) {
$("#container").fadeOut();
NProgress.start();
var url = $(this).attr("href");
setTimeout(function () {
$.pjax({ url: url, container: '#container', fragment: '#container', timeout: 8000 });
}, 300);
return false;
});
$(document).on('pjax:complete', function () {
//加载进度条完成。
NProgress.done();
$("#container").fadeIn();
});
根据文档和源码，可以知道，实际加载页面是使用 $.pjax(...) 函数来进行的。
所以，这里不会使用$(document).pjax(...) 函数来绑定。（其实是不知道怎么使用它来进行点击后等 N 秒才能执行跳转操作，所以只能放弃这个函数，自己手动实现了）
$("a").click 函数是捕获所有 a 标签的点击事件，启动加载进度条并将当前页面内容进行淡出操作，并且在 300 毫秒以后执行 pjax 加载目标页面内容，该函数返回 false，则表示禁用默认的跳转。
-----------------------------------------------我是分隔线---------------------------------------------------
到这里就完成了，只要将具体的页面内容放到“container”容器里就可以了，也就是将“...页面内容...”替换成具体的内容。
-----------------------------------------------我是分隔线---------------------------------------------------
补充：在使用 jquery.fadeIn() 函数来进行淡入操作的时候，当快速点击 a 标签好几次的时候（淡入操作还在进行中的时候），页面就会慢慢加载好几次（点击多少次就显示多少次），用户体验非常的不好。
这时只要在前面加上.stop(true, true) 就可以了。
示例：
$("#container").stop(true,true).fadeIn();
-----------------------------------------------下面是完整代码---------------------------------------------------
base.js
var containerId = '#container'; //打开页面时加载进度条。 NProgress.start(); window.onload = function () { NProgress.done(); $(containerId).stop(true,true).fadeIn(); } /** * 捕获 a 事件，当点击后要在 300 毫秒以后才会跳转。 */ $(document).on('click', 'a[target!=_blank][data-pjax!=false]', function () { $(containerId).fadeOut(); NProgress.start(); var url = $(this).attr("href"); setTimeout(function () { $.pjax({ url: url, container: containerId, fragment: containerId, timeout: 8000 }); }, 300); return false; }); $(document).on('pjax:complete', function () { //加载进度条完成。 NProgress.done(); $(containerId).stop(true,true).fadeIn(); });
base.css
#container { display: none; }
html
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title></title> <link href="/static/js/nprogress/nprogress.css" rel="stylesheet"/> <link href="/static/css/base.css" rel="stylesheet"/> <script src="/static/js/jquery/jquery-2.2.0.min.js"></script> <script src="/static/js/jquery/pjax/jquery.pjax.js"></script> <script src="/static/js/nprogress/nprogress.js"></script> </head> <body> <div id="container"> 我是内容 </div> <script src="/static/js/application/base.js"></script> </body> </html>
