pjax-router

Pjax Router for static websites.

Usage no npm install needed!

<script type="module">
  import pjaxRouter from 'https://cdn.skypack.dev/pjax-router';
</script>

README

PjaxRouter

Pjax Router for static websites.

Latest NPM release MIT License

demos

supported

IE10+ and others.

Usage

Both standalone lib and NPM package are available.

Standalone

<script src="./js/PjaxRouter.js"></script>

NPM

$ npm install --save pjax-router

then

import PjaxRouter from 'pjax-router';

var router = new PjaxRouter( {
    // trigger for Pjax link
    triggers: [ 'a' ],
    // ignore selectors for Pjax link
    ignores: [ 'a.ignore' ],
    // replace target areas
    selectors: [ 'title', '.sandbox1', '.sandbox2' ],
    // callback for page transition. called when ajax has done
    switches: {
        'title': function ( newEl, oldEl ) {

            document.title = newEl.innerHTML;

        },
        '.sandbox1': function ( newEl, oldEl ) {

            document.querySelector('.sandbox1').innerHTML = newEl.innerHTML;

        },
        '.sandbox2': function ( newEl, oldEl ) {

            document.querySelector('.sandbox2').innerHTML = newEl.innerHTML;

        }
    }
} );

// events
router.on( 'beforeload',   function () { console.log( 'beforeload' );   } );
router.on( 'load',         function () { console.log( 'load' );         } );
router.on( 'beforeswitch', function () { console.log( 'beforeswitch' ); } );
router.on( 'afterswitch',  function () { console.log( 'afterswitch' );  } );
router.on( 'error',        function () { console.log( 'error' );        } );