mingyunyuziyou

pjax

作者: 秒速五厘米     
 


pjax

下面是laravel 框架为例讲解

resources/plugin/pjax 目录下创建 pjax.jspjax.css 内容如下

前端配置

pjax.js

//定义加载区域
$(document).pjax('a','#pjax-container');
//定义pjax有效时间,超过这个时间会整页刷新
$.pjax.defaults.timeout = 1200;
//显示加载动画
$(document).on('pjax:click', function() {
   $("#loading").show();
});
//隐藏加载动画
$(document).on('pjax:end', function() {
   $("#loading").hide();
});

pjax.css

#loading {
 background-color: rgba(238, 238, 238, 0.6);
 display: none;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 z-index: 2000;
 bottom: 0;
 padding-top: 10%;
}
#loading .spinner {
 margin: 100px auto;
 width: 50px;
 height: 60px;
 text-align: center;
 font-size: 10px;
}
#loading .spinner > div {
 background-color: rgba(0, 0, 0, 0.2);
 height: 100%;
 width: 6px;
 display: inline-block;
 -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
 animation: stretchdelay 1.2s infinite ease-in-out;
}
#loading .spinner .rect2 {
 -webkit-animation-delay: -1.1s;
 animation-delay: -1.1s;
}
#loading .spinner .rect3 {
 -webkit-animation-delay: -1s;
 animation-delay: -1s;
}
#loading .spinner .rect4 {
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
}
#loading .spinner .rect5 {
 -webkit-animation-delay: -0.8s;
 animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
 0%,
 40%,
 100% {
   -webkit-transform: scaleY(0.4);
 }
 20% {
   -webkit-transform: scaleY(1);
 }
}
@keyframes stretchdelay {
 0%,
 40%,
 100% {
   transform: scaleY(0.4);
   -webkit-transform: scaleY(0.4);
 }
 20% {
   transform: scaleY(1);
   -webkit-transform: scaleY(1);
 }
}

修改 Laravel框架根目录下的 webpack.mix.js 文件,添加以下代码用于复制 plugin 目录

.mix.copyDirectory('resources/plugin', 'public/plugin')
;

Laravel配置

需要安装 https://github.com/spatie/laravel-pjax 用于实现后台处理

$ composer require spatie/laravel-pjax

app/Http/Kernel.php 文件添加

protected $middleware = [
   ...
   \Spatie\Pjax\Middleware\FilterIfPjax::class,
];

使用

主模板中引入文件



定义 pjax加载区域




 
 
 
 
 
 
 



 @yield('content')

pjax 异步加载数据后会替换 id="pjax-container"  的div区域。