ดาวน์โหลด pjax.js - ดาวน์โหลดซอร์สโค้ด pjax.js

pjax.js

หมวดหมู่อื่นๆ

Version 0.6.6 ?

ดาวน์โหลด

Pjax อัตโนมัติ

Pjax.js เป็นสคริปต์ ~~ปลั๊กอิน jQuery~~ ที่ใช้ ajax, pushState และตรวจจับลิงก์และแบบฟอร์มโดยอัตโนมัติ สำหรับการกำหนดค่าหน้าคุณต้องใช้ 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 >

ตั้งค่า

รวม lib

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

...

ต้องการJS:

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

สนับสนุน

ลิงก์รองรับ pjax.js แบบฟอร์มที่มีเมธอด GET แบบฟอร์มที่มีเมธอด POST และรองรับไฟล์และหลายไฟล์ ( <input type="file" multiple> )

ความต้องการ:

DOMParser หรือ document.implementation
pushState , replaceState และ popstate (การจัดการประวัติ DOM)
FormData (XMLHttpRequest Level 2) - หากต้องการอัปโหลดไฟล์โดยใช้ PJAX ( enctype="multipart/form-data" )

ทดสอบใน:

อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 10
ไฟร์ฟอกซ์
กูเกิลโครม
ไอโอเอส 10
แอนดรอยด์ 2.3+

การใช้งาน

สำหรับการใช้งาน:

 Pjax . start ( ) ;

Pjax API

วิธี	คำอธิบาย
`Pjax.supported`	คืนค่า `true` หากรองรับ lib นี้ มิฉะนั้นจะส่งคืนค่า `false`
`Pjax.remove();`	ลบคำขอและกิจกรรม PJAX
`Pjax.on(event, function (...) {...});`	กำหนดเหตุการณ์
`Pjax.off(event, function (...) {...});`	ลบกิจกรรม
`Pjax.request(url[, config])`	ร้องขอโดยใช้สคริปต์

วิธีการ `Pjax.request()`

พารามิเตอร์ config เป็นทางเลือก คุณสามารถกำหนดได้ดังนี้:

 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.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" มีระบบอัปเดตอัจฉริยะที่ช่วยหลีกเลี่ยงเอฟเฟกต์ "กะพริบ" เนื่องจากแทนที่จะอัปเดตทุกอย่างจะอัปเดตเฉพาะสิ่งที่เปลี่ยนแปลงไปเท่านั้น อย่างไรก็ตาม หากคุณแน่ใจว่าไม่มีอะไรเปลี่ยนแปลงเมื่อคุณเปิดเพจ คุณสามารถตั้งค่าได้ หากเป็นเท็จ สิ่งเดียวที่จะได้รับการอัปเดตต่อไปคือแท็ก `<title>`
`insertion:`	`string`	`undefined`	ค่าสนับสนุน `append` และ `prepend` หากละไว้ ระบบจะแทนที่เนื้อหา
`scrollLeft:`	`number`	`0`	หลังจากโหลดเพจผ่าน PJAX คุณสามารถกำหนดได้ว่า scrollLeft ควรเลื่อนไปที่ใด ตั้งค่า `-1` เพื่อปิดใช้งานการเลื่อนอัตโนมัติใน x-cord
`scrollTop:`	`number`	`0`	หลังจากโหลดเพจผ่าน PJAX คุณสามารถกำหนดได้ว่า scrollTop ควรเลื่อนไปที่ใด ตั้งค่า `-1` เพื่อปิดใช้งานการเลื่อนอัตโนมัติใน y-cord
`loader:`	`bool`	`true`	เพิ่มตัวโหลด Pjax ดั้งเดิม หากคุณต้องการสร้างตัวโหลดของคุณเอง ให้ตั้งค่าเป็น `false`
`nocache:`	`bool`	`false`	ป้องกันแคช
`proxy:`	`string`	`""`	ตั้งค่าเว็บพร็อกซี
`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" }`

PJAX พร้อมแอตทริบิวต์ข้อมูล HTML5

หากต้องการเขียนทับคุณสมบัติสำหรับลิงก์หรือแบบฟอร์มเฉพาะ คุณสามารถกำหนดค่าโดยใช้แอตทริบิวต์ HTML:

คุณสมบัติ	เทียบเท่า	ตัวอย่าง	คำอธิบาย
`data-pjax-containers`	`containers:`	`<a href="..." data-pjax-containers="[ "#foo", "#bar", "#baz" ]"`	ปรับคอนเทนเนอร์เมื่อคำขอมาจากแบบฟอร์มหรือลิงก์เฉพาะ
`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
} ) ;

อัปเดตสององค์ประกอบ (หรือมากกว่า)

คุณสามารถเปลี่ยนองค์ประกอบที่คุณต้องการอัปเดตหรือเพิ่มองค์ประกอบเพิ่มเติมได้ เช่น:

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

และหลังการใช้งาน initiate then เหตุการณ์:

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