Jak vidíte, vše je jednoduché. Na co si ale dát pozor? A je třeba dávat pozor na div s id="smartPortfolio", id="moreButton" a id="loadingDiv", jak jsou použity ve skriptu, což nám pomáhá načítat obsah z jiných stránek. SmartPortfolio je „kontejner“ pro naše portfolio. MoreButton - to bude naše tlačítko, po kliknutí se načte další část portfolia. LoadingDiv - oblast, ve které se zobrazí text, když se portfolio plně otevře, nebo dojde k nějaké chybě.

Někteří ze čtenářů se například přesto pokusí otestovat tento skript nikoli na serveru, ale jednoduše otevřou indexový soubor v prohlížeči. V tomto případě se jim zobrazí chybová zpráva. Navíc při velmi pomalé připojení, stahování souborů může chvíli trvat, a aby uživatel pochopil, že proces probíhá, můžete tam zadat zprávu, že se data načítají nebo vkládají (obrázek, indikátor průběhu nebo něco jiného).

Scénář jsem nepsal sám, ale našel jsem ho na jednom ze stránek, autor je uveden ve zdrojovém kódu, koho to zajímá, mrkněte. Vzhledem k tomu, že není příliš velký, dám to všechno, ale pokud plánujete používat stejná ID jména a cesty k souborům jako já, pak se do toho nemůžete ani podívat, ale jednoduše to zahrnout před uzavírací značku body (v zápatí) .

Pro ty, kteří plánují změny, zde je samotný skript:

