Spis treści
Korzystanie jQuery and Ajax
O jQuery
jQuery jest solidną biblioteką JavaScript. Wśród wielu zalet:
- Działa zgodnie z oczekiwaniami wielu przeglądarek internetowych.
- Jasna, zwięzła i intuicyjna architektura
- Wiele dostępnych wtyczek.
Możesz się dowiedzieć więcej o jQuery na oficjalnej stronie: http://jquery.com/
jQuery $
jQuery posiada funkcje
, nazw, który zawierają wszystkie inne funkcje.$()
Funkcja $()
może być użyta na wiele sposobów:
- Przy zastosowaniu funkcji jako parametr,
$()
będzie wykonywał funkcje gdy strony w DOM są w pełni załadowane.
Na przykład:$(function(){ /* do something */ });
- Po przejściu ciągu zawierającego selektor CSS
$()
zwróci wszystkie węzły HTML, które odpowiadają selektorowi.
Na przykład:$('ul#nav');
- Ten zestaw węzłów może być przypisany do każdej z metod jQuery. Na przykład. Jeśli chcesz ukryć elementy nawigacji zwracane przez powyższy selektor.
Na przykład:$('ul#nav').slideUp('fast');
Przy użyciu czystego kodu HTML jako jego parametru
$()
stworzy węzeł (element DOM). Ten węzeł może znowu być stosowany z dowolną metodą jQuery
Na przykład:$("<li>Sign Off</li>").appendTo("ul#nav");
$()
jest jedynie skrótem specyficznej biblioteki funkcji jQuery()
. Istnieje w celu przyspieszenia kodowania. Wiele innych bibliotek JavaScript używa $()
ich skrótów.
W związku z tym te dwie linie są równoważne:
$('ul#nav').slideUp('fast'); jQuery('ul#nav').slideUp('fast');
Jeśli mieszasz biblioteki JavaScript w swoim temacie, może będzie lepiej powiedzieć jQuery żeby uwolnić $()
. Prosty zwrot $.noConflict()
, i od tej pory każde wywołanie jQuery()
będzie wymagać korzystania z $()
.
Możesz dowiedzieć się więcej na temat jQuery()
i $()
na oficjalnej stronie: http://api.jquery.com/jQuery/
Funkcje w jQuery
jQuery's namespace $
zawiera wszystkie funkcje, które nie są dołączane do konkretnego węzła.
Wśród nich znajduje się kilka funkcji Ajax I funkcji użytkowych. Na przykład:
$.post('/handler.php', {'action': 'purchase', 'product': 434}, function(data){/* do something */} );
Można dołaczyć zdarzenia do zbioru skróconych węzłów zwróconych przez $()
. Jedną z zalet korzystania z jQuery, po raz kolejny jest to, że podczas obsługi zdarzenia, pomaga on poprzez harmonizacje, tak, że nie trzeba uzględniać specyfiki każdej przeglądarki.
Aby przypisać funkcje click event, jest prosty dodatek .click(function)
.
W celu wygenerowania click event, można również użyć .click()
z każdym parametrem. Na przykład: $('#button').click(function(){/* do something */});
Możesz się dowiedzieć więcej na temat jQuery's Ajax i funkcji użytkowych na oficjalnej stronie:
- http://api.jquery.com/category/ajax/ (na przykład, http://api.jquery.com/jQuery.post/)
- http://api.jquery.com/category/utilities/
Selektory
jQuery oferuje dwa spososby, aby wybrać elementy strony:
- Połącz selektory CSS i XPath w ciągu znaków, które są używane z funkcją
$()
. Na przykład:$("div > ul a")
- Użyj jednej z kilku metod, które są już dostępne w
jQuery
namespace.
Oba te spososby mogą być łączone
var my_jQuery_object = $("#my_image"); var my_jQuery_object = $("#menu a"); var my_jQuery_object = $("#id > .classe, #id td:last-child"); /* returns the 'td' elements within the odd 'tr'. */ var my_jQuery_object = $('tr:odd td'); /* returns the fourth paragraph. */ var my_jQuery_object = $("p:eq(4)"); /* returns the 7 first paragraphs. */ var my_jQuery_object = $("p:lt(8)");
Możesz dowiedzieć się więcej na temat selektorów jQuery's na oficjalnej stronie: http://api.jquery.com/category/selectors/
Metody i wywołania zwrotne
Cały zestaw metod dostępny w standardowym API to: manipulacja DOM, manipulacja CSS, event managment, efekty wizualne, etc.
Na przykład jeśli chcesz, aby znikneły powoli wszystkie akapity na stronie, użyj tego:
$("p").fadeOut();
Niektóre metody (takie jak fadeOut()
) przyjmują inną metodę jako parametr. Taki sposób wykonany raz jest już zrobiony. To nazywamy wywołaniem zwrotnym
Na przykład:
$(".test").fadeOut("slow",function(){ $(this).fadeIn("slow"); });
Wszystkie metody powrotu przedmiotu jQuery
. To sprawia, że metody łańcucha są bez ograniczeń. Można nawet napisać swój kod, tak, że jest on czytany jak blok funkcyjny.
Na przykład, ten kod działa doskonale i łatwy do odczytu i aktualizacji:
$(".emptyContent").append("This is a test") .css("border", "1px solid red") .addClass("fullContent") .removeClass("emptyContent");
Dostępne wtyczki w PrestaShop
To jest lista wtyczek jQuery które są dostępne w domyślnej instalacji PrestaShop:
Nazwa wtyczki | Opis wtyczki |
---|---|
jquery.colorpicker | Selektor stylu kolorów PrestaShop. |
jquery.cookie-plugin | Odczytuje, zapisuje i usuwa pliki cookie. |
jquery.dimensions | Zarządza elementami wymiarów. |
jquery.easing | Zarządza prędkością elementów. |
jquery.excanvas | Zmienia obszar elementu roboczego (zaokrąglone narożniki/gradienty/krycia/rysowanie lini, łuku itp.). |
jquery.fieldselection | Wykorzystuje i zastępuje tekst w wybranej strefie. |
jquery.flip | Odwraca element. |
jquery.flot | Tworzy wykres prezentacji danych, takich jak krzywe, bary, itp. |
jquery.highlight | Dodaje składnie koloryzacji. |
jquery.hoverIntent | Dodaje efekt przewidywania na JavaScript hover event. |
jquery.idTabs | Zarządza kartami. |
jquery.ifxtransfer | Animuje elementem podczas przenoszenia z jednego pojemnika do drugiego. |
jquery.jqminmax | Dodaje min-width, max-width, min-height i max-height na wszystkich przeglądarkach. |
jquery.pngFix | Zarządza przejrzystością w IE 5.5 i IE 6. |
jquery.scrollTo | Dodaje strony lub przewijanie elementu do określonej pozycji. |
jquery.serialScroll | Wprowadza szereg.elementów przewijania do określonej pozycji. |
jquery.tablednd | Przeciąga i upuszcza wiersze tabeli. |
jquery.typewatch | Wykonuje funkcje kiedy użytkownik wpisał jakiś tekst w strefie i przestał pisać po pewnym czasie. |
jquery.validate-creditcard | Weryfikuje numer karty kredytowej w zależności od jego typu. |
Kilka innych narzędzi
jQuery's API jest bardzo kompletne, i spędzisz godziny na poszukiwaniu nowych możliwości.
Oto kilka funkcji, które mogą być niezwykle użyteczne podczas tworzenia tematu.
Po pierwsze, each()
, co umożliwia petli przejście przez liste elementów:
$("img").each(function(){ console.log($(this).attr("src")); });
Po drugie, browser
, jest obiektem, który pozwala dowiedzieć się, która przeglądarka pracuje z:
if($.browser.msie) { if($.browser.version == 6) { // Your IE6 specific code. } else { // Code for any other IE browser. } }
Wykonywanie połączeń Ajax z jQuery
O Ajax
Termin "Ajax" jest naprawdę skrótem od Asynchronous JavaScript i XML. Opisuje użycie JavaScript do załadowania nowej zawartości do bieżącej strony bez konieczności przeładowania całęj. Proces ten nazywany jest ansynchronicznym, ponieważ gdy żadanie Ajax zostało wysłane do serwera webowego, przeglądarka nie musi czekać na odpowiedź w celu wykonania innych zadań. Przesyłana treść nie musi być sformatowana w XML, można użyć JSON, HTML, lub zwykły tekst.
W efekcie użycie Ajax sprawia, że mozliwe jest zbudowanie bardzo dynamicznych stron internetowych
Możesz się dowiedzieć więcej na temat techniki Ajax na nastepującej stronie:
- Wikipedia: https://pl.wikipedia.org/wiki/AJAX
- Mozilla Developer Network: https://developer.mozilla.org/en/docs/AJAX
About JSON
JavaScript Object Notation jest najczęściej stosowanym formatem podczas przesyłania danych przy użyciu techniki Ajax, z dwóch głównych powodów, uważa sie, że jest lżejszy niż XML, a to może być bardzo ątwe wykorzystane przez JavaScript gdyż przypomina podzbiór tego języka. Możesz dowiedzieć się więcej o JSON na następujących stronach.
Jak użyć Ajax w PrestaShop
Domyśłne kontrolery PrestaShop uzywają standardowej pełnej strony- procesu przeładowania.
Jeśli PrestaShop wykryje parametr "ajax" w GET albo POST zapytania, kontroler ajax
obiektu jest przełączony na true: $this->ajax = true;
.
Na przykład, Jeśli kod wyzwala URL, takie jak : http://...&ajax&action=updatelist
...regulator następnie wykona displayAjaxUpdateList()
jeśli metoda istnieje. Jeśli nie istnieje, to wykona displayAjax()
metodą (domyślną).
Dlatego on musi zawierać kod który weźmie pod uwagę wezwanie Ajax. Oto jak można napisać prostą kwerendę za pomocą Ajax jQuery:
var query = $.ajax({ type: 'POST', url: baseDir + 'modules/mymodule/ajax.php', data: 'method=myMethod&id_data=' + $('#id_data').val(), dataType: 'json', success: function(json) { // .... } });
Oto jak skrypt ajax.php
będzie działać:
// Located in /modules/mymodule/ajax.php require_once(dirname(__FILE__).'../../../config/config.inc.php'); require_once(dirname(__FILE__).'../../../init.php'); switch (Tools::getValue('method')) { case 'myMethod' : die( Tools::jsonEncode( array('result'=>'my_value')); break; default: exit; } exit;
Jak widzisz w przykładzie powyższy kod, PrestaShop Tools
zawiera obiekt jsonEncode()
, to metoda, która sprawia, że łatwo przekształcić tablicę PHP do obiektu JSON:
public function displayAjax() { $return = array( 'hasError' => true, 'errors' => 'Ceci est le message' ); die(Tools::jsonEncode($return)); }
Metody jQuery's Ajax
jQuery.ajax(url [, ustawienia ] )
Parametry:
- url: URL do której należy wysłać zapytanie
- ustwienia: opcje i funkcje
Niektóre opcje:
async
(boolean): domyslną jest true
type
: domyślnym jest 'GET'cache
(logiczna): domyślną jest truedata
: GET tablica wysyłana do serweradataType
: zarównoxml
,json
,script
albohtml
Niektóre funkcje:
beforeSend
: wyzwalane przed wywołaniem Ajaxerror
: w przypadku błędusuccess
: w przypadku powodzeniatimeout
: w przypadku przekroczenia czasucomplete
: wyzwalane po sukcesie zawołania, bez względu na wynik.
Możesz się dowiedzieć więcej o ajax()
tutaj: http://api.jquery.com/jQuery.ajax/
Alternatywny: jQuery.load(url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
Metoda ta stosowana jest do bezpośredniego załadowania wyniku HTML do wywołania Ajax, w obrębie elemenetu na bieżącej stronie.
Na przykład :
$('#result').load('ajax/test.html', function() { alert('Load was performed.'); });
Alternatywny: jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
Metoda ta pozwala na połączenie się z zapytaniem Ajax ze skryptem HTTP GET. Jest to równoznaczne z następującym połączeniem Ajax:
$.ajax({ url: url, data: data, success: success, dataType: dataType });
Wartości zwracane na wywołanie Ajax jQuery
Wszystkie te metody jQuery zwracają obiekt jqHXR,
który jest przedłużeniem obiektu XMLHTTPRequest.
Obiekt ten umożliwia wywołanie różnych funkcji w zależności od wyniku połączenia:
Powodzenie:
jqXHR.done(function(data, textStatus, jqXHR) {});
Błąd:
jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});
Powodzenie albo Błąd:
jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown){ });
Powodzenie i Błąd:
jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});
Oto przykład z połaczenia funkcji w zależności od wyniku kwerendy:
// Assign handlers immediately after making the request, // and remember the jqxhr object for this request var jqxhr = $.get("example.php", function() { alert("success"); }) .done(function() { alert("second success"); }) .fail(function() { alert("error"); }) .always(function() { alert("finished"); }); // perform other work here ... // Set another completion function for the request above jqxhr.always(function(){ alert("second finished"); });