Jak widać, wszystko jest proste. Ale na co zwrócić uwagę? I trzeba zwrócić uwagę na div z id="smartPortfolio", id="moreButton" i id="loadingDiv", ponieważ są one używane w skrypcie, co pomaga nam załadować zawartość z innych stron. SmartPortfolio to „kontener” na nasze portfolio. MoreButton - będzie to nasz przycisk, po kliknięciu ładowana jest kolejna część portfela. LoadingDiv - obszar, w którym będzie wyświetlany tekst, gdy portfel zostanie w pełni otwarty lub wystąpi jakiś błąd.

Na przykład część czytelników nadal będzie próbowała przetestować ten skrypt nie na serwerze, ale po prostu otworzy plik indeksu w przeglądarce. W takim przypadku zobaczą komunikat o błędzie. Ponadto co bardzo wolne połączenie, pobranie plików może zająć trochę czasu i aby użytkownik zrozumiał, że proces jest w toku, możesz tam wpisać wiadomość, że dane są ładowane lub umieszczane (obrazek, wskaźnik postępu lub coś innego).

Sam nie napisałem skryptu, ale znalazłem go na jednej ze stron, autor jest wymieniony w kodzie źródłowym, zainteresowanych zapraszam do obejrzenia. Ponieważ nie jest zbyt duży, dam to wszystko, ale jeśli planujesz używać tych samych nazw identyfikatorów i ścieżek plików, co moje, to nie możesz nawet do niego zajrzeć, ale po prostu dołączyć go przed zamykającym tagiem body (w stopka) .

Dla tych, którzy planują wprowadzić zmiany, oto sam skrypt:

var lazyload = lazyload || (); (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = „./pages/” + strona + „.html”; $(Identyfikator przycisku).hide(); $(Identyfikator ładowania).show(); $.ajax((url: url, sukces: function(odpowiedź) ( if ( !response || response.trim() == "BRAK") ( $(buttonId).fadeOut(); $(loadingId).text("Portfolio jest w pełni załadowane"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("Przepraszamy, coś poszło nie tak z żądaniem. Proszę odświeżyć stronę."); ) )); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; ); ))(jQuery, lazyload) ;

Warto więc teraz porozmawiać o tych plikach, z których będziemy ładować informacje. Skrypt zakłada, że ​​będą to pliki o nazwach 2.html…5.html itd. który zawiera nasze informacje. Na przykład mój plik 2.html jest ładowany jako pierwszy i ma następującą zawartość:

W mojej strukturze witryny strony, z których zostaną pobrane informacje do późniejszego wczytania po kliknięciu, znajdują się w folderze stron. Istnieją trzy pliki, z których dwa są pełne, a ostatni jest pusty. Zakłada logikę skryptu.

Ścieżka w skrypcie jest określona w następujący sposób:

Var url = "./pages/" + strona + ".html";

Jeśli planujesz użyć innej ścieżki, pamiętaj o zastąpieniu jej w skrypcie. Ponadto, jeśli użyłeś innych identyfikatorów, będą one musiały zostać ponownie zdefiniowane w skrypcie. Tutaj:

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

I, jak powiedziałem, przed zamykającym tagiem body dołączamy sam skrypt:

Jak to na wstęp Możesz wdrożyć leniwe ładowanie. Wyślij więcej tematów, na które chciałbyś przeczytać artykuł na blogu. W miarę możliwości postaram się opublikować nie planowany materiał, ale ten, o który pytasz w dziale „Twoje sugestie”. A na dzisiaj to wszystko. Do widzenia!

AJAX i jQuery. Dynamiczna aktualizacja treści. Podstawy (zmiany od 01.03.2012)

W tym artykule omówimy, czym są AJAX i jQuery oraz przyjrzymy się przykładom ich użycia.

AJAX to narzędzie do budowania aplikacji webowych komunikujących się z serwerem w tle. W takim przypadku użytkownik otrzymuje aplikację z dynamiczną aktualizacją treści, bez przeładowywania całej strony.

jQuery - JavaScript-framework, biblioteka pozwalająca wygodniej korzystać z niektórych funkcji JavaScript, takich jak: tworzenie efekty wizualne, obsługa zdarzeń, manipulacja DOM i obsługa AJAX.

Ściągnij Ostatnia wersja jQuery i poznaj szczegółowo wszystkie funkcje na stronie programisty: http://www.jquery.com/

W tym artykule przyjrzymy się tylko jednej funkcji w bibliotece jQuery, a mianowicie funkcji $.ajax(). Ta funkcja umożliwia nam zarówno wysyłanie danych do serwera, jak i odbieranie odpowiedzi z serwera, wszystko w tle, bez przeładowywania strony. Ustawienie odbierania lub przesyłania danych zależy od parametrów, z którymi wywoływana jest funkcja $.ajax(). Najważniejsze z nich zostaną omówione poniżej. Więcej o parametrach przeczytasz w podręczniku jQuery.

Przejdźmy do przykładów.

Ważny!
Aby przykłady działały poprawnie, musisz:
1. Wszystkie pliki muszą być zapisane w kodowaniu UTF-8.
2. Skrypty muszą być uruchamiane na serwerze WWW, a nie uruchamiane w przeglądarce jako plik.

Przykład 1: dynamiczna aktualizacja zawartości na zegarze

Stwórzmy prosty program, który wyświetla Obecny czas, aktualizowany raz na sekundę przez timer. Cechą tego programu będzie pobieranie informacji o aktualnym czasie z innego zewnętrznego pliku.

Zawartość pliku index.html.

W kodzie jest kilka funkcji, wyjaśnijmy je.

1. Biblioteka jQuery jest zawarta w nagłówku plik HTML, ten wiersz jest napisany w tym celu.

Sam plik jquery.js znajduje się w tym samym folderze co pliki przykładowe.

2. W treści dokumentu tworzony jest kontener, do którego wczytamy zawartość.

3. Dziwne na pierwszy rzut oka, funkcja $(document).ready() jest wymagana do poprawnego jQuery działa poza tym możemy w nim wykonać wszystkie przygotowania do działania programu. W naszym przypadku wywołujemy funkcję show(), która ma mechanizm pobierania zawartości z innego pliku, i ustawiamy zegar tak, aby funkcja show() była wywoływana raz na sekundę.

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

4. Funkcja show() polega na wywołaniu funkcji $.ajax() z określoną liczbą parametrów, co pozwala nam uzyskać informacje z zewnętrznego pliku na serwerze w tle.

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

Rozważmy parametry użytej funkcji $.ajax().

Url: "time.php" Odwołuje się do pliku time.php w celu pobrania zawartości. cache: false Wyniki zapytania nie są buforowane. success: function(html)( $("#content").html(html); ) Jeśli żądanie się powiedzie, kontrola przechodzi do funkcji, która odbiera zawartość jako parametr i zapisuje swój kontener. Zapis do kontenera odbywa się w tej linii:
$("#treść").html(html);

Zawartość pliku time.php.

Celem pliku time.php jest wyświetlanie aktualnego czasu na ekranie.

Ściągnij pliki źródłowe przykład (16,6 kb):

Przykład 2: Dynamiczna aktualizacja treści na podstawie wyboru użytkownika

Program dynamicznie ładujący treści wybrane przez użytkownika.

Zawartość pliku index.html.

Którą stronę chciałbyś otworzyć?

W treści dokumentu tworzony jest formularz, który posiada dwa przyciski, za pomocą których użytkownik wybiera żądaną treść. I pojemnik do ładowania zawartości.

Zdarzenie kliknięcia przycisku strony 1 jest obsługiwane przez funkcję $("#btn1").click(), a zdarzenie kliknięcia przycisku strony 2 jest obsługiwane przez funkcję $("#btn2").click().

Zawartość plików page1.html i page2.html, które są dynamicznie ładowane do obszaru zawartości, to proste strony html lub pliki tekstowe z treścią.

Pobierz przykładowe pliki źródłowe (18,4 kb):

Przykład 3: Wysyłanie danych na serwer w tle i pobieranie zawartości

Rozważmy przykład, który wysyła wprowadzoną nazwę użytkownika na serwer. Serwer po otrzymaniu nazwy wysyła powitanie i zlicza liczbę znaków we wprowadzonej nazwie.

Zawartość pliku index.html.

Wpisz swoje imię:

W treści dokumentu został utworzony formularz do wpisania nazwy użytkownika. I kontener do ładowania zawartości dynamicznej.

Zwróć uwagę, że sam formularz nie zawiera zwykłych pól akcji i metod. Funkcja $("#myForm").submit() działa jako moduł obsługi zdarzeń po kliknięciu przycisku "Prześlij". Rozważmy tę funkcję.

$("#myForm").submit(function()( $.ajax(( type: "POST", url: "greetings.php", data: "username="+$("#username").val( ), sukces: function(html)( $("#content").html(html); ) )); return false; ));

Jak widać, główna praca jest ponownie związana z funkcją $.ajax(). Tym razem się pojawiają Dodatkowe opcje, nieuwzględnione w przykładach 1 i 2. Mianowicie:

Typ: „POST” Rodzaj transferu danych. data: "username="+$("#username").val() Parametry przekazywane do serwera. W takim przypadku przekazujemy zawartość pola username - nazwę użytkownika. Ogólnie parametry są zapisywane w taki sam sposób jak w Pobierz metodę, w jednym wierszu, na przykład:
dane: "nazwa użytkownika=Wasia&wiek=18&płeć=mężczyzna"

Zauważ, że na końcu jest napisana linia:

zwróć fałsz; Dzieje się tak, aby formularz nie próbował przenieść danych do pliku, z którego został uruchomiony, a strona nie przeładowała się.

Zawartość pliku pozdrowienia.php.

".$_REQUEST["nazwa użytkownika"]."!
"; echo "Twoje imię ma litery: ".strlen($_REQUEST["nazwa użytkownika"])."."; ?>

Wyświetlamy na ekranie powitanie i liczymy ilość znaków w nazwie.

Pobierz przykładowe pliki źródłowe (16,8 kb):

Na zakończenie należy stwierdzić, że oprócz oczywistych zalet tworzenia stron z wykorzystaniem dynamicznie aktualizowanych treści, istnieje szereg wad, które należy wziąć pod uwagę przy tworzeniu strony, a mianowicie:

1. Na stronach z dynamiczną aktualizacją treści przycisk „Wstecz” w przeglądarce nie działa poprawnie.

2. Strony z dynamiczną aktualizacją zawartości nie zmieniają adresu URL na podstawie ich zawartości, więc nie można ich dodawać do zakładek.

3. Strony z dynamiczną aktualizacją treści nie są indeksowane Wyszukiwarki, dlatego nie wykonują poleceń JavaScript.

Te niedociągnięcia można wyeliminować programowo. Ten artykuł nie obejmuje takich metod.

Minęło trochę czasu, odkąd opublikowałem kod. Dzisiaj poprawię sytuację i podam kilka przydatnych fragmentów kodu jQuery, których na pewno będziesz potrzebować na swoich stronach.

Nie będę wchodzić w teorię, cała dokumentacja jQuery znajduje się na oficjalnej stronie biblioteki. Przypomnę tylko czym jest jQuery.

jQuery to Biblioteka JavaScript skupiając się na Interakcja JavaScript i HTML. Biblioteka jQuery ułatwia dostęp do dowolnego elementu DOM, dostęp do atrybutów i zawartości elementów DOM oraz manipulowanie nimi. Biblioteka jQuery zapewnia również wygodny interfejs API do pracy z AJAX.

Więc chodźmy!

1. Płynne przewijanie do góry strony

Żadna strona nie jest kompletna bez niej. Zaledwie 4 linijki kodu pozwolą odwiedzającym na płynne przewijanie całej strony jednym kliknięciem.

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

2. Zduplikowane nagłówki tabeli

Aby poprawić postrzeganie i czytelność swoich tabel, możesz powielić ich tytuły pod tabelą. Wydawałoby się to drobiazg, ale jest bardzo wygodne w skomplikowanych i dużych stołach, które nie mieszczą się na jednym ekranie.

$tfoot = $(" "); $($("głowa").clone(true, true).children().get().reverse()).each(function()( $tfoot.append($(this)); ) $tfoot.insertAfter("nagłówek tabeli");

3. Ładowanie danych zewnętrznych

Z jQuery Wgrywanie zewnętrznych treści na strony internetowe jest bardzo łatwe. Może być wyświetlany bezpośrednio w bloku DIV, jak w poniższym przykładzie.

$("#content").load("somefile.html", function(response, status, xhr) ( // obsługa błędów if(status == "error") ( $("#content").html(" Wystąpił błąd: " + xhr.status + " " + xhr.statusText); ) ));

4. Równa wysokość kolumny

Wiadomo, że aby wyrównać bloki na wysokość standardowe środki HTML i CSS nie są takie proste. Wystarczy kilka linijek kodu poniżej, aby wysokość wszystkich bloków była równa wysokości większego bloku.

varmaxwysokość = 0; $("div.col").each(function()( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").height(maxwysokość);

5. Zebra tabelaryczna

Jak wiesz, percepcja i czytelność tabeli będzie zauważalnie wyższa, jeśli wykonasz naprzemienne wielokolorowe wiersze. Jest to bardzo łatwe do zaimplementowania w jQuery.

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

6. Częściowe odświeżenie strony

Dzięki jQuery bardzo łatwo jest zaimplementować blokowe (częściowe) odświeżanie strony. Na przykład poniższy kod pozwoli ci automatycznie aktualizować blok #refresh co 10 sekund.

SetInterval(function() ( $("#odśwież").load(lokalizacja.href+" #odśwież>*",""); ), 10000); // milisekundy oczekiwania

7. Wstępne ładowanie obrazu

Ten kod umożliwia ładowanie obrazów w tle bez ładowania podczas przeglądania strony. Po prostu wypisz w wierszu 7 obrazy, które chcesz wstępnie załadować.

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

8. Otwieranie zewnętrznych linków w nowych oknach/kartach

Ten fragment kodu wymusza otwieranie wszystkich linków zewnętrznych na stronie w nowym oknie przeglądarki. Skrypt banalnie określa aktualną domenę witryny i działa, jeśli nie pasuje do adresu w linku.

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

9. Blokuj w całym oknie przeglądarki

Ten skrypt pomoże Ci rozciągnąć blok, aby wypełnić ekran przeglądarki. Świetne do modalnych okien i okien dialogowych.

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

10. Sprawdzenie złożoności hasła

Jeśli pozwolisz odwiedzającym Twoją witrynę na ustawianie własnych haseł, dobrym pomysłem będzie kontrolowanie jej złożoności i poinformowanie o tym odwiedzającego.

Najpierw napiszmy część kodu HTML:

Za pomocą poniższego kodu sprawdzimy wprowadzone hasło i wyświetlimy odwiedzającemu informację: jego hasło jest złożone, średnie lub słabe, a także sprawdzimy, czy nie jest za krótkie.

$("#pass").keyup(function(e) ( var strongRegex = new RegExp("^(?=.(8,))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var wystarczającyRegex = new RegExp("( ?=.(6,)).*", "g"); if (false == wystarczającyRegex.test($(this).val())) ( $("#passstrength").html("Więcej znaków "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Strong!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "alert"; $("#passstrength").html("Medium!") ; ) else ( $("#passstrength").className = "error"; $("#passstrength").html("Słabe!"); ) return true; ));

11. Zmiana rozmiaru obrazu za pomocą jQuery

Oczywiście bardziej logiczne jest zmienianie rozmiaru obrazów po stronie serwera za pomocą PHP i GD, ale zdarzają się sytuacje, kiedy trzeba to zrobić po stronie klienta. A jQuery znów nam w tym pomoż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(szerokość > maxWidth)( ratio = maxWidth / width; $(this).css("szerokość", maxWidth); $(this) .css("wysokość", wysokość * stosunek); wysokość = wysokość * stosunek; ) var width = $(this).width(); var height = $(this).height(); if(height > maxHeight)( ratio = maxHeight / wysokość; $(this).css("wysokość", maxHeight); $(this).css("szerokość", szerokość * stosunek); szerokość = szerokość * stosunek; ) )); //$( "#contentpage img").show(); // IMAGE RESIZE ));

12. Ładowanie treści podczas przewijania strony

Ta technika jest często określana jako nieskończone przewijanie. Treść jest ładowana, gdy użytkownik przewija stronę. Jest to dość łatwe do zaimplementowania za pomocą poniższego kodu.

var ładowanie = fałsz; $(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("wyświetlanie", "brak"); ładowanie = fałsz; )); ) ) )); $(document).ready(funkcja() ( $("#loaded_max").val(50); ));

13. Zweryfikuj przesłanie obrazu

Często zdarza się, że trzeba sprawdzić, czy obraz jest aktualnie załadowany, czy nie. A jQuery znów nam w tym pomoże.

Var imgsrc = "img/image1.png"; $(" ").load(funkcja () ( alert("obraz załadowany"); )).error(funkcja () ( alert("błąd ładowania obrazu"); )).attr("src", imgsrc);

14. Sortuj alfabetycznie

Jeśli potrzebujesz dynamicznie posortować listę alfabetycznie, ten mały fragment na pewno Ci pomoże.

$(function() ( $.fn.sortList = function() ( var mojalista = $(this); var listitems = $("li", mojalista).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(); });

Zapisz - przydatne.

Wszystkie najnowsze i najciekawsze ze świata WordPressa w moim kanale Telegram. Subskrybuj!