var lazyload = lazyload || (); (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + stránka + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, success: function(response) ( if ( !response || response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portfolio je plně načteno"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("Litujeme, s požadavkem se něco pokazilo. Obnovte prosím stránku."); ) )); ); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; ); ))(jQuery, lazyload) ;

Nyní tedy stojí za to mluvit o těch souborech, ze kterých budeme načítat informace. Skript předpokládá, že se bude jednat o soubory s názvy 2.html…5.html atd. který obsahuje naše informace. Například můj soubor 2.html se načte jako první a má následující obsah:

Ve struktuře mého webu leží stránky, ze kterých se po kliknutí převezmou informace pro následné načtení, ve složce Stránky. Existují tři soubory, z nichž dva jsou plné a poslední je prázdný. Předpokládá logiku scénáře.

Cesta ve skriptu je určena takto:

Var url = "./pages/" + stránka + ".html";

Pokud plánujete použít jinou cestu, nezapomeňte ji ve skriptu nahradit. Pokud jste navíc použili jiná ID, bude nutné je ve skriptu předefinovat. Právě tady:

ButtonId = "#moreButton", loadingId = "#loadingDiv", kontejner = "#smartPortfolio";

A jak jsem řekl, před závěrečnou značku body zahrneme samotný skript:

Takhle na vstupní stránka Můžete implementovat líné načítání. Pošlete další témata, o kterých byste si chtěli přečíst článek na blogu. Pokud to bude možné, pokusím se zveřejnit ne plánovaný materiál, ale ten, na který se zeptáte v sekci „Vaše návrhy“. A to je pro dnešek vše. Sbohem!

AJAX a jQuery. Dynamická aktualizace obsahu. Základy (změny od 01.03.2012)

Tento článek pojednává o tom, co jsou AJAX a jQuery, a podíváme se na příklady jejich použití.

AJAX je nástroj pro vytváření webových aplikací, které komunikují se serverem na pozadí. V tomto případě uživatel obdrží aplikaci s dynamickou aktualizací obsahu, aniž by znovu načítal celou stránku.

jQuery – JavaScript-framework, knihovna, která vám umožňuje pohodlněji používat některé funkce Javascriptu, jako je: vytváření vizuální efekty, zpracování událostí, DOM manipulace a podpora AJAX.

Stažení Nejnovější verze jQuery a naučte se podrobně všechny funkce na webu vývojáře: http://www.jquery.com/

V tomto článku se podíváme pouze na jednu funkci v knihovně jQuery, a to na funkci $.ajax(). Tato funkce nám umožňuje odesílat data na server a přijímat odpovědi ze serveru, to vše na pozadí, aniž bychom museli znovu načítat stránku. Nastavení příjmu nebo vysílání dat závisí na parametrech, se kterými je funkce $.ajax() volána. O těch hlavních bude řeč níže. Více o parametrech si můžete přečíst v manuálu jQuery.

Pojďme k příkladům.

Důležité!
Aby příklady fungovaly správně, musíte:
1. Všechny soubory musí být napsány v kódování UTF-8.
2. Skripty musí být spouštěny na webovém serveru, nikoli v prohlížeči jako soubor.

Příklad 1: Aktualizace dynamického obsahu na časovači

Vytvořme jednoduchý program, který zobrazí aktuální čas, aktualizováno jednou za sekundu pomocí časovače. Funkce tohoto programu bude získávat informace o aktuálním čase z jiného externího souboru.

Obsah souboru index.html.

V kódu je několik funkcí, pojďme si je vysvětlit.

1. Knihovna jQuery je zahrnuta v záhlaví HTML soubor, k tomu je napsán tento řádek.

Samotný soubor jquery.js je umístěn ve stejné složce jako ukázkové soubory.

2. V těle dokumentu se vytvoří kontejner, do kterého načteme obsah.

3. Na první pohled zvláštní, pro správné je potřeba funkce $(document).ready(). jQuery funguje, kromě toho v něm můžeme provádět všechny přípravy, aby program fungoval. V našem případě zavoláme funkci show(), která má mechanismus pro získávání obsahu z jiného souboru, a nastavíme časovač tak, aby byla funkce show() volána jednou za sekundu.

$(document).ready(function()( show(); setInterval("show()",1000); ));

4. Funkce show() se skládá z volání funkce $.ajax() s určitým počtem parametrů, která nám umožňuje získat informace z externího souboru na serveru na pozadí.

$.ajax(( url: "time.php", cache: false, success: function(html)( $("#content").html(html; ) ));

Zvažte parametry použité funkce $.ajax().

Url: "time.php" Odkazuje na soubor time.php pro získání obsahu. mezipaměť: false Výsledky dotazu nejsou ukládány do mezipaměti. success: function(html)( $("#content").html(html); ) Pokud je požadavek úspěšný, řízení předá funkci, která přijme obsah jako parametr a zapíše jeho kontejner. Zápis do kontejneru probíhá v tomto řádku:
$("#obsah").html(html);

Obsah souboru time.php.

Účelem souboru time.php je zobrazení aktuálního času na obrazovce.

Stažení zdrojové soubory příklad (16,6 kb):

Příklad 2: Dynamická aktualizace obsahu na základě volby uživatele

Program, který dynamicky načítá obsah dle výběru uživatele.

Obsah souboru index.html.

Jakou stránku byste chtěli otevřít?

V těle dokumentu se vytvoří formulář, který má dvě tlačítka, přes která uživatel vybere požadovaný obsah. A kontejner pro nakládání obsahu.

Událost kliknutí tlačítka na stránce 1 je zpracována funkcí $("#btn1").click() a událost kliknutí tlačítka stránky 2 je zpracována funkcí $("#btn2").click().

Obsah souborů page1.html a page2.html, které se dynamicky načítají do oblasti obsahu, je jednoduché html stránky nebo textové soubory s obsahem.

Stáhněte si ukázkové zdrojové soubory (18,4 kb):

Příklad 3: Odesílání dat na server na pozadí a získávání obsahu

Zvažte příklad, který odešle zadané uživatelské jméno na server. Server při přijetí jména vydá pozdrav a spočítá počet znaků zadaného jména.

Obsah souboru index.html.

Zadejte své jméno:

V těle dokumentu byl vytvořen formulář pro zadání uživatelského jména. A kontejner pro načítání dynamického obsahu.

Všimněte si, že samotný formulář nemá obvyklá pole akcí a metod. Funkce $("#myForm").submit() funguje jako obsluha události pro kliknutí na tlačítko "Odeslat". Zvažme tuto funkci.

$("#myForm").submit(function()( $.ajax(( typ: "POST", url: "pozdravy.php", data: "username="+$("#username").val( ), úspěch: function(html)( $("#obsah").html(html); ) )); return false; ));

Jak vidíme, hlavní práce opět souvisí s funkcí $.ajax(). Tentokrát se objevují Extra možnosti, neuvažované v příkladech 1 a 2. Konkrétně:

Typ: "POST" Typ přenosu dat. data: "username="+$("#username").val() Parametry předané serveru. V tomto případě předáváme obsah pole uživatelského jména – uživatelské jméno. Obecně se parametry zapisují stejným způsobem jako v metoda GET, na jednom řádku, například:
data: "username=Vasya&age=18&sex=male"

Všimněte si, že na konci je napsán řádek:

vrátit false; Děje se tak proto, aby se formulář nepokoušel přenést data do souboru, ze kterého se spouští a stránka se znovu nenačte.

Obsah souboru greetings.php.

".$_REQUEST["uživatelské jméno"]."!
"; echo "Vaše jméno obsahuje písmena: ".strlen($_REQUEST["uživatelské jméno"])."."; ?>

Na obrazovce zobrazíme pozdrav a spočítáme počet znaků ve jméně.

Stáhněte si ukázkové zdrojové soubory (16,8 kb):

Závěrem je třeba říci, že kromě zřejmých výhod vytváření stránek pomocí dynamicky aktualizovaného obsahu existuje řada nevýhod, které je třeba vzít v úvahu při vývoji webu, a to:

1. Na stránkách s dynamickou aktualizací obsahu tlačítko "Zpět" v prohlížeči nefunguje správně.

2. Stránky s dynamickými aktualizacemi obsahu nemění URL na základě svého obsahu, takže je nelze přidat do záložek.

3. Stránky s dynamickými aktualizacemi obsahu nejsou indexovány vyhledávače, protože neprovádějí příkazy JavaScriptu.

Tyto nedostatky lze odstranit programově. Tento článek se těmito metodami nezabývá.

Už je to nějaký čas, co jsem poslal nějaký kód. Dnes situaci napravím a dám pár užitečných úryvků jQuery, které budete na svých stránkách určitě potřebovat.

Nebudu zabíhat do teorie, veškerá dokumentace jQuery je na oficiálních stránkách knihovny. Jen vám připomenu, co je to jQuery.

jQuery je JavaScript knihovna se zaměřením na Interakce JavaScriptu a HTML. Knihovna jQuery usnadňuje přístup k jakémukoli prvku DOM, přístup k atributům a obsahu prvků DOM a manipulaci s nimi. Knihovna jQuery také poskytuje pohodlné API pro práci s AJAXem.

Tak pojďme!

1. Plynulé rolování do horní části stránky

Bez něj není žádný web kompletní. Pouhé 4 řádky kódu umožní vašim návštěvníkům plynule posouvat celou stránku nahoru jedním kliknutím.

$("a").click(function() ( $("html, tělo").animate(( scrollTop: 0 ), "slow"); return false; ));

2. Duplicitní záhlaví tabulky

Chcete-li zlepšit vnímání a čitelnost vašich tabulek, můžete pod tabulkou duplikovat jejich názvy. Zdálo by se to jako maličkost, ale je to velmi výhodné ve složitých a velkých stolech, které se nevejdou na jednu obrazovku.

$tfoot = $(" "); $($("thead").clone(true, true).children().get().reverse()).each(function()( $tfoot.append($(this)); ) $tfoot.insertAfter("tabulka");

3. Načítání externích dat

Z jQuery Nahrát externí obsah na webové stránky je velmi snadné. Lze jej zobrazit přímo v bloku DIV, jako v příkladu níže.

$("#content").load("somefile.html", function(response, status, xhr) ( // error handling if(status == "error") ( $("#content").html(" Došlo k chybě: " + xhr.status + " " + xhr.statusText); ) ));

4. Stejná výška sloupu

Je známo, že zarovnat bloky na výšku standardní prostředky HTML a CSS není tak snadné. Jen pár řádků kódu níže vám umožní nastavit výšku všech bloků na stejnou výšku většího bloku.

varmaxheight = 0; $("div.col").each(function()( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").height(maxheight);

5. Zebra tabulková

Jak víte, vnímání a čitelnost tabulky bude znatelně vyšší, pokud provedete vícebarevné střídání řádků. To je velmi snadné implementovat pomocí jQuery.

$(document).ready(function()( $("tabulka tr:even").addClass("stripe"); ));

6. Částečné obnovení stránky

S jQuery je velmi snadné implementovat blokovou (částečnou) aktualizaci stránky. Například níže uvedený kód vám umožní automaticky aktualizovat blok #refresh každých 10 sekund.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisekundy čekání

7. Předběžné načtení obrazu

Tento kód umožňuje načítat obrázky na pozadí bez načítání při prohlížení stránky. Stačí na řádku 7 uvést obrázky, které potřebujete předem načíst.

$.preloadImages = function() ( for(var i = 0; i ").attr("src", arguments[i]); ) ) $(document).ready(function() ( $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); ));

8. Otevírání externích odkazů v nových oknech/záložkách

Tento úryvek přinutí všechny externí odkazy na stránce otevřít se v novém okně prohlížeče. Skript tritely určuje aktuální doménu webu a funguje, pokud neodpovídá adrese v odkazu.

$("a").each(function() ( var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(toto ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) ));

9. Blokujte v celém okně prohlížeče

Tento skript vám pomůže roztáhnout blok tak, aby vyplnil obrazovku prohlížeče. Skvělé pro modální okna a dialogy.

var winWidth = $(window).width(); var winHeight = $(window).height(); $("div").css(( "width": winWidth, "height": winHeight, )); $(window).resize(function()( $("div").css(( "width": winWidth, "height": winHeight, )); ));

10. Kontrola složitosti hesla

Pokud umožníte návštěvníkům vašeho webu nastavit si vlastní hesla, bylo by dobré mít pod kontrolou jeho složitost a návštěvníka o tom informovat.

Nejprve napíšeme HTML část kódu:

A pomocí níže uvedeného kódu zkontrolujeme zadané heslo a zobrazíme návštěvníkovi informace: jeho heslo je složité, střední nebo slabé a také zkontrolujeme, zda není příliš krátké.

$("#pass").keyup(function(e) ( var strongRegex = new RegExp("^(?=.(8,))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var dostRegex = new RegExp("( ?=.(6,)).*", "g"); if (false == dostatekRegex.test($(this).val())) ( $("#passstrength").html("Další znaky "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Strong!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "upozornění"; $("#passstrength").html("Střední!") ; ) else ( $("#passstrength").className = "chyba"; $("#passstrength").html("Slabá!"; ) return true; ));

11. Změna velikosti obrázku pomocí jQuery

Samozřejmě je logičtější měnit velikost obrázků na straně serveru pomocí PHP a GD, ale jsou situace, kdy je to potřeba udělat na straně klienta. A s tím nám opět pomůže jQuery.

$(window).bind("load", function() ( $("#product_cat_list img").each(function() ( var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $( this).width(); var height = $(this).height(); if(width > maxWidth)( ratio = maxWidth / width; $(this).css("width", maxWidth); $(this) .css("výška", výška * poměr); výška = výška * poměr; ) var width = $(this).width(); var height = $(this).height(); if(height > maxHeight)( poměr = maxVýška / výška; $(this).css("výška", maxVýška); $(this).css("šířka", šířka * poměr); šířka = šířka * poměr; ) ); //$( "#contentpage img").show(); // ZMĚNA VELIKOSTI OBRÁZKU ));

12. Načítání obsahu při rolování stránky dolů

Tato technika je často označována jako nekonečné rolování. Obsah se načítá, když uživatel posouvá stránku. To je dostatečně snadné implementovat pomocí níže uvedeného kódu.

var loading = false; $(window).scroll(function()( if((($(window).scrollTop()+$(window).height())+250)>=$(document).height())( if( loading == false)( loading = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max"). val(), function(loaded)( $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none"); loading = false; )); ) ) )); $(document).ready(function() ( $("#loaded_max").val(50; ));

13. Ověřte nahrání obrázku

Často se stává, že potřebujete zkontrolovat, zda je obrázek aktuálně načten nebo ne. A s tím nám opět pomůže jQuery.

Var imgsrc = "img/image1.png"; $(" ").načíst(funkce () ( alert("obrázek načten"); )).error(funkce () ( alert("chyba při načítání obrázku"); )).attr("src", imgsrc);

14. Seřaďte podle abecedy

Pokud potřebujete dynamicky seřadit seznam podle abecedy, tento malý úryvek vám určitě pomůže.

$(function() ( $.fn.sortList = function() ( var mylist = $(this); var listitems = $("li", mylist).get(); listitems.sort(function(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

Uložit - užitečné.

Všechny nejnovější a nejzajímavější ze světa WordPress na mém kanálu Telegram. Předplatit!