ajax-pages

jQuery knihovna pro ovládání webové stránky pomocí AJAX.

Klíčové vlastnosti

• Označené odkazy načítá do zvoleného kontejneru.
• Formulářové prvky (input[type=“text”], input[type=“radio”], select) reagují na změnu (?name=value)
.
• Při změně filtru logicky odstraní klíč se stránkováním (nastavitelně).
• Mění aktuální URL v adresním řádku (pro možnost reloadu na konkrétní filtr).
• Trackuje každou stránku do Google Analytics.
• Podporuje historii (vzad i zpět).
• Mění dynamicky <title>.
• Zobrazení loading animace během načítání.
• API události (beforeLoading, afterLoading).

Podpora

IE 10+, všechny klasické prohlížeče.

Instalace

Do HTML přidáme cestu k jQuery a knihovně ajax-pages.min.js.

Pomocí npm

Knihovnu můžeme nainstalovat do závislostí pomocí npm.

npm install ajax-pages --save

Přímé stažení

Knihovnu si můžete stáhnout přímo z GitHubu. Soubor s knihovnou naleznete v cestě dist/ajax-pages.min.js.

Příklad:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../dist/ajax-pages.min.js"></script>
<script>
    $(document).ready(function() {
        ajaxPages();
    });
</script>

Použití

Odkazy

Kliknutí na všechny odkazy obsahující data atrtibut data-link="ajax" načte obsah stránky v atribugu href="" do kontejneru <div id="content"></div>.

<div id="content">
    <a href="link-to-another-page.html" data-link="ajax">Load page</a>
</div>

Formuláře

Při změně v označeném formuláři se převedou hodnoty z formulářů do URL adresy ve formátu ?name=value. Podporuje input[type=“text”], select.

<form data-link='ajax'>
    <input type="text" name="search" value="">
</form>

Nastavení

| Vlastnost | Popis | Výchozí hodnota | | --------|---------|-------| | replaceSelector | Kontejner, do kterého se načítá obsah. | '#content' | | searchSelector | Kontejner, ve kterém se hledá obsah načtené stránky. | '#content' | | replaceMethod | 'replace' nahradí obsah kontejneru 'searchSelector'. 'append' vloží získaná data na konec kontejneru. | 'replace' | | loaderSelector | CSS selektor pro zobrazení loading animace. | '#loadingContent' | | linkSelector | CSS selektrok pro určení odkazů požadující AJAX načtení. | "a[data-link='ajax']" | | formSelector | CSS selektrok pro určení formuláře požadující AJAX načtení. | "form[data-link='ajax']" | | paginationKey | URL parametr obsahující stránkování, např. ?p=1. | "p" | | scrollTop | Po načtení stránky vyscrolluje na element scrollTopSelector. | true | | scrollTopSelector | Element, na který nascrolluje stránka po načtení. | '#content' | | scrollTopDuration | Délka animce scrollování stránky. | 500 | | enableAnalyticsTrack | Odesílání nově navštívené URL adresy do Google Analytics. | true | | enableUrlChange | Dynamické změnění URL v adresním řádku prohlížeče. | true | | changeTitle | Dynamické měnění TITLE v prohlížeči. | true | | minLoadTime | Minimální čas loadingu - pozdrží vykreslení výsledku. | 0 | | rootSelector | CSS selektor, ve kterém funkce pracuje. | body | | typingTimeout | Čas, po kterém se začne obsah načítat při přerušení psaní do input. | 500 | | loadOnPopState | Při kroku zpět/vpřed v prohlížeči načítá znovu aktuální obsah stránky pomocí AJAX. | false |

Příklad nastavení:

ajaxPages({
    enableUrlChange: true,
    changeTitle: false
});

Události

Callback funkce, volající se před začátkem načítání a po úspěšném načtení stránky.

ajaxPages({
    beforeLoading: function () {
        //todo
    },
    afterLoading: function () {
        //todo
    }
});

Callback při chybě načtení stránky.

ajaxPages({
    onError: function () {
        //todo
    }
});

Google Analytics

Pokud je na webu použit měřící kód Google Analytics, při změně URL adresy se automaticky odesílá informace do Google Analytics o navštívené adrese. Využívá funkci ga.

Loading animace

Pro přidání loading animace potřebujeme:

• Přidat <div id="loadingContent"><div class="spinner"></div></div>.
• Definovat CSS animaci pro třídu spinner. Příklad animace je ve složce /demo/style.css.

Příklad:

<div id="content">
    <a href="link-to-another-page.html" data-link="ajax">Load page</a>
    <div id="loadingContent"><div class="spinner"></div></div>
</div>

Ve vývoji

• Podpora multicheckboxů (pole do url ?key[]=)
• Umět určovat pořadí klíčů v URL pro lepší SEO
• Podpora pro hezké url jako je /skoda/octavia/benzin
• Testy