Página Inicial>Código fonte ASP>Outras categorias
Baixar

Pjax automático

O Pjax.js é um script de plugin jQuery que usa ajax, pushState e detecta automaticamente links e formulários, para configurar a página você precisa usar id="pjax-container" em todas as páginas, exemplo: 

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

Pjax carrega todo o conteúdo das páginas, mas usa apenas o conteúdo do primeiro elemento usando pjax-container , se você não precisa do Pjax em um link ou formulário específico, use o atributo data-pjax-ignore , exemplo: 

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

Configurar

Incluir biblioteca 

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

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

Nota: CSS é opcional, você pode criar seu próprio carregador ou customizar a seguinte estrutura usando CSS (a estrutura é gerada por Pjax.js): 

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

Importar: 

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

...

Importação ESM/ES6: 

 import Pjax from 'pjax.js' ;

...

Requer JS: 

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

Apoiar

O pjax.js suporta links, formulários com método GET , formulários com método POST e suporta arquivos e múltiplos arquivos ( <input type="file" multiple> ).

Requisitos:

  • DOMParser ou document.implementation
  • pushState , replaceState e popstate (manipulação do histórico do DOM)
  • FormData (XMLHttpRequest Level 2) - se necessário faça upload de arquivos usando PJAX ( enctype="multipart/form-data" )

Testado em:

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

Uso

Para uso: 

 Pjax . start ( ) ;

API Pjax

Método Descrição
Pjax.supported Retorne true se suportar esta biblioteca, caso contrário, retorne false
Pjax.remove(); Remover solicitações e eventos PJAX
Pjax.on(event, function (...) {...}); Definir um evento
Pjax.off(event, function (...) {...}); Remover um evento
Pjax.request(url[, config]) Solicitar usando script

Método Pjax.request()

config param é opcional, você pode definir assim: 

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

Carregando arquivo: 

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

Detalhes para data:

Propriedade tipo padrão descrição
replace: bool false Define o modo de estado do histórico, se você definir como false (ou omitir), ele usará history.pushState() , mas se você definir como true ele usará history.replaceState() .
method: string GET Definir método HTTP
data: bool false Para enviar dados na solicitação, você pode usar String ou FormData

Eventos Pjax

Exemplo Descrição
Pjax.on("initiate", function (url, config) {...}); Disparado quando clicado em um link ou envia um formulário ou executa o método Pjax.request()
Pjax.on("done", function (url, status) {...}); Acionado quando a página é carregada, status retorna o código HTTP
Pjax.on("fail", function (url, status) {...}); Acionado quando a página não carrega, código HTTP de retorno de status
Pjax.on("then", function (url) {...}); Executa sempre que uma solicitação é concluída, mesmo se falhar ou for bem-sucedida
Pjax.on("history", function (url, stateData) {...}); Executa cada uso para frente ou para trás
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...}); Crie sua resposta de proprietário à solicitação Pjax.js
Pjax.on("dom", function (url, newdocument) {...}); Permite manipular uma alteração de elemento manualmente, por exemplo, você pode criar transições ou alterar um novo documento

Dica: Você pode usar Pjax.on("dom", ...); para remover eventos no DOM

Configurações Pjax

Propriedade tipo padrão descrição
containers: array [ "#pjax-container" ] Informa quais elementos atualizar na página
updatecurrent: bool false Se a solicitação true , o mesmo URL usado pela página atual for executado history.replaceState , caso contrário, nada será executado
updatehead: bool true O "pjax.js" possui um sistema de atualização inteligente que ajuda a evitar o efeito "piscar", pois ao invés de atualizar tudo ele apenas atualiza o que foi alterado, porém se você tem certeza que nada mudará conforme você pagina, você pode configurá-lo para false, a única que continuará sendo atualizada será a tag <title>
insertion: string undefined Valores de suporte append e prepend ; se omitidos, substituirão o conteúdo
scrollLeft: number 0 Depois de carregar uma página via PJAX você pode definir onde scrollLeft deve rolar. Defina -1 para desativar a rolagem automática no x-cord
scrollTop: number 0 Após carregar uma página via PJAX você pode definir onde o scrollTop deve rolar. Defina -1 para desativar a rolagem automática no cabo y
loader: bool true Adiciona o carregador Pjax nativo, se você quiser criar um carregador próprio, configure-o como false
nocache: bool false Impedir cache
proxy: string "" Definir proxy da web
formSelector: string form:not([data-pjax-ignore]):not([action^='javascript:']) Definir seletor de formulário, definir vazio para evitar formulários usa Pjax
linkSelector: string a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:']) Definir seletor de formulário, definir vazio para evitar links usa Pjax
headers: object Adiciona cabeçalhos personalizados, por exemplo: { "foo": "bar", "test": "baz" }

