一、目的

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>

使用 pjax 实现无刷新切换页面的更多相关文章

  1. 使用pjax实现类似github无刷新更改页面url

    pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url.一起来学习一下这个插件吧. 我们都知道 ...

  2. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  3. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  4. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  6. 使用ajax和history.pushState无刷新改变页面URL(转)

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  7. jQuery实现无刷新切换主题皮肤功能

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示DEMO:https:// ...

  8. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

  9. js修改url参数，无刷新更换页面url

    一.js修改地址栏URL参数 function changeURLPar(destiny, par, par_value) { var pattern = par + '=([^&]*)'; ...

随机推荐

  1. “全栈2019”Java异常第二十二章：try-with-resources语句详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  2. 初识Mybatis框架

    mybatis框架  主要是对数据库进行操作的 编写sql语句 使我们对数据库的crud操作更加简洁方便!! 1.使用mybatis框架 进行第一个项目 查询数据库 并返回数据 :(简单) (1)搭建 ...

  3. 安装zlib的过程（Compression requires the (missing) zlib module）（Python2.6升级为2.7出现的问题）

    觉得有必要把解决问题的过程写下来 1,因为要安装flask,所以安装pip,所以安装setuptools,所以安装zlib.(具体过程http://www.cnblogs.com/aiyr/p/726 ...

  4. [转] FFmpeg常用基本命令

    [FFmpeg]FFmpeg常用基本命令 1.分离视频音频流 ffmpeg -i input_file -vcodec copy -an output_file_video //分离视频流 ffmpe ...

  5. 各大浏览器相继发布声明将停止支持 TLS 1.0 和 TLS 1.1 ！

    简评:TLS 1.0 发布至今已将近 20 周年即将寿终正寝,期间为我们保障了千亿次甚至万亿次的数据请求安全. TLS 工作组几个月前发布声明文件弃用 TLS 1.0 和 TLS 1.1. 昨天,包括 ...

  6. 【原】[UIImage imageWithContentsOfFile:]引发的图片无法显示的问题

    最近在做一个iOS手机项目的时候,遇到一个奇怪的问题,这里跟大家分享一下. 一.问题重现 1.启动App后,通过http请求下载了一个1.jpg文件到Cache目录下,下载成功之后,将图片显示在界面上 ...

  7. lnmp环境搭建错误集合

    错误1: 页面显示:No input file specified nginx错误日志:FastCGI sent in stderr: "PHP message: PHP Warning:  ...

  8. Java switch函数

    switch()函数中能放置的值为:byte,short,char,int,string,enum类型或者byte,short,char,int的包装类,其中,string类型是java7(含)之后才 ...

  9. [Alpha]Scrum Meeting#9

    github 本次会议项目由PM召开,时间为4月11日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写每日例会报告 撰写每日例会报告撰写并整理任务分配博客 SiMrua ...

  10. Could not parse UiSelector argument: 'XXX' is not a string 错误解决办法

    ebDriverWait(driver,20).until(EC.visibility_of_element_located((MobileBy.ANDROID_UIAUTOMATOR,new UiS ...