ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

自動Pjax

Pjax.js ajax、 pushState使用し、リンクとフォームを自動的に検出するjQuery プラグインスクリプトです。設定ページでは、すべてのページでid="pjax-container"を使用する必要があります。例: 

 < div id =" pjax-container " >
    ...
</ div >

Pjax はページからすべてのコンテンツをロードしますが、 pjax-container使用して最初の要素のコンテンツのみを使用します。特定のリンクまたはフォームで Pjax が必要ない場合は、 data-pjax-ignore属性を使用します。例: 

 < p >
    Hello world!
    Example < a data-pjax-ignore href =" /page.html " > page </ a > .
</ p >

設定

ライブラリを含める

 < link rel =" stylesheet " type =" text/css " href =" pjax.min.css " data-pjax-resource =" true " >
< script src =" pjax.min.js " > </ script >

または CDN を使用します。 

 < link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.css " data-pjax-resource =" true " >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.js " > </ script >

注: CSS はオプションです。独自のローダーを作成することも、CSS を使用して次の構造をカスタマイズすることもできます (構造は Pjax.js によって生成されます)。 

 < div class =" pjax-loader pjax-start pjax-inload pjax-end pjax-hide " >
    < div class =" pjax-progress " > </ div >
</ div >

輸入： 

 const Pjax = require ( 'pjax.js' ) ;

...

ESM/ES6インポート: 

 import Pjax from 'pjax.js' ;

...

RequireJS: 

 requirejs ( [ 'folder/foo/bar/pjax' ] , function ( Pjax ) {
    ...
} ) ;

サポート

pjax.js 、リンク、メソッドGETのフォーム、メソッドPOSTのフォーム、およびファイルと複数のファイル ( <input type="file" multiple> ) をサポートします。

要件：

  • DOMParserまたはdocument.implementation
  • pushState 、 replaceState 、およびpopstate (DOM 履歴操作)
  • FormData (XMLHttpRequest レベル 2) - 必要な場合は、PJAX を使用してファイルをアップロードします ( enctype="multipart/form-data" )

テスト済み:

  • Internet Explorer 10
  • ファイアーフォックス
  • Google Chrome
  • iOS10
  • アンドロイド2.3以上

使用法

使用方法: 

 Pjax . start ( ) ;

Pjax API

方法説明
Pjax.supportedこのライブラリをサポートする場合はtrueを返し、それ以外の場合はfalseを返します
Pjax.remove(); PJAX リクエストとイベントを削除する
Pjax.on(event, function (...) {...});イベントを定義する
Pjax.off(event, function (...) {...});イベントを削除する
Pjax.request(url[, config])スクリプトを使用したリクエスト

Pjax.request()メソッド

config param はオプションで、次のように定義できます。 

 Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: "foo=1&bar=2&baz=3"
});

ファイルをアップロードしています: 

 const formdata = new FormData;
const blob = new Blob(["Hello World!"], {
  type: "text/plain"
});

formdata.append("file", blob, "hello.txt");

Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: formdata
});

使用data: :

財産タイプデフォルト説明
replace: bool false履歴状態モードを設定します。 falseに設定した場合 (または省略した場合)、 history.pushState()が使用されますが、 trueに設定した場合は、 history.replaceState()が使用されます。
method: string GET HTTPメソッドを定義する
data: bool falseリクエストでデータを送信するには、 StringまたはFormData使用できます。

Pjaxのイベント

例説明
Pjax.on("initiate", function (url, config) {...});リンクをクリックするか、フォームを送信するか、 Pjax.request()メソッドを実行するとトリガーされます。
Pjax.on("done", function (url, status) {...});ページが読み込まれるとトリガーされ、 status HTTP コードを返します
Pjax.on("fail", function (url, status) {...});ページの読み込みに失敗したときにトリガーされ、 status HTTP コードを返します
Pjax.on("then", function (url) {...});リクエストが失敗しても成功しても、リクエストが完了するたびに実行されます。
Pjax.on("history", function (url, stateData) {...});すべての使用を前後に実行します
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...}); Pjax.js リクエストに対するオーナーのレスポンスを作成する
Pjax.on("dom", function (url, newdocument) {...});要素の変更を手動で操作できます。たとえば、トランジションを作成したり、新しいドキュメントを変更したりできます。

ヒント: Pjax.on("dom", ...); DOM のイベントを削除する場合

Pjax 構成

財産タイプデフォルト説明
containers: array [ "#pjax-container" ]ページ上のどの要素を更新するかを通知します
updatecurrent: bool false trueの場合、現在のページで使用されているのと同じ URL を要求すると、 history.replaceStateが実行されます。それ以外の場合は、何も実行されません。
updatehead: bool true 「pjax.js」には、「まばたき」効果を回避するインテリジェントな更新システムが備わっています。すべてを更新するのではなく、変更されたもののみを更新するためです。ただし、ページを表示しても何も変更されないことが確実な場合は、それを設定できます。 false に設定すると、更新され続けるのは<title>タグだけになります。
insertion: string undefined値のappendおよびprependサポートします。省略した場合はコンテンツが置き換えられます。
scrollLeft: number 0 PJAX 経由でページをロードした後、scrollLeft がスクロールする場所を定義できます。 -1設定すると、X コードの自動スクロールが無効になります。
scrollTop: number 0 PJAX 経由でページをロードした後、scrollTop がスクロールする場所を定義できます。 -1設定すると、Y コードの自動スクロールが無効になります。
loader: bool trueネイティブ Pjax ローダーを追加します。独自のローダーを作成したい場合は、それをfalseに設定します。
nocache: bool falseキャッシュを防ぐ
proxy: string "" Webプロキシの設定
formSelector: string form:not([data-pjax-ignore]):not([action^='javascript:'])フォームセレクターを設定し、フォームが Pjax を使用しないように空に設定します
linkSelector: string a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:'])フォームセレクターを設定し、リンクが Pjax を使用しないように空に設定します
headers: objectカスタム ヘッダーを追加します。例: { "foo": "bar", "test": "baz" }

