Pajax Using Tutorials

Pajax Library file please go to GitHub to download, address at the bottom of the article.

You need to introduce jquery first and then introduce Pjax

Steps:

First, your project needs to have two pages, page1.html, page2.html, now the need is page1.html click on a hyperlink to jump to the page2.html when you can directly update the content of the page without having to refresh the entire page.

Second, create a class main-wrap div in page1.html and add some content to it. Then add a hyperlink to the page2.html after the div: <a data-pjax href= "./page2.html" ></a>, and introduce jquery and Pjax in the file

Three, I think you should now notice that this tag has a property data-pjax, plus this tag is to tell Pjax only added Data-pjax property of a tag jump to pjax processing, the other or refresh the way to load.

Iv. Copy the contents of the page1.html to page2.html, and then modify the contents of the Main-wrap in the Page2 to be different from the original.

Of course, I am just a demo of the way to explain, the reader can use Pjax in their own projects can be.

OK, now click on the a tag in page1.html, and now you can see that the content in Main-wrap is replaced by Main-wrap in the page Page2.

Here is a section of my Pjax code that comments might help you with the "Lesson of the blood: Please don't have a spelling mistake!" Please do not have spelling mistakes! Please do not have spelling mistakes! Re-say three ":

/* pjax */if  ($.support.pjax)  {    $ (document) Pjax (' A[data-pjax] ',   '. Main-wrap ', {        //  this page id         fragment:  '. Main-wrap ',                           // id        timeout: 200000000,      of the source Also    show:  ' fade ',        cache: true,   //whether to use cache         push: true,         REPLACE: TRUE,        //SCROLLTO: 250,     });     $ (document). On (' Pjax:send ', function  ()  {  //pjax link Click to show load animation         $ ("#progress"). Removeclass ("Done");//complete, Hide progress bar          $ ({property: 0}). Animate ({property: 100}, {             duration: 500,             step: function  ()  {                 var percentage = math.round (This.property );                 $ (' #progress '). CSS (' width ', percentage +  "%");                 if  (percentage == 100)  {                     $ ("#progress"). AddClass ("Done");//complete, Hide progress bar &NBsp;               }             }        }     });//replace title    $ (document) after loading is complete. On (' Pjax:success ',  function  (data, status, xhr, options)  {         $ (' title '). Text (data.relatedtarget.innertext +  '  -  News ');     }) ;     $ (document). On (' Pjax:complete ', function  ()  {         $ ("#progress"). AddClass ("Done");//complete, hide progress bar     });     $ (document). On (' Pjax:error ', function  ()  {         alert ("Load failed!");     });}

Loading Bar HTML:

<div id= "Progress" > <span></span></div>

Load Bar CSS:

/* progress bar */#progress  {    position:fixed;     height: 2px;    top: 0;    background: #32BACA;     transition:opacity 500ms linear} #progress .done {     opacity:0} #progress  span {    position:absolute;    height : 2px;    -webkit-box-shadow: #32BACA  1px 0 6px 1px;     -webkit-border-radius:100%;    opacity:1;    width:150px;     right:-10px;    -webkit-animation:pulse 2s ease-out 0s  infinite;} @-webkit-keyframes pulse {    30% {         opacity:.6    }    60% {         opacity:0;    }    100% {         opacity:.6    }}

Official address: Https://github.com/defunkt/jquery-pjax

Pajax Using Tutorials