Spis treści
jQuery jest solidną biblioteką JavaScript. Wśród wielu zalet:
Możesz się dowiedzieć więcej o jQuery na oficjalnej stronie: http://jquery.com/
jQuery posiada funkcje
, nazw, który zawierają wszystkie inne funkcje.$()
Funkcja $()
może być użyta na wiele sposobów:
$()
będzie wykonywał funkcje gdy strony w DOM są w pełni załadowane. $(function(){ /* do something */ });
$()
zwróci wszystkie węzły HTML, które odpowiadają selektorowi. $('ul#nav');
$('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");
W związku z tym te dwie linie są równoważne:
Jeśli mieszasz biblioteki JavaScript w swoim temacie, może będzie lepiej powiedzieć jQuery żeby uwolnić |
Możesz dowiedzieć się więcej na temat jQuery()
i $()
na oficjalnej stronie: http://api.jquery.com/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:
jQuery oferuje dwa spososby, aby wybrać elementy strony:
$()
. Na przykład: $("div > ul a")
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/
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"); |
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. |
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. } } |
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:
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. |
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)); } |
Parametry:
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ówno xml
, json
, script
albo html
Niektóre funkcje:
beforeSend
: wyzwalane przed wywołaniem Ajaxerror
: w przypadku błędusuccess
: w przypadku powodzeniatimeout
: w przypadku przekroczenia czasu complete
: 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/
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.'); }); |
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 }); |
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"); }); |