HTML5 データ属性を持つ PJAX

特定のリンクまたはフォームのプロパティを上書きする必要がある場合は、HTML 属性を使用して構成できます。

財産同等例説明
data-pjax-containers containers: <a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]"リクエストが特定のフォームまたはリンクから来たときにコンテナを調整します
data-pjax-updatehead updatehead: <a href="..." data-pjax-updatehead="false"リクエストが特定のフォームまたはリンクから来た場合にヘッドタグの更新を許可/禁止します。
data-pjax-insertion insertion <a href="..." data-pjax-insertion="append"データを更新する代わりにコンテナに追加または先頭に追加する
data-pjax-scroll-left scrollLeft: <form action="..." data-pjax-scroll-left="10"カスタム左スクロールで特定のフォームまたはリンクへ
data-pjax-scroll-top scrollTop: <form action="..." data-pjax-scroll-top="-1"特定のフォームまたはリンクへのカスタム スクロールトップ
data-pjax-loader loader: <a href="..." data-pjax-loader="false"ローダーの特定のフォームまたはリンクへのアニメーション化を許可/禁止する
data-pjax-done - <a href="..." data-pjax-done="console.log('success', this);"特定のフォームまたはリンクへのカスタム「完了」イベント
data-pjax-fail - <a href="..." data-pjax-fail="console.log('error', this);"特定のフォームまたはリンクへのカスタム「エラー」イベント
data-pjax-ignore - <a href="..." data-pjax-ignore="true">特定のフォームまたはリンクへの通常のナビゲーション
data-pjax-resource - <link href="..." data-pjax-resource="true"> DOM の更新後に要素を削除しないようにします (今のところ、 <head>でのみ機能します)

構成を変更するには、次のように使用します。 

 Pjax . start ( {
    containers : [ "#my-container" ] , //Change container element
    scrollLeft : - 1 , //Disable autoscroll
    scrollTop : - 1 //Disable autoscroll
} ) ;

2 つ (またはそれ以上) の要素を更新します

更新したい要素を変更したり、さらに要素を追加したりすることもできます。例: 

 < div id =" navbar " >
    ...
</ div >
< div id =" my-container " >
    ...
</ div >
< script >
Pjax . start ( {
    containers : [ "#navbar" , "#my-container" ] //Change containers element
} ) ;
</ script >

initiateイベントで構成を変更できます。例: 

 < div id =" pjax-container " >
    < div id =" filter " >
        < form >
            ...
        </ form >
    </ div >
    < div id =" search-container " >
        ...
    </ div >
</ div >
< script >
Pjax . start ( ) ;

Pjax . on ( "initiate" , function ( url , configs ) {
    if ( url . indexOf ( "/search/" ) === 0 && window . location . href . indexOf ( "/search/" ) === 0 ) {
        configs . containers = [ "#search-container" ] ;
    }
} ) ;
</ script >

製品検索ページにいて、コンテナ全体を更新する代わりに新しい検索を実行すると、製品が存在する要素のみが更新され、他のページではコンテナ全体が引き続き更新されます。

サーバーサイドの Pjax

リクエスト ヘッダーを使用して、リクエストが PJAX から来たかどうかを検出できます。

ヘッダ説明
X-PJAXページが PJAX 経由でリクエストされたことを示します
X-PJAX-Container使用されるコンテナ セレクタを通知します

PHP を使用した例: 

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    echo ' You using pjax ' ;
}

PJAXを使用したリダイレクト

バックエンドで HTTP 応答ヘッダーX-PJAX-URLを使用して、Pjax.js リダイレクトを強制できます。例: 

 header ( ' X-PJAX-URL: /new-page.html ' );

. . .

PJAXを使用してコンテナを変更または追加する

バックエンドで HTTP 応答ヘッダーX-PJAX-URLを使用して、Pjax.js リダイレクトを強制できます。例: 

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    header ( ' X-PJAX-Container: #foo,#bar ' );

    echo ' <div id="foo"> ... </div> ' ;

    echo ' <div id="bar"> ... </div> ' ;
}

Pjax を使用したカスタムローダー

CSS をカスタムできます。たとえば、色やサイズを変更したり、新しい CSS ファイルまたは<style>タグを挿入したりできます。 

. pjax-loader . pjax-progress {
    height : 6 px ;
    background-color : blue;
}

カスタムの「その他」が必要な場合は、まずデフォルトのローダーを削除します。 

 Pjax . start ( {
    loader : false
} ) ;

使用後thenイベントをinitiate 。 

 Pjax . on ( "initiate" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "block" ) ;
} ) ;

Pjax . on ( "then" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "none" ) ;
} ) ;

HTML: 

 < div class =" my-custom-loader " >
    < img src =" loader.gif " >
</ div >

Pjax ハンドラーの応答

Pjax のカスタム応答を作成するには、 handlerイベントを使用できます。例: 

 Pjax . start ( ) ;

Pjax . on ( "handler" , function ( details , done , fail ) {
    console . log ( "handler request:" , details . method , details . url ) ;
    console . log ( "handler target:" , details . element ) ;
    console . log ( "handler mode history:" , details . state ) ; // 1 == push, 2 == replace

    setTimeout ( function ( ) {
        if ( < condition for history state > ) {
            done ( '<div id="pjax-container">Foo: ' + new Date ( ) + '</div>' ) ;
        } else {
            fail ( "Custom Error" ) ;
        }
    } , 1000 ) ;
} ) ;
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて