Už je to nejaký čas, čo som poslal nejaký kód. Dnes napravím situáciu a dám niekoľko užitočných úryvkov jQuery, ktoré budete určite potrebovať na svojich stránkach.

Nebudem zachádzať do teórie, všetka dokumentácia jQuery je na oficiálnej stránke knižnice. Len vám pripomeniem, čo je jQuery.

jQuery je JavaScriptová knižnica zameraná na interakciu medzi JavaScriptom a HTML. Knižnica jQuery uľahčuje prístup k akémukoľvek prvku DOM, prístup k atribútom a obsahu prvkov DOM a manipuláciu s nimi. Knižnica jQuery tiež poskytuje pohodlné API pre prácu s AJAX.

Tak, poďme!

1. Plynulé posúvanie do hornej časti stránky

Žiadna webová stránka nie je kompletná bez nej. Len 4 riadky kódu umožnia vašim návštevníkom plynulo posúvať celú stránku nahor jediným kliknutím.

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

2. Duplicitné hlavičky tabuľky

Ak chcete zlepšiť vnímanie a čitateľnosť svojich tabuliek, ich názvy môžete duplikovať pod tabuľkou. Zdalo by sa to ako maličkosť, ale je to veľmi výhodné v zložitých a veľkých stoloch, ktoré sa nezmestia na jednu obrazovku.

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

3. Načítanie externých údajov

S jQuery je veľmi jednoduché načítať externý obsah na webové stránky. Môže sa zobraziť priamo v bloku DIV, ako v príklade nižšie.

$("#content").load("nejakysubor.html", function(response, status, xhr) ( // error handling if(status == "error") ( $("#content").html(" Vyskytla sa chyba: " + xhr.status + " " + xhr.statusText); ) ));

4. Rovnaká výška stĺpca

Je známe, že zarovnanie blokov na výšku pomocou štandardných nástrojov HTML a CSS nie je také jednoduché. Len pár riadkov kódu nižšie vám umožní nastaviť výšku všetkých blokov na rovnakú výšku väčšieho bloku.

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

5. Tabuľková zebra

Ako viete, vnímanie a čitateľnosť tabuľky bude výrazne vyššia, ak urobíte viacfarebné striedanie riadkov. Toto je veľmi jednoduché implementovať pomocou jQuery.

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

6. Čiastočné obnovenie stránky

S jQuery je veľmi jednoduché implementovať blokové (čiastočné) obnovenie stránky. Nižšie uvedený kód vám napríklad umožní automaticky aktualizovať blok #refresh každých 10 sekúnd.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisekúnd na čakanie

7. Predbežné načítanie obrázka

Tento kód vám umožňuje načítať obrázky na pozadí bez načítania pri prezeraní stránky. Stačí uviesť v riadku 7 obrázky, ktoré potrebujete vopred načítať.

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

8. Otváranie externých odkazov v nových oknách/kartách

Tento úryvok prinúti všetky externé odkazy na stránke otvoriť sa v novom okne prehliadača. Skript tritely určuje aktuálnu doménu stránky a funguje, ak sa nezhoduje s adresou v odkaze.

$("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. Blokovať v celom okne prehliadača

Tento skript vám pomôže roztiahnuť blok tak, aby vyplnil obrazovku prehliadača. Skvelé pre modálne okná a dialógy.

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

10. Kontrola zložitosti hesla

Ak umožníte návštevníkom vašej stránky nastaviť si vlastné heslá, bolo by dobré kontrolovať jej zložitosť a návštevníka o nej informovať.

Najprv napíšme HTML časť kódu:

A pomocou nižšie uvedeného kódu skontrolujeme zadané heslo a zobrazíme informáciu návštevníkovi: jeho heslo je zložité, stredné alebo slabé a tiež skontrolujeme, či nie je príliš krátke.

$("#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 == dostatokRegex.test($(this).val())) ( $("#passstrength").html("Viac znakov "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Strong!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "upozornenie"; $("#passstrength").html("Stredne!") ; ) else ( $("#passstrength").className = "error"; $("#passstrength").html("Slabé!"; ) return true; ));

11. Zmena veľkosti obrázka pomocou jQuery

Samozrejme, je logickejšie meniť veľkosť obrázkov na strane servera pomocou PHP a GD, ale sú situácie, kedy to treba urobiť na strane klienta. A jQuery nám s tým opäť pomôže.

$(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 * pomer); výška = výška * pomer; ) var width = $(this).width(); var height = $(this).height(); if(height > maxHeight)( pomer = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; ) ); //$( "#contentpage img").show(); // ZMENA VEĽKOSTI OBRÁZKA ));

12. Načítavanie obsahu pri posúvaní stránky nadol

Táto technika sa často označuje ako nekonečné rolovanie. Obsah sa načíta, keď používateľ posúva stránku. Toto je dosť jednoduché na implementáciu pomocou nižšie uvedeného kódu.

var loading = false; $(okno).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. Overte nahranie obrázka

Často sa stáva, že potrebujete skontrolovať, či je obrázok aktuálne načítaný alebo nie. A jQuery nám s tým opäť pomôže.

Var imgsrc = "img/image1.png"; $(" ").load(funkcia () ( alert("obrázok načítaný"); )).error(funkcia () ( alert("chyba pri načítavaní obrázku"); )).attr("src", imgsrc);

14. Zoraďte podľa abecedy

Ak potrebujete dynamicky zoradiť zoznam podľa abecedy, tento malý úryvok vám určite 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žiť - užitočné.

Všetky najnovšie a najzaujímavejšie zo sveta WordPress na mojom kanáli Telegram. Prihláste sa na odber!

Ahojte všetci. Dnes sa s vami chcem porozprávať o tom, ako organizovať lenivé načítanie obsahu na vstupných stránkach.

Často sa nazýva aj „nekonečné rolovanie“. Iste ste už videli podobný efekt, keď sa obsah na stránke pôvodne nenachádzal a pri rolovaní stránky sa plynulo načítava.

Už dávno napísali do sekcie „Vaše návrhy“ so žiadosťou o napísanie článku o tom, ako implementovať takýto efekt:

Tak som sa rozhodol začať s realizáciou. Ďakujem za nápady. Začnime...

Ako vo väčšine prípadov, začneme zahrnutím knižnice jQuery:

A teraz musíte trochu odbočiť a vysvetlím vám podstatu metódy. Toto všetko sa spúšťa preto, aby sa nenačítali všetky prvky stránky (vaše portfólio či recenzie), ale aby sa načítali podľa potreby. Napríklad, keď používateľ klikne na tlačidlo „Zobraziť viac“. Stránka sa tak načíta oveľa rýchlejšie. A teraz podstata, pomocou technológie ajax načítame požadovaný prvok (div) a súbor tretej strany na našu vstupnú stránku. Všetko je také jednoduché, teoreticky aj prakticky, a čoskoro to uvidíte.

Teraz si vytvoríme hlavný blok, napríklad s obrázkami našej práce. Predpokladajme, že nakreslíme ikony a načítame ich po kliknutí na tlačidlo. Vytvoril som takúto štruktúru:

Portfólio

Zobraziť viac...

Ako vidíte, všetko je jednoduché. Na čo by ste si však mali dať pozor? A treba si dať pozor na div s id="smartPortfolio", id="moreButton" a id="loadingDiv", ako sa používajú v skripte, čo nám pomáha načítať obsah z iných stránok. SmartPortfolio je „kontajner“ pre naše portfólio. MoreButton – toto bude naše tlačidlo, po kliknutí sa načíta ďalšia časť portfólia. LoadingDiv - oblasť, v ktorej sa zobrazí text, keď sa portfólio úplne otvorí, alebo sa vyskytne nejaká chyba.

Niektorí z čitateľov sa napríklad stále pokúsia otestovať tento skript nie na serveri, ale jednoducho otvoria indexový súbor v prehliadači. V tomto prípade sa im zobrazí chybové hlásenie. Okrem toho pri veľmi pomalom pripojení môže sťahovanie súborov chvíľu trvať, a aby používateľ pochopil, že proces prebieha, môžete tam zadať správu, že sa sťahujú údaje alebo umiestniť (obrázok, indikátor priebehu alebo niečo iné).

Scenár som nenapísal sám, ale našiel som ho na jednej zo stránok, autor je uvedený v zdrojovom kóde, koho to zaujíma, pozrite sa. Keďže nie je príliš veľký, dám to všetko, ale ak plánujete použiť rovnaké ID názvy a cesty k súborom ako ja, nemôžete sa doň ani pozrieť, ale jednoducho ho vložiť pred záverečnú značku tela (v päta) .

Pre tých, ktorí plánujú vykonať zmeny, tu 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("Portfólio je plne načítané"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("Prepáčte, niečo sa pokazilo s požiadavkou. Obnovte stránku."); ) )); ); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; ); ))(jQuery, lazyload) ;

Takže teraz stojí za to hovoriť o tých súboroch, z ktorých načítame informácie. Skript predpokladá, že to budú súbory s názvami 2.html…5.html atď. ktorý obsahuje naše informácie. Napríklad môj súbor 2.html sa načíta ako prvý a má nasledujúci obsah:

V štruktúre mojej lokality sú stránky, z ktorých sa po kliknutí získajú informácie na následné načítanie, v priečinku Stránky. Existujú tri súbory, z ktorých dva sú plné a posledný je prázdny. Predpokladá logiku scenára.

Cesta v skripte je zadaná takto:

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

Ak plánujete použiť inú cestu, nezabudnite ju nahradiť v skripte. Okrem toho, ak ste použili iné ID, budú musieť byť v skripte predefinované. Práve tu:

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

A ako som už povedal, pred koncovú značku tela uvádzame samotný skript:

Takto môžete implementovať „lenivé načítavanie“ na vstupnej stránke. Pošlite viac tém, o ktorých by ste si chceli prečítať článok na blogu. Pokiaľ to bude možné, pokúsim sa zverejniť nie plánovaný materiál, ale ten, na ktorý sa pýtate v sekcii „Vaše návrhy“. A to je na dnes všetko. Zbohom!

AJAX a jQuery. Dynamická aktualizácia obsahu. Základy (zmeny od 01.03.2012)

Tento článok bude diskutovať o tom, čo sú AJAX a jQuery, a pozrieme sa na príklady ich použitia.

AJAX je nástroj na vytváranie webových aplikácií, ktoré komunikujú so serverom na pozadí. V tomto prípade používateľ dostane aplikáciu s aktualizáciou dynamického obsahu, bez opätovného načítania celej stránky.

jQuery – JavaScript-framework, knižnica, ktorá vám umožňuje pohodlnejšie používať niektoré funkcie Javascriptu, ako je vytváranie vizuálnych efektov, spracovanie udalostí, práca s podporou DOM a AJAX.

Stiahnuť ▼ Najnovšia verzia jQuery a naučte sa podrobne všetky funkcie na webovej stránke vývojára: http://www.jquery.com/

V tomto článku sa budeme venovať iba jednej funkcii v knižnici jQuery, a to funkcii $.ajax(). Táto funkcia nám umožňuje odosielať údaje na server a prijímať odpovede zo servera, a to všetko na pozadí bez opätovného načítania stránky. Nastavenie príjmu alebo prenosu dát závisí od parametrov, s ktorými sa volá funkcia $.ajax(). O tých hlavných sa bude diskutovať nižšie. Viac o parametroch si môžete prečítať v manuáli jQuery.

Prejdime na príklady.

Dôležité!
Aby príklady fungovali správne, musíte:
1. Všetky súbory musia byť napísané v kódovaní UTF-8.
2. Skripty musia byť spustené na webovom serveri, nie v prehliadači ako súbor.

Príklad 1: Aktualizácia dynamického obsahu na časovači

Vytvorme si jednoduchý program, ktorý zobrazuje aktuálny čas, aktualizovaný raz za sekundu pomocou časovača. Funkciou tohto programu bude získavanie informácií o aktuálnom čase z iného externého súboru.

Obsah súboru index.html.

V kóde je niekoľko funkcií, poďme si ich vysvetliť.

1. Knižnica jQuery je zahrnutá v hlavičke HTML súboru, tento riadok je na to napísaný.

Samotný súbor jquery.js sa nachádza v rovnakom priečinku ako vzorové súbory.

2. V tele dokumentu sa vytvorí kontajner, do ktorého načítame obsah.

3. Na prvý pohľad zvláštne, pre správne fungovanie jQuery je potrebná funkcia $(document).ready() a okrem toho v ňom môžeme urobiť všetky prípravy na to, aby program fungoval. V našom prípade zavoláme funkciu show(), ktorá má mechanizmus na získanie obsahu z iného súboru, a nastavíme časovač tak, aby sa funkcia show() volala raz za sekundu.

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

4. Funkcia show() pozostáva z volania funkcie $.ajax() s určitým počtom parametrov, čo nám umožňuje získať informácie z externého súboru na serveri na pozadí.

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

Zvážte parametre použitej funkcie $.ajax().

Url: "time.php" Odkazuje na súbor time.php na získanie obsahu. cache: false Výsledky dotazu nie sú uložené vo vyrovnávacej pamäti. success: function(html)( $("#content").html(html); ) Ak je požiadavka úspešná, riadenie prejde na funkciu, ktorá prijme obsah ako parameter a zapíše svoj kontajner. Zápis do kontajnera prebieha v tomto riadku:
$("#obsah").html(html);

Obsah súboru time.php.

Účelom súboru time.php je zobrazenie aktuálneho času na obrazovke.

Stiahnite si vzorové zdrojové súbory (16,6 kb):

Príklad 2: Dynamická aktualizácia obsahu na základe voľby používateľa

Program, ktorý dynamicky načítava obsah podľa výberu používateľa.

Obsah súboru index.html.

Akú stránku by ste chceli otvoriť?

V tele dokumentu sa vytvorí formulár, ktorý má dve tlačidlá, cez ktoré si používateľ vyberá požadovaný obsah. A kontajner na nakladanie obsahu.

Udalosť kliknutia na tlačidlo na stránke 1 je spracovaná funkciou $("#btn1").click() a udalosť kliknutia na tlačidlo na stránke 2 je spracovaná funkciou $("#btn2").click().

Obsahom súborov page1.html a page2.html, ktoré sa dynamicky načítavajú do oblasti obsahu, sú jednoduché stránky HTML alebo textové súbory s obsahom.

Stiahnite si vzorové zdrojové súbory (18,4 kb):

Príklad 3: Odosielanie údajov na server na pozadí a získavanie obsahu

Zvážte príklad, ktorý odošle zadané používateľské meno na server. Server pri prijatí mena vydá pozdrav a spočíta počet znakov v zadanom mene.

Obsah súboru index.html.

V tele dokumentu bol vytvorený formulár na zadanie používateľského mena. A kontajner na načítanie dynamického obsahu.

Všimnite si, že samotný formulár nemá obvyklé polia akcií a metód. Funkcia $("#myForm").submit() funguje ako obsluha udalosti pri kliknutí na tlačidlo "Odoslať". Zoberme si túto funkciu.

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

Ako vidíme, hlavná práca opäť súvisí s funkciou $.ajax(). Tentokrát sa objavia ďalšie parametre, ktoré neboli zohľadnené v príkladoch 1 a 2. Konkrétne:

Typ: "POST" Typ prenosu dát. data: "username="+$("#username").val() Parametre odovzdané serveru. V tomto prípade odovzdávame obsah poľa používateľského mena - používateľské meno. Vo všeobecnosti sa parametre zapisujú rovnakým spôsobom ako v metóde GET, v jednom riadku, napríklad:
údaje: "username=Vasya&age=18&sex=male"

Všimnite si, že na konci je napísaný riadok:

vrátiť nepravdu; Deje sa tak preto, aby sa formulár nepokúšal preniesť dáta do súboru, z ktorého sa spúšťa a stránka sa nenačítava znova.

Obsah súboru greetings.php.

".$_REQUEST["používateľské meno"]."!
"; echo "Vaše meno obsahuje písmená: ".strlen($_REQUEST["používateľské meno"])."."; ?>

Na obrazovke zobrazíme pozdrav a spočítame počet znakov v mene.

Stiahnite si vzorové zdrojové súbory (16,8 kb):

Na záver stojí za to povedať, že okrem zrejmých výhod vytvárania stránok pomocou dynamicky aktualizovaného obsahu existuje množstvo nevýhod, ktoré by sa mali pri vývoji stránky zvážiť, a to:

1. Na stránkach s dynamickými aktualizáciami obsahu tlačidlo "Späť" v prehliadači nefunguje správne.

2. Stránky s dynamickými aktualizáciami obsahu nemenia URL na základe ich obsahu, takže ich nemožno pridať medzi záložky.

3. Stránky s dynamickými aktualizáciami obsahu nie sú indexované vyhľadávačmi, pretože nevykonávajú príkazy JavaScript.

Tieto nedostatky je možné programovo odstrániť. Tento článok nepokrýva takéto metódy.