1. 程式人生 > >PJAX全局無刷新的設置方法~

PJAX全局無刷新的設置方法~

idt send spl 去百度 lang isp ont 動畫 tar

先添加必要文件:

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script>

然後下面加上:

<script type="text/javascript" language="javascript">

$(function() {

$(document).pjax(‘a[target!=_blank]‘, ‘#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_loading,.pjax_loading1").css("display", "block");//參考的loading動畫代碼

//執行pjax開始,在這裏添加要重載的代碼,可自行添加loading動畫代碼。例如你已調用了NProgress,在這裏添加 NProgress.start();

});

$(document).on(‘pjax:complete‘, function() {

$(".pjax_loading,.pjax_loading1").css("display", "none");//參考的loading動畫代碼

//執行pjax結束,在這裏添加要重載的代碼,可自行添加loading動畫結束或隱藏代碼。例如NProgress的結束代碼 NProgress.done();

});

});

</script>

<div class="pjax_loading"></div>

<div class="pjax_loading1"></div>

參考css代碼(可自己去百度搜索,本站也有)

.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url(‘images/pjax_loading.gif‘) 50% 50% no-repeat;}

.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;opacity: .2}

1.前面引用的jquery.pjax.min.js是國外大神寫的jquery開源的pjax通用封裝插件。

2.網上很多以上封裝的教程都沒有加上form事件,所以這個教程主要是解決博客的搜索和評論問題。

3.開源Pjax使用這個:https://github.com/defunkt/jquery-pjax

PJAX全局無刷新的設置方法~