ajax-pages v1.0.5
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 --savePří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