PJAX com atributo de dados HTML5

Se precisar substituir as propriedades de um link ou formulário específico, você pode configurar usando atributos HTML:

Propriedade equivalente exemplo descrição
data-pjax-containers containers: <a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]" Ajusta os containers quando a solicitação vem de um formulário ou link específico
data-pjax-updatehead updatehead: <a href="..." data-pjax-updatehead="false" Permitir/proibir atualização da tag head quando a solicitação vier de um formulário ou link específico
data-pjax-insertion insertion <a href="..." data-pjax-insertion="append" Anexe ou anexe dados aos contêineres em vez de atualizar
data-pjax-scroll-left scrollLeft: <form action="..." data-pjax-scroll-left="10" rolagem personalizada para a esquerda para um formulário ou link específico
data-pjax-scroll-top scrollTop: <form action="..." data-pjax-scroll-top="-1" rolagem personalizada para formulário ou link específico
data-pjax-loader loader: <a href="..." data-pjax-loader="false" Permitir/proibir animação do carregador para formulário ou link específico
data-pjax-done - <a href="..." data-pjax-done="console.log('success', this);" Evento "concluído" personalizado para formulário ou link específico
data-pjax-fail - <a href="..." data-pjax-fail="console.log('error', this);" Evento de "erro" personalizado para formulário ou link específico
data-pjax-ignore - <a href="..." data-pjax-ignore="true"> Navegação normal para formulário ou link específico
data-pjax-resource - <link href="..." data-pjax-resource="true"> Impedir a remoção do elemento após atualização do DOM (por enquanto só funciona no <head> )

Para alterar configurações, use assim: 

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

Atualize dois elementos (ou mais)

Você pode alterar o elemento que deseja atualizar ou até mesmo adicionar mais elementos, por exemplo: 

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

Você pode alterar as configurações no evento initiate , exemplo: 

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

Se você estiver em uma página de pesquisa de produtos e estiver fazendo uma nova pesquisa ao invés de atualizar todo o container irá atualizar apenas o elemento onde estão os produtos, outras páginas continuarão atualizando todo o container.

Pjax no lado do servidor

É possível detectar se a requisição veio do PJAX utilizando os cabeçalhos da requisição:

Cabeçalho Descrição
X-PJAX Indica que a página foi solicitada via PJAX
X-PJAX-Container Informa os seletores de contêineres utilizados

Exemplo usando PHP: 

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

Redirecionar usando PJAX

Você pode usar o cabeçalho de resposta HTTP X-PJAX-URL no back-end para forçar redirecionamentos Pjax.js, exemplo: 

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

. . .

Altere ou adicione contêiner usando PJAX

Você pode usar o cabeçalho de resposta HTTP X-PJAX-URL no back-end para forçar redirecionamentos Pjax.js, exemplo: 

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

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

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

Carregador personalizado com Pjax

Você pode customizar CSS, por exemplo, alterar cor e tamanho, colocar um novo arquivo CSS ou tag <style> : 

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

Se você precisar de "mais" personalizado, primeiro remova o carregador padrão: 

 Pjax . start ( {
    loader : false
} ) ;

E após o uso initiate e then eventos: 

 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 >

Resposta do manipulador Pjax

Para criar respostas personalizadas para Pjax você pode usar o evento handler , exemplo: 

 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 ) ;
} ) ;
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos