pjax.js 다운로드 - pjax.js 소스 코드 다운로드

pjax.js

기타 카테고리

Version 0.6.6 ?

다운로드

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

설정

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

...

요구사항:

 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" )를 사용하여 파일을 업로드해야 하는 경우

테스트 대상:

인터넷 익스플로러 10
파이어폭스
구글 크롬
iOS 10
안드로이드 2.3+

용법

사용:

 Pjax . start ( ) ;

피잭스 API

방법	설명
`Pjax.supported`	이 lib를 지원하면 `true` 반환하고, 그렇지 않으면 `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 이벤트

예	설명
`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`	현재 페이지에서 사용되는 것과 동일한 URL을 요청하는 `true` , `history.replaceState` 실행되고, 그렇지 않으면 아무것도 실행되지 않습니다.
`updatehead:`	`bool`	`true`	"pjax.js"에는 "깜박임" 효과를 방지하는 데 도움이 되는 지능형 업데이트 시스템이 있습니다. 모든 것을 업데이트하는 대신 변경된 내용만 업데이트하기 때문입니다. 그러나 페이지를 표시할 때 아무 것도 변경되지 않을 것이라고 확신하는 경우 이를 설정할 수 있습니다. false로 설정하면 `<title>` 태그만 계속 업데이트됩니다.
`insertion:`	`string`	`undefined`	지원 값은 `append` 및 `prepend` . 생략하면 내용이 대체됩니다.
`scrollLeft:`	`number`	`0`	PJAX를 통해 페이지를 로드한 후 scrollLeft가 스크롤해야 하는 위치를 정의할 수 있습니다. x-코드에서 자동 스크롤을 비활성화하려면 `-1` 설정하세요.
`scrollTop:`	`number`	`0`	PJAX를 통해 페이지를 로드한 후 scrollTop이 스크롤할 위치를 정의할 수 있습니다. y 코드에서 자동 스크롤을 비활성화하려면 `-1` 설정하세요.
`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" }`

HTML5 데이터 속성이 있는 PJAX

특정 링크나 양식에 대한 속성을 덮어써야 하는 경우 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를 사용하여 리디렉션

Pjax.js 리디렉션을 강제하기 위해 백엔드에서 HTTP 응답 헤더 X-PJAX-URL 사용할 수 있습니다. 예:

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

. . .

PJAX를 사용하여 컨테이너 변경 또는 추가

Pjax.js 리디렉션을 강제하기 위해 백엔드에서 HTTP 응답 헤더 X-PJAX-URL 사용할 수 있습니다. 예:

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

사용자 정의 "more"가 필요한 경우 먼저 기본 로더를 제거하십시오.

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

확장하다

추가 정보

버전 Version 0.6.6 ?
유형 기타 카테고리
업데이트 시간 2025-01-13
크기 50MB
출처 Github

pjax.js

자동 Pjax

설정

지원하다

용법

피잭스 API

`Pjax.request()` 메소드

Pjax 이벤트

Pjax 구성

HTML5 데이터 속성이 있는 PJAX

두 개 이상의 요소 업데이트

서버 측의 Pjax

PJAX를 사용하여 리디렉션

PJAX를 사용하여 컨테이너 변경 또는 추가

Pjax를 사용한 커스텀 로더

Pjax 핸들러 응답

whatsapp web.js

video.js

html2canvas.js

확장 JS v3.1.1

확장 JS v3.0.0

Ember.js v4.0.0

chat.petals.dev

GPT Prompt Templates

GPTyped

catalogonline

ProEventos App

MichaelBrandonMorris.KingsportMillSafetyTraining

waymo open dataset

termwind

wp functions

pjax.js

자동 Pjax

설정

지원하다

용법

피잭스 API

Pjax.request() 메소드

Pjax 이벤트

Pjax 구성

HTML5 데이터 속성이 있는 PJAX

두 개 이상의 요소 업데이트

서버 측의 Pjax

PJAX를 사용하여 리디렉션

PJAX를 사용하여 컨테이너 변경 또는 추가

Pjax를 사용한 커스텀 로더

Pjax 핸들러 응답

`Pjax.request()` 메소드