登录   注册

pjax无刷新切换页面【小白级别】

网站前端 xlch 2年前 (2016-10-23) 1938次浏览 2个评论 扫描二维码

pjax是一个类似于ajax的东西,ajax是无刷新切换显示数据的(比如表格什么的),pjax则是无刷新切换整个页面,嗯,这是我的理解。总之很有用就是了。
首先,看看我这个博客主题的代码。
嗯,结构很清晰,我喜欢。
那么,头部和底部基本是不需要变动的,切换页面的时候只要切换内容区域即可了。
内容区域的class=container,在jq里面就是$(“.container”)。
科普一下 .xxxx的意思是class=xxxx 那么 #xxxx的意思就是id=xxxx。

so,先下载一个pjax的插件吧,配合jq食用。
http://cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.js
之后引入,应该不用多说了吧。

pjax核心代码:

$(document).pjax('a[target!=_blank][pjax!=no][href!=#]', '.container', {fragment:'.container', timeout:5000});

so,说明一下。

a[target!=_blank][pjax!=no][href!=#]

意思是呢,监控链接标签,并且链接标签不是以新页面模式打开的,属性里面pjax不等于no,地址不等于#,
之后才会触发pjax。

timeout:5000

意思是,如果超过5000毫秒(也就是五秒钟)访问没有返回内容,则直接把当前页面跳转到那个页面去。
“.container”是上面提到的内容区域的框架。

这样,每次点击链接,就会执行上面的判断,之后pjax就会访问链接标签的地址,然后从里面抠出来”.container”,然后把当前页面的”.container”换成抠出来的内容。
So,虽说页面好了,但是是不是觉得哪里有点不对。
对,好像没有过渡。

那么就要用到下面的代码了,监听事件。

//监听pjax链接点击后的事件
$(document).on('pjax:send', function() {
    //这里写要执行的代码
});
  
//监听页面加载完成后的事件
$(document).on('pjax:complete', function() {
    //这里写要执行的代码
});

嗯,我做了一个div,里面是加载的动画,id=LoadingQwQ

 <div id="LoadingQwQ" style="display:none">
 <!-- 此处省略,你自己写吧。 -->
 </div>

注意一下,style里面“display:none”,意思是隐藏不显示。
好的,那么修改下刚刚的代码:

//监听pjax链接点击后的事件
$(document).on('pjax:send', function() {
    //设置css,让加载动画显示
    $("#LoadingQwQ").css("display", "block");
});
  
//监听页面加载完成后的事件
$(document).on('pjax:complete', function() {
    //设置css,隐藏加载动画
    $("#LoadingQwQ").css("display", "none");
});

好了,教程到此结束。


绚丽彩虹 , 版权所有丨如未注明 , 均为原创丨未经允许,禁止转载
喜欢 (2)
[pay3@xlch8.cn]
分享 (0)

您必须 登录 才能发表评论!

(2)个小伙伴在吐槽
  1. 一个非常好玩的小东西
    颜怡馨2016-12-03 01:01 Windows 7 | Chrome 50.0.2661.102
  2. 没看懂
    娃娃2016-11-14 01:59 未知操作系统 | Chrome 17.0.558.0