tjax's Introduction

tjax

Asynchronous page replacement JavaScript library using Ajax and pushState.

Download

Demo

https://totoraj930.github.io/tjax

Usage

Basic

<!DOCTYPE html>
<html lang="en">
<head>
    <title>tjax</title>
    <script src="tjax.js"></script>
    <script>
        var tjax = new Tjax();

        if (!tjax.isSupported()) return;

        document.addEventListener("click", function (event) {
            var target = event.target;
            if (target.hasAttribute("data-tjax")) {
                event.preventDefault();
                event.stopPropagation();
                tjax.load(target.href);
                return false;
            }
        });
    </script>
</head>
<body>
    <a href="./page2.html" data-tjax>Go to page2</a>
</body>
</html>

API

`Tjax.setOptions`

Set the option.

See Options.

tjax.setOptions({
    areas: ["#replace_area", "#foot"],
    wait: 400
});

`Tjax.load`

Load the page according to the option and replace the elements.

tjax.load("./page-2.html");

`Tjax.isSupported`

Return whether it supports browsers.

tjax.isSupported();

Options

Name	Description	Default
`areas`	Selector array of elements to replace	`["body"]`
`wait`	Wait time to replace(ms)	`0`
`changeTitle`	Whether to change the title	`true`
`loadScript`	Whether to load the script	`true`
`controlScroll`	Whether to control the scroll	`true`
`waitPopState`	Whether to use "wait" for "onpopstate".	`true`
`onErrorNotMove`	Please feel it!!!(I can not write English!!!)	`false`

Events

All events dispatch to "document".

Name	Description
`tjax:start`	When processing is started
`tjax:loaded`	When XMLHttpRequest completed
`tjax:error`	When an error occurs
`tjax:end`	When processing is completed