日下午14:29:11
本文：4543字
分享到各大社区
pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。
并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。
一：整合pjax的准备工作；
检查你的网站是否引入1.7.0版本以上的jquery.js，如果没有请全局引入
1.新浪CDN提速：
&script&type="text/javascript"&src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"&&/script&
2.下载本地化jq：（本文底部）
&script&type="text/javascript"&src="....自己写...../jquery.js"&&/script&
1.7.0版本以上的才有pushState的封装。
二：开始整合Pjax；
& & &1.下载pjax.js （本文底部）；
& & &开源地址：
& & &2.在你喜欢的位置（最好body代码结束前）引入pjax.js；
三：使用pjax；
&&&&编辑模版footer.php在&/body&标记结束前插入：
&&&&$(document).pjax('a[target!=_blank]',&'#content',&{fragment:'#content',&timeout:8000});
& & 这句话是什么意思呢？--绑定本页面非新窗口打开的所有本域链接，链接点击之后，替换content的容器的内容为新内容contentleft，ajax超时时间8秒；
&&&&OK，因为每个模版的替换区不同，修改掉contentleft容器，保存。
&&&&现在看看，是否可以无刷新加载了？
四：解决pjax的缓冲--加入等待动画；
&&&&pjax.js提供了两个接口；
&div&class="pjax_loading"&&/div&
$(document).on('pjax:send',&function()&{&//pjax链接点击后显示加载动画；
&&&&$(".pjax_loading").css("display",&"block");
$(document).on('pjax:complete',&function()&{&//pjax链接加载完成后隐藏加载动画；
&&&&$(".pjax_loading").css("display",&"none");
&&&&当然要为pjax_loading定义css，这里就不多说了。
五：解决pjax之后，容器中一些jq事件失效的问题；
&&&&问题比如：pjax之后多说评论框不加载，ajax评论不能提交等等问题。
&&&&问题原因：原先容器绑定的事件被新容器替换掉了，新容器的div没有绑定事件，所以点击无效。
&&&&解决方法：利用pjax的加载完成回调函数，重新绑定事件。
$(document).on('pjax:complete',&function()&{
&&&&pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
function&pajx_loadDuodsuo(){
var&dus=$(".ds-thread");
if($(dus).length==1){
var&el&=&document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
&&&&OK，我们发现多说可以正常载入了。
六：全部代码汇总一下，就是这样：
&script&type="text/javascript"&src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"&&/script&&
&script&type="text/javascript"&src="你的域名/pjax.js"&&/script&
&div&class="pjax_loading"&&/div&
$(document).pjax('a', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax，#content 表示执行pjax后会发生变化的id，改成你主题的内容主体id或class。timeout是pjax响应时间限制，如果在设定时间内未响应就执行页面转跳，可自由设置；
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax，比如搜索和提交评论，可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class；
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画；
$(".pjax_loading").css("display", "block");
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画；
$(".pjax_loading").css("display", "none");
pajx_loadDuodsuo();//解决多说评论；
function&pajx_loadDuodsuo(){
var&dus=$(".ds-thread");
if($(dus).length==1){
var&el&=&document.createElement('div');
el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
el.setAttribute('data-url',$(dus).attr("data-url"));
DUOSHUO.EmbedThread(el);
$(dus).html(el);
其他一些文件下载地址：百度网盘 密码：wufh
版权声明：若无特殊注明，本文为《》原创，转载请保留文章出处。
本文链接：https://limh.me/pjax_jiaocheng.html
正文到此结束
热门指数：
热门指数：
热门指数：
热门指数：
热门指数：
热门指数：
你肿么看？
已有28条吐槽
Google Chrome 58.0.& Windows&10 x64 Edition
看了你的pjax鬼少博客也写了跟你差不多的教程
Safari 10.0& iOS 10.3.3
看看是不是十分
uBrowser 6.1.3397.16& Windows&10 x64 Edition
不错，看看
Google Chrome 56.0.2924.87& Windows&7 x64 Edition
好羞射，文章真的好赞啊，顶博主！ 有点看不懂哦，希望下次写的简单易懂一点！
Google Chrome 45.0.& Windows&7
怎么过滤某些不想要的url，例如url中带/action/的就不能ajax了
Firefox 50.0& Windows&10 x64 Edition
文章评论ajax怎么做啊
Google Chrome 54.0.2840.59& Windows&8.1 x64 Edition
主题的内容主体id是什么意思？
Google Chrome 46.0.2486.0& Windows&10
好羞射，文章真的好赞啊，顶博主！
Google Chrome 47.0.2526.80& Windows&XP
.......为什么我的PJAX 会发一个xhr请求 然后马上取消掉发document请求啊
Google Chrome 43.0.& Windows&7 x64 Edition
恩恩，这个不久前把它整合到主题中了~
uBrowser 5.5.6125.14& Windows&XP
好羞射，文章真的好赞啊，顶博主！
uBrowser 8.0& Windows&XP
好牛逼的说
Google Chrome 31.0.1650.63& Windows&8.1
换成http了
Sogou Explorer& Windows&8.1 x64 Edition
@shellingford：嗯，因为接口要用网易和虾米，会出现黄色警告。
Google Chrome 25.0.1364.84& Windows&7 x64 Edition
大神就是不一样
Google Chrome 42.0.& Windows&XP
@瓜情寡意： 大神，求别闹。
Google Chrome 25.0.1364.84& Windows&7 x64 Edition
@明月浩空： 哈哈
Google Chrome 14.0.835.186& Windows&7
对我言太专业了。感觉不错的技术应用，支持一个。
Google Chrome 33.0.& Windows&XP
@wys.me：挺好
Google Chrome 14.0.835.186& Windows&7
IBrowse r& iOS 3.2
我也过来吐槽了
Google Chrome 38.0.& Windows&7 x64 Edition
我就是过来吐槽的 哈哈
Google Chrome 31.0.1650.63& Windows&7 x64 Edition
@mrxn： 我在维护服务器，所以一段时间网站会很卡，哈哈，数据太多了。
Google Chrome 25.0.1364.84& Windows&7 x64 Edition
@明月浩空：难怪，昨天卡得要命，今天稍微好些了
Google Chrome 43.0.2357.81& Windows&7
@：嗯，我在重写播放器内核。
Google Chrome 25.0.1364.84& Windows&7 x64 Edition
@mrxn：我也是来吐槽的
Google Chrome 14.0.835.186& Windows&7
@爱思助手：额&&好久没来 没时间 过来看看
Google Chrome 44.0.2403.69& Windows&7 x64 Edition没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！【Pjax全站】Colorful自响应模板
价格：234元
更新时间： 00:57
适用于emlog：5.3.x
作者：Limh.Me
联系作者：
注意：收费模板和插件均为网友上传发布，请谨慎购买，防止被骗。
特色功能：
1、真的是全Emlog中真正做到全站Pjax+Ajax的模板了（试试别人所谓Pjax全站的搜索，评论等）
2、外观自响应所有设备（iPhone6+Plus+Ipad+PC真机测试，非网页预览）
3、独立留言板，微语，友链，读者墙时间轴全局样式
4、面包屑导航，网页WEB字体图标，短代码，文章组件，评论框组件，彩色排行、标签
5、Pjax局部加载，Ajax评论无刷新多次提交，Ajax全文即时搜索，G头像缓存，动态Title标题
6、全站自响应图片预览，导航悬浮，滚动微语，访客/博主评论样式区别，访客操作系统、浏览器、IP地址记录...
功能详解（以下说明全部非插件）：
1、真正地Pjax绑定hash自动定向容器，简单点说就是你点最新评论Pjax之后就自动定向到当前评论，而且无论你做任何事情，页面都不会产生刷新，很多所谓的Pjax，搜索和评论并没有完全做到。
2、真正的实机测试响应式，兼容各种分辨率各种设备（老古董就算了）
3、独立留言板，微语，友情链接，读者墙页面，外观采用主流的时间轴
4、面包屑导航，每个页面独立的图标和导航，日期显示
5、文章短代码，比如你只需要输入code 关键字 /code，就会有响应的外观显示在前端
6、使用FontAwesome 4.2.0网页图标字体，所有个性图标都是web font
7、文章分享，字体大小调整，宽屏浏览等组件，支持cookies，当你点击宽屏之后，一个月内，除非你再次点击显示侧边栏或者清空浏览器缓存才会切换回双栏模式
8、首页自动文章摘要（字数后台可调整），自动获取文章缩略图（后台上传的第一个文章附件，不插入文章也可以获取到，如没有附件几十张默认图随即）
9、首页文章置顶，热门，近期更新，等等标题提示
10、全站图片预览灯箱，自响应所有设备
11、评论框个性组件，字数提示，Ajax无刷新提交，新窗口弹出式表格
12、导航自动弹出附加组件和支持5.12分类菜单
13、导航动态滚动最新微语
14、导航LOGO加载动画，Title动态更新
15、侧边栏三排动态文章（最新，热门，随即）
16、个性化返回顶部动画（彩蛋：如果快速移动鼠标，老鼠被唤出不会立刻隐藏，全站任意位置快速双击鼠标左键返回顶部）
17、一堆短代码
18、全站图片灯箱
19、模板后台支持模板设置
20、评论支持IP地址显示（纯真数据库可选无限更新数据库）
21、评论支持访客和博主不同样式显示
22、评论VIP等级机制，博主有特殊认证
23、avatar本地头像缓存(缓存放在主题文件夹内)
24、彩色标签
25、侧边随机文章、热门文章、最新文章彩色数字排序
26、跟随鼠标的标题Title Tips样式
27、底部博客运行时间计时
28、导航右侧连接后台可设置
29、顶部横幅70张随即展示
30、文章二维码，热门阅读等
模板演示：
模板主站：http://limh.me
模板下载排行没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！