Beranda>Kode sumber ASP>Kategori lainnya
Unduh

Piyama Otomatis

Pjax.js adalah skrip plugin jQuery yang menggunakan ajax, pushState dan secara otomatis mendeteksi tautan dan formulir, untuk mengonfigurasi halaman Anda perlu menggunakan id="pjax-container" di semua halaman, contoh: 

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

Pjax memuat semua konten dari halaman, tetapi hanya menggunakan konten dari elemen pertama menggunakan pjax-container , jika Anda tidak memerlukan Pjax dalam tautan atau formulir tertentu maka gunakan atribut data-pjax-ignore , contoh: 

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

Pengaturan

Sertakan lib 

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

Atau gunakan 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 >

Catatan: CSS bersifat opsional, Anda dapat membuat loader sendiri atau menyesuaikan struktur berikut menggunakan CSS (struktur dibuat oleh Pjax.js): 

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

Impor: 

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

...

Impor ESM/ES6: 

 import Pjax from 'pjax.js' ;

...

MemerlukanJS: 

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

Mendukung

Tautan dukungan pjax.js , formulir dengan metode GET , formulir dengan metode POST dan mendukung file dan banyak file ( <input type="file" multiple> ).

Persyaratan:

  • DOMParser atau document.implementation
  • pushState , replaceState dan popstate (manipulasi Riwayat DOM)
  • FormData (XMLHttpRequest Level 2) - jika perlu mengunggah file menggunakan PJAX ( enctype="multipart/form-data" )

Diuji di:

  • Internet Explorer 10
  • Firefox
  • Google Chrome
  • iOS 10
  • Android 2.3+

Penggunaan

Untuk digunakan: 

 Pjax . start ( ) ;

API Pjax

Metode Keterangan
Pjax.supported Kembalikan true jika mendukung lib ini, jika tidak, kembalikan false
Pjax.remove(); Hapus permintaan dan acara PJAX
Pjax.on(event, function (...) {...}); Tentukan suatu peristiwa
Pjax.off(event, function (...) {...}); Hapus sebuah acara
Pjax.request(url[, config]) Permintaan menggunakan skrip

Metode Pjax.request()

config param bersifat opsional, Anda dapat mendefinisikannya seperti ini: 

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

Mengunggah berkas: 

 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
});

Detail untuk data: :

Milik jenis bawaan keterangan
replace: bool false Menyetel mode status riwayat, jika Anda menyetelnya ke false (atau menghilangkannya) maka akan menggunakan history.pushState() , tetapi jika Anda menyetelnya ke true maka akan menggunakan history.replaceState() .
method: string GET Tentukan metode HTTP
data: bool false Untuk mengirim data dalam permintaan, Anda dapat menggunakan String atau FormData

Acara Piyama

Contoh Keterangan
Pjax.on("initiate", function (url, config) {...}); Dipicu ketika mengklik tautan atau mengirimkan formulir atau menjalankan metode Pjax.request()
Pjax.on("done", function (url, status) {...}); Dipicu ketika halaman dimuat, status mengembalikan kode HTTP
Pjax.on("fail", function (url, status) {...}); Dipicu ketika halaman gagal dimuat, status mengembalikan kode HTTP
Pjax.on("then", function (url) {...}); Dieksekusi setiap kali permintaan diselesaikan, meskipun gagal atau berhasil
Pjax.on("history", function (url, stateData) {...}); Menjalankan setiap penggunaan mundur atau maju
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...}); Buat respons pemilik Anda terhadap permintaan Pjax.js
Pjax.on("dom", function (url, newdocument) {...}); Memungkinkan Anda memanipulasi perubahan elemen secara manual, misalnya Anda dapat membuat transisi atau mengubah dokumen baru

Tip: Anda dapat menggunakan Pjax.on("dom", ...); untuk menghapus acara di DOM

Konfigurasi piyama

Milik jenis bawaan keterangan
containers: array [ "#pjax-container" ] Menginformasikan elemen mana yang akan diperbarui pada halaman
updatecurrent: bool false Jika permintaan true url yang sama yang digunakan oleh halaman saat ini dieksekusi history.replaceState , jika tidak, tidak ada yang akan dieksekusi
updatehead: bool true "Pjax.js" memiliki sistem pembaruan cerdas yang membantu menghindari efek "berkedip", karena alih-alih memperbarui semuanya, ia hanya memperbarui apa yang telah diubah, namun jika Anda yakin tidak ada yang berubah saat halaman Anda, Anda dapat mengaturnya menjadi salah, satu-satunya yang akan terus diperbarui adalah tag <title>
insertion: string undefined Nilai dukungan append dan prepend , jika dihilangkan akan menggantikan konten
scrollLeft: number 0 Setelah memuat halaman melalui PJAX Anda dapat menentukan di mana scrollLeft harus menggulir. Setel -1 untuk menonaktifkan gulir otomatis di x-cord
scrollTop: number 0 Setelah memuat halaman melalui PJAX Anda dapat menentukan di mana scrollTop harus digulir. Setel -1 untuk menonaktifkan gulir otomatis di kabel y
loader: bool true Menambahkan pemuat Pjax asli, jika Anda ingin membuat pemuat sendiri, setel ke false
nocache: bool false Cegah cache
proxy: string "" Setel Proksi Web
formSelector: string form:not([data-pjax-ignore]):not([action^='javascript:']) Setel pemilih formulir, kosongkan untuk mencegah formulir menggunakan Pjax
linkSelector: string a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:']) Setel pemilih formulir, kosongkan untuk mencegah tautan menggunakan Pjax
headers: object Menambahkan header khusus, misalnya: { "foo": "bar", "test": "baz" }

PJAX dengan atribut data HTML5

Jika perlu menimpa properti untuk tautan atau formulir tertentu, Anda dapat mengonfigurasi menggunakan atribut HTML:

Milik setara contoh keterangan
data-pjax-containers containers: <a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]" Menyesuaikan kontainer ketika permintaan berasal dari formulir atau tautan tertentu
data-pjax-updatehead updatehead: <a href="..." data-pjax-updatehead="false" Izinkan/Larang pembaruan tag kepala ketika permintaan berasal dari formulir atau tautan tertentu
data-pjax-insertion insertion <a href="..." data-pjax-insertion="append" Tambahkan atau tambahkan data ke penampung alih-alih memperbarui
data-pjax-scroll-left scrollLeft: <form action="..." data-pjax-scroll-left="10" gulir khusus ke kiri ke formulir atau tautan tertentu
data-pjax-scroll-top scrollTop: <form action="..." data-pjax-scroll-top="-1" gulir atas khusus ke formulir atau tautan tertentu
data-pjax-loader loader: <a href="..." data-pjax-loader="false" Izinkan/Larang pemuat bernyawa ke formulir atau tautan tertentu
data-pjax-done - <a href="..." data-pjax-done="console.log('success', this);" Acara khusus "selesai" ke formulir atau tautan tertentu
data-pjax-fail - <a href="..." data-pjax-fail="console.log('error', this);" Acara "kesalahan" khusus untuk formulir atau tautan tertentu
data-pjax-ignore - <a href="..." data-pjax-ignore="true"> Navigasi normal ke formulir atau tautan tertentu
data-pjax-resource - <link href="..." data-pjax-resource="true"> Cegah penghapusan elemen setelah memperbarui DOM (untuk saat ini hanya berfungsi di <head> )

Untuk mengubah konfigurasi gunakan seperti ini: 

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

Perbarui dua elemen (atau lebih)

Anda dapat mengubah elemen yang ingin Anda perbarui atau bahkan menambahkan lebih banyak elemen, misalnya: 

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

Anda dapat mengubah konfigurasi di acara initiate , contoh: 

 < 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 >

Jika Anda berada di halaman pencarian produk dan melakukan pencarian baru alih-alih memperbarui seluruh penampung hanya akan memperbarui elemen tempat produk berada, halaman lain akan terus memperbarui seluruh penampung.

Pjax di sisi server

Dimungkinkan untuk mendeteksi apakah permintaan berasal dari PJAX menggunakan header permintaan:

Tajuk Keterangan
X-PJAX Menunjukkan bahwa halaman tersebut diminta melalui PJAX
X-PJAX-Container Menginformasikan pemilih kontainer yang digunakan

Contoh menggunakan PHP: 

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

Redirect menggunakan PJAX

Anda dapat menggunakan header respons HTTP X-PJAX-URL di back-end untuk pengalihan paksa Pjax.js, contoh: 

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

. . .

Ubah atau tambahkan container menggunakan PJAX

Anda dapat menggunakan header respons HTTP X-PJAX-URL di back-end untuk pengalihan paksa Pjax.js, contoh: 

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

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

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

Pemuat khusus dengan Pjax

Anda dapat mengkustomisasi CSS, misalnya mengubah warna dan ukuran, memasukkan file CSS baru atau tag <style> : 

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

Jika Anda memerlukan "lebih banyak" khusus, hapus terlebih dahulu pemuat default: 

 Pjax . start ( {
    loader : false
} ) ;

Dan setelah digunakan, initiate dan then acara: 

 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 >

Respons pengendali piyama

Untuk membuat respons khusus untuk Pjax Anda dapat menggunakan event handler , contoh: 

 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 ) ;
} ) ;
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua