Rozdział 8. Wtyczki do jQuery

17 października 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Czym tak naprawdę jest wtyczka?

Wtyczka jQuery to po prostu nowa metoda, za pomocą której rozszerzamy prototyp obiektu jQuery. Dzięki temu rozszerzeniu wszystkie obiekty jQuery dziedziczą dodawane przez nas metody. Reasumując, każde wywołanie metody jQuery() utworzy nowy obiekt dziedziczący wszystkie metody jQuery.

Wtyczki mają za zadanie wykonać pewne operacje na zbiorze elementów. Za wtyczkę można więc uznać każdą metodę znajdującą się w kodzie źródłowym jQuery, np. fadeOut czy addClass.

Możesz tworzyć także własne wtyczki na swój prywatny użytek, bądź je udostępniać innym. W sieci dostępne są tysiące wtyczek jQuery. Ich pisanie jest bajecznie proste, zatem bez wątpienia będziesz od razu chciał spróbować własnych sił!

Jak napisać prostą wtyczkę do jQuery

Notacja obowiązująca przy tworzeniu standardowej wtyczki wygląda tak:

	(function($){
	    $.fn.mojaNowaWtyczka = function() {
	        return this.each(function(){
	            // zrób coś
	        });
	    };
	}(jQuery));

Powyższy kod nie jest tak skomplikowany, na jaki może wyglądać. Wtyczka ma na celu utworzyć rozszerzenie prototypu obiektu jQuery, co widać w poniższej linijce kodu:

	$.fn.mojaNowaWtyczka = function() { //...

Przypisanie to opakujemy w wywołaną od razu funkcję:

	(function($){
	    //...
	}(jQuery));

W powyższy sposób utworzyliśmy „prywatny” zakres, dzięki czemu można rozszerzyć jQuery za pomocą symbolu dolara bez obawy o to, że ten sam znak został nadpisany przez inną bibliotekę.

Podsumowując, nasza wtyczka na razie wygląda następująco:

	$.fn.mojaNowaWtyczka = function() {
	    return this.each(function(){
	        // zrób coś
	    });
	};

Słowo kluczowe this wewnątrz nowej wtyczki odwołuje się do obiektu jQuery, na którym została wywołana wtyczka.

	var jakisObiektjQuery = $('#cos');
	 
	$.fn.mojaNowaWtyczka = function() {
	    alert(this === jakisObiektjQuery);
	};
	 
	jakisObiektjQuery.mojaNowaWtyczka(); // wywoła alert o treści true

Typowy obiekt jQuery zawiera odniesienia do dowolnej liczby elementów DOM. Z tego powodu obiekty jQuery są często nazywane kolekcjami.

Aby wykonać jakieś operacje na wybranej kolekcji, należy ją przejrzeć za pomocą pętli, co najłatwiej zrobić korzystając z dostępnej w jQuery metody each():

	$.fn.mojaNowaWtyczka = function() {
	    return this.each(function(){
	 
	    });
	};

Metoda each(), podobnie jak większość metod jQuery, zwraca obiekt jQuery, dzięki czemu możemy skorzystać ze znanej i lubianej przez nas techniki łączenia metod w łańcuch ($(...).css().attr()...). Aby nie naruszyć przyjętej konwencji, zwracamy obiekt this. Wewnątrz pętli możemy wykonać na każdym elemencie dowolne operacje. Oto przykład małej wtyczki wykorzystującej kilka z omawianych technik:

	(function($){
	    $.fn.pokazLokalizacjeOdnosnika = function() {
	        return this.filter('a').each(function(){
	            $(this).append(
	                ' (' + $(this).attr('href') + ')'
	            );
	        });
	    };
	}(jQuery));
	 
	// Przykład wykorzystania wtyczki:
	$('a').pokazLokalizacjeOdnosnika();

Ta praktyczna wtyczka przechodzi przez wszystkie kotwice w kolekcji i dodaje do każdej z nich atrybut href w nawiasie.

	<!-- Przed wywołaniem wtyczki: -->
	<a href="strona.html">Foo</a>
	 
	<!-- Po wywołaniu wtyczki: -->
	<a href="strona.html">Foo (strona.html)</a>

Wtyczkę tę można jednak zoptymalizować:

	(function($){
	    $.fn.pokazLokalizacjeOdnosnika = function() {
	        return this.filter('a').append(function(){
	              return ' (' + this.href + ')';
	        });
	    };
	}(jQuery));

Skorzystaliśmy z możliwości przekazania do metody append wywołania zwrotnego — jego wartość zwrotna będzie określać, co ma być dołączone do każdego elementu kolekcji. Zauważ też, że do pobrania atrybutu href nie korzystamy z metody attr. Łatwy dostęp do niego zapewnia interfejs API modelu DOM poprzez własność href.

Oto jeszcze jeden przykład wtyczki. W jej wypadku nie musimy przeglądać każdego elementu za pomocą metody each(). Zamiast tego będziemy się po prostu bezpośrednio odwoływać do innych metod jQuery:

	(function($){
	    $.fn.pokazElementIDodajKlase = function(czasTrwania, nazwaKlasy) {
	        return this.fadeIn(czasTrwania, function(){
	            $(this).addClass(nazwaKlasy);
	        });
	    };
	}(jQuery));
	 
	// Przykład wykorzystania wtyczki:
	$('a').pokazElementIDodajKlase(400, 'koniecWylaniania');

Wyszukiwanie i ocenianie jakości wtyczek

Wtyczki rozszerzają podstawową funkcjonalność jQuery, i to ich ogromne zasoby są jednym z najbardziej cenionych elementów biblioteki. Od sortowania tabel, poprzez walidację formularzy aż do autouzupełniania… Jeśli do czegoś byłaby przydatna wtyczka, to istnieje duża szansa, że ktoś już ją napisał.

Jakość dostępnych wtyczek jQuery jest bardzo różna. Wiele z nich przechodzi intensywne testy i są one odpowiednio zadbane, inne zaś powstają w pośpiechu, a później się o nich zapomina. Istnieje również spora liczba wtyczek, w których nie zastosowano najlepszych rozwiązań.

Najlepszym punktem wyjścia do poszukiwania wtyczek jest wyszukiwarka Google, jednak zespół jQuery prowadzi obecnie prace nad ulepszeniem swojego repozytorium wtyczek. Po znalezieniu interesujących cię rozwiązań w Google, możesz zasięgnąć porady na ich temat na liście mailingowej jQuery lub za pośrednictwem kanału IRC #jquery.

Jeśli wtyczka ma spełniać konkretne zadanie, niech twoje poszukiwania będą skrupulatne. Upewnij się, że wtyczka jest dobrze udokumentowana, a także poszukaj zaprezentowanych przez autora przykładów jej wykorzystania. Uważaj na wtyczki spełniające więcej zadań niż tego potrzebujesz — korzystanie z nich może znacznie spowolnić działanie strony. Więcej wskazówek na temat tego, jak rozpoznać niskiej jakości wtyczkę, znajdziesz we wpisie Signs of a poorly written jQuery plugin Remyego Sharpa.

Kiedy już zdecydujesz się na którąś wtyczkę, musisz dodać ją na stronę. Aby to zrobić, pobierz wybraną wtyczkę, rozpakuj ją (jeśli istnieje taka potrzeba), umieść ją w strukturze katalogów aplikacji, a następnie dodaj ją na stronę za pomocą elementu script (po dodaniu biblioteki jQuery).

Pisanie wtyczek jQuery

Czasami chcesz, aby jakaś funkcjonalność była dostępna w całym skrypcie — na przykład możesz potrzebować jednej metody wywoływanej na wybranych elementach jQuery, która wykonuje na nich szereg operacji. W takim przypadku dobrym rozwiązaniem jest napisanie wtyczki.

Większość wtyczek to proste metody należące do przestrzeni nazw $.fn. jQuery gwarantuje, że metoda wywołana na obiekcie jQuery będzie mieć dostęp do obiektu, który wewnątrz metody funkcjonuje jako this. W zamian za to wtyczka musi zwrócić otrzymany obiekt, chyba że dokumentacja wyraźnie stwierdza inaczej.

Oto przykład prostej wtyczki:

Przykład 8.1. Wtyczka dodająca i usuwająca klasę po najechaniu na element kursorem

	// definicja wtyczki
	(function($){
	    $.fn.klasyHover = function(k) {
	        return this.hover(
	            function() { $(this).toggleClass(k); }
	        );
	    };
	})(jQuery);
	 
	// przykład użycia wtyczki
	$('li').klasyHover('hover');

Więcej na temat pisania wtyczek dowiesz się po przeczytaniu niezwykle istotnego wpisu Mike’a Alsupa A Plugin Development Pattern. Autor tworzy wtyczkę o nazwie $.fn.podswietlenie, która obsługuje wtyczkę operującą na metadanych (o ile taka istnieje) i pozwala ustawić opcje globalne i egzemplarza w sposób scentralizowany.

Przykład 8.2. Tworzenie wtyczek jQuery wg Mike’a Alsupa

	//
	// utwórz zamknięcie
	//
	(function($) {
	  //
	  // definicja wtyczki
	  //
	  $.fn.podswietlenie = function(opcje) {
	    debug(this);
	    // dodaj główne opcje przed iteracją elementów
	    var opc = $.extend({}, $.fn.podswietlenie.domyslne, opcje);
	    // przejdź iteracyjnie przez każdy pasujący element i przeformatuj go
	    return this.each(function() {
	      $this = $(this);
	      // dodaj specyficzne opcje elementów
	      var o = $.meta ? $.extend({}, opc, $this.data()) : opc;
	      // zaktualizuj style elementu
	      $this.css({
	        backgroundColor: o.tlo,
	        color: o.front
	      });
	      var kodZnacznikowy = $this.html();
	      // wywołaj funkcję format
	      kodZnacznikowy = $.fn.podswietlenie.format(kodZnacznikowy);
	      $this.html(kodZnacznikowy);
	    });
	  };
	  //
	  // prywatna funkcja służąca wyszukiwaniu usterek
	  //
	  function debug($obj) {
	    if (window.console && window.console.log)
	      window.console.log('liczba podświetlonych elementów: ' + $obj.size());
	  };
	  //
	  // zdefiniuj funkcję format i wyróżnij zwracane przez nią dane
	  //
	  $.fn.podswietlenie.format = function(txt) {
	    return '<strong>' + txt + '</strong>';
	  };
	  //
	  // domyślne ustawienia wtyczki
	  //
	  $.fn.podswietlenie.domyslne = {
	    front: 'red',
	    tlo: 'yellow'
	  };
	//
	// koniec zamknięcia
	//
	})(jQuery);

Pisanie zaawansowanych wtyczek za pomocą fabryki widżetów jQuery UI

Większość wtyczek jQuery to wtyczki bezstanowe — wywołujemy je na elemencie i na tym nasza interakcja z nimi się kończy. Jednak w wielu przypadkach to za mało.

Aby wypełnić tę lukę, do interfejsu jQuery wprowadzano bardziej zaawansowany system wtyczek. Zarządza on stanem wtyczki, pozwala na wykorzystanie kilku funkcji w jednej wtyczce, a także udostępnia różne punkty rozszerzeń. Nazwa systemu to fabryka widżetów i jest on dostępny w interfejsie jQuery UI 1.8 jako jQuery.widget, choć można z niego korzystać także z poza interfejsu biblioteki jQuery UI.

Aby zaprezentować możliwości fabryki widżetów, zbudujemy prostą wtyczkę obsługującą pasek postępu.

Na początek utworzymy pasek, który pozwoli nam ustawić stan postępu raz. Jak widać poniżej, zrobimy to poprzez wywołanie jQuery.widget z dwoma parametrami: nazwą wtyczki, którą chcemy utworzyć oraz z literałem obiektowym zawierającym funkcje obsługujące naszą wtyczkę. Po wywołaniu wtyczki, zostanie utworzona nowa instancja i wszystkie funkcje będą wywoływane w jej kontekście. Warto zwrócić w tym miejscu uwagę na dwie istotne różnice w porównaniu ze standardową wtyczką jQuery. Po pierwsze kontekst jest obiektem, a nie elementem struktury DOM. Po drugie kontekst jest zawsze pojedynczym obiektem, nigdy kolekcją.

Przykład 8.3. Tworzymy prostą wtyczkę przechowującą informacje o stanie za pomocą fabryki widżetów jQuery UI

	$.widget("nmk.pasekpostepu", {
	    _create: function() {
	        var postep = this.options.value + "%";
	        this.element
	            .addClass("pasekpostepu")
	            .text(postep);
	    }
	});

Nazwa wtyczki musi zawierać przestrzeń nazw —w tym przypadku użyliśmy przestrzeni nmk. Dodatkowo musi być to przestrzeń nazw pierwszego poziomu, zatem nie moglibyśmy wykorzystać np. przestrzeni nmk.foo. Widzimy również, że fabryka widżetów udostępnia nam dwie własności. Pierwsza z nich, this.element, jest obiektem jQuery zawierającym dokładnie jeden element. Jeśli wywołamy wtyczkę na obiekcie jQuery zawierającym wiele elementów, dla każdego z nich zostanie utworzona osobna instancja wtyczki i każda taka instancja będzie mieć swój własny obiekt this.element. Druga własność, this.options, to tablica zawierająca pary klucz-wartość dla wszystkich opcji naszej wtyczki. Opcje można przekazać wtyczce tak jak w zaprezentowanym przykładzie.

Przykład 8.4. Przekazywanie opcji do widżetu

	$("<div></div>")
	    .appendTo( "body" )
	    .pasekpostepu({ value: 20 });

Wywołanie obiektu jQuery.widget rozszerza jQuery poprzez dodanie metody do przestrzeni nazw jQuery.fn (w ten sam sposób, w jaki tworzy się standardową wtyczkę). Nazwa dodanej funkcji jest oparta na nazwie przekazanej do wywołania jQuery.widget, bez przestrzeni nazw. W naszym przypadku utworzona zostanie funkcja jQuery.fn.progressbar. Opcje przekazane do wtyczki są ustawiane w obiekcie this.options, znajdującym się wewnątrz instancji wtyczki. Jak widać w poniższym przykładzie, możemy określić wartość domyślną dla dowolnych opcji. Podczas tworzenia własnego API, powinieneś ustalić, do czego najczęściej może być wykorzystywana wtyczka — określisz dzięki temu odpowiednie wartości domyślne, a opcje będą opcjonalne w pełnym tego słowa znaczeniu.

Przykład 8.5. Ustawiamy domyślne opcje widgetu

	$.widget("nmk.pasekpostepu", {
	    // domyślne opcje
	    options: {
	        value: 0
	    },
	 
	    _create: function() {
	        var postep = this.options.value + "%";
	        this.element
	            .addClass( "pasekpostepu" )
	            .text( postep );
	    }
	});

Dodawanie metod do widżetu

Możemy już włączyć nasz pasek stanu. Teraz dodamy do niego możliwość wykonywania akcji poprzez wywoływanie metod na instancji wtyczki. Definicja metody wtyczki polega tylko na dodaniu pożądanej funkcji do literału obiektowego, który przekazujemy do obiektu jQuery.widget. Możemy także zdefiniować metody „prywatne” poprzez poprzedzenie nazwy funkcji znakiem podkreślenia.

Przykład 8.6. Tworzenie metod widgetu

	$.widget("nmk.pasekpostepu", {
	    options: {
	        value: 0
	    },
	 
	    _create: function() {
	        var postep = this.options.value + "%";
	        this.element
	            .addClass("pasekpostepu")
	            .text(postep);
	    },
	 
	    // tworzymy metodę publiczną
	    value: function(value) {
	        // jeśli nie została przekazana żadna wartość, niech będzie to metoda pobierająca
	        if (value === undefined) {
	            return this.options.value;
	        // jeśli przekazano jakąś wartość, niech będzie to metoda ustawiająca
	        } else {
	            this.options.value = this._constrain(value);
	            var postep = this.options.value + "%";
	            this.element.text(postep);
	        }
	    },
	 
	    // tworzymy metodę prywatną
	    _constraint: function(value) {
	        if (value > 100) {
	            value = 100;
	        }
	        if (value < 0) {
	            value = 0;
	        }
	        return value;
	    }
	});

Aby wywołać metodę na instancji wtyczki, należy przekazać wtyczce jQuery nazwę danej metody. W przypadku wywoływania wtyczki akceptującej parametry, są one przekazywane po nazwie metody.

Przykład 8.7. Wywoływanie metod na instancji wtyczki

	var bar = $("<div></div>")
	    .appendTo("body")
	    .pasekpostepu({ value: 20 });
	 
	// pobiera aktualną wartość
	alert(bar.pasekpostepu("value"));
	 
	// aktualizuje wartość
	bar.pasekpostepu("value", 50);
	 
	// ponownie pobiera aktualną wartość
	alert(bar.pasekpostepu("value"));

Praca z opcjami widżetu

Jedną z automatycznie dostępnych metod w naszej wtyczce jest metoda option, pozwalająca pobierać i ustawiać opcje po inicjacji wtyczki. Działa ona identycznie, jak dostępne w jQuery metody css i attr. Jeśli chcemy, by była to metoda ustawiająca, przekazujemy tylko nazwę, zaś nazwę i klucz jeśli ma służyć ustawieniu jednej wartości. Do ustawienia wielu wartości należy przekazać tablicę par klucz-wartość. W przypadku gdy metoda option jest pobierająca, wtyczka zwróci obecną wartość opcji, która koresponduje z przekazaną nazwą. Jeśli zaś używamy metody option do ustawiania wartości, metoda _setOption wtyczki zostanie wywołana dla każdej ustawianej opcji. Możemy też w naszej wtyczce ustawić metodę _setOption, która będzie reagować na zmiany opcji.

Przykład 8.8. Reakcja na zmianę opcji

	$.widget("nmk.pasekpostepu", {
	    options: {
	        value: 0
	    },
	 
	    _create: function() {
	        this.element.addClass("pasekpostepu");
	        this._update();
	    },
	 
	    _setOption: function(key, value) {
	        this.options[key] = value;
	        this._update();
	    },
	 
	    _update: function() {
	        var postep = this.options.value + "%";
	        this.element.text(postep);
	    }
	});

Dodawanie wywołań zwrotnych

Jednym z najłatwiejszych sposobów na umożliwienie rozszerzeń wtyczki jest dodanie wywołań zwrotnych, dzięki czemu użytkownik może zareagować, kiedy stan wtyczki ulega zmianie. W przykładzie poniżej możemy zobaczyć, jak dodać do paska stanu wywołanie zwrotne, które zasygnalizuje stuprocentowy postęp. Metoda _trigger przyjmuje trzy parametry: nazwę wywołania zwrotnego, rodzimy obiekt zdarzenia, który zainicjował wywołanie zwrotne, oraz tablicę danych związanych ze zdarzeniem. Nazwa wywołania zwrotnego jest jedynym wymaganym parametrem, lecz pozostałe mogą być bardzo przydatne dla użytkowników, którzy chcieliby zaimplementować własne funkcje w oparciu o twoją wtyczkę. Jeśli na przykład budujemy wtyczkę służącą do przeciągania elementów, rodzime zdarzenie mousemove możemy przekazać w czasie wyzwalania wywołania zwrotnego dla przeciągnięcia. Dzięki temu użytkownik może zareagować na przeciągnięcie bazując na współrzędnych X i Y znajdujących się w obiekcie zdarzenia.

Przykład 8.9. Dodajemy wywołania zwrotne, które umożliwią użytkownikowi utworzenie rozszerzeń

	$.widget("nmk.pasekpostepu", {
	    options: {
	        value: 0
	    },
	 
	    _create: function() {
	        this.element.addClass("pasekpostepu");
	        this._update();
	    },
	 
	    _setOption: function(key, value) {
	        this.opcje[key] = value;
	        this._update();
	    },
	 
	    _update: function() {
	        var postep = this.options.value + "%";
	        this.element.text(postep);
	        if (this.options.value == 100) {
	            this._trigger("complete", null, { value: 100 });
	        }
	    }
	});

W gruncie rzeczy wywołania zwrotne to tylko dodatkowe opcje, zatem można je pobierać i ustawiać w analogiczny sposób. Za każdym razem, gdy wykonywane zostaje wywołanie zwrotne, wyzwalane jest korespondujące z nim zdarzenie. Typ zdarzenia jest określany na podstawie połączenia nazwy wtyczki z nazwą wywołania zwrotnego. Zarówno wywołanie jak i zdarzenie otrzymują te same dwa parametry: obiekt zdarzenia i tablicę danych związanych ze zdarzeniem, co zostało zaprezentowane poniżej.

Jeśli chcesz, aby użytkownik miał możliwość zablokowania jakiejś funkcji twojej wtyczki, najlepiej osiągnąć to poprzez utworzenie wywołań zwrotnych, które da się anulować. Użytkownik może anulować wywołanie zwrotne lub powiązane z nim zdarzenie w ten sam sposób, co każde zdarzenie rodzime: poprzez wywołanie metody event.preventDefault() lub korzystając z polecenia return false. Jeśli użytkownik anuluje wywołanie zwrotne, metoda _trigger zwróci wartość false — będziesz mógł zatem zaimplementować odpowiednią funkcjonalność w swojej wtyczce.

Przykład 8.10. Wiązanie zdarzeń widżetu z elementami

	var bar = $("<div></div>")
	    .appendTo("body")
	    .pasekpostepu({
	        complete: function(event, data) {
	            alert( "Wywołania zwrotne są świetne!" );
	        }
	    })
	    .bind("pelenpasekpostepu", function(event, data) {
	        alert("Zdarzenia rozprzestrzeniają się i obsługują wiele procedur, aby zapewnić możliwie największą elastyczność.");
	        alert("Wartość paska postępu to " + data.value);
	    });
	 
	bar.pasekpostepu("option", "value", 100);

Fabryka widżetów — szczegóły funkcjonowania

Wywołanie obiektu jQuery.widget, powoduje utworzenie konstruktora wtyczki i ustawia literał obiektowy, który jest przekazywany jako prototyp dla instancji wtyczki. Wszystkie funkcje, które są automatycznie dodawane do wtyczki pochodzą z podstawowego prototypu widżetu o nazwie jQuery.Widget.prototype. Po utworzeniu instancji wtyczki jest on zapisywany w oryginalnym elemencie DOM za pomocą metody jQuery.data, gdzie kluczem jest nazwa wtyczki.

Ponieważ instancja wtyczki jest bezpośrednio połączona z elementem DOM, możesz uzyskać do niej bezpośredni dostęp zamiast korzystać z udostępnianej przez wtyczkę metody. Dzięki temu można wywoływać metody bezpośrednio na wystąpieniu wtyczki, bez potrzeby przekazywania nazw metod jako ciągów. Ponadto uzyskujemy bezpośredni dostęp do własności wtyczki.

	var bar = $("<div></div>")
	    .appendTo("body")
	    .pasekpostepu()
	    .data("pasekpostepu" );
	 
	// wywołujemy metodę bezpośrednio na instancji wtyczki
	bar.option("value", 50);
	 
	// uzyskujemy dostęp do własności instancji wtyczki
	alert(bar.options.value);

Jedną z największych zalet korzystania z konstruktora i prototypu jest łatwość rozszerzenia wtyczki. Dodając lub modyfikując metody znajdujące się w prototypie możemy wpłynąć na zachowanie wszystkich instancji. Jeśli na przykład chcielibyśmy dodać do paska postępu metodę resetującą cały postęp, dodalibyśmy ją do prototypu, dzięki czemu mogłaby być od razu wywołana na dowolnej instancji wtyczki.

	$.nmk.pasekpostepu.prototype.reset = function() {
	    this._setOption("value", 0);
	};

Sprzątanie pamięci

W niektórych przypadkach warto pozwolić użytkownikowi na ręczne włączenie i wyłączenie wtyczki — można to zrobić za pomocą metody destroy. Wewnątrz metody należy odwrócić wszystkie operacje, jakich mogła dokonać wtyczka po lub w trakcie inicjacji. Metoda destroy jest wywoływana automatycznie, jeśli element, z którym powiązana jest instancja wtyczki zostanie usunięty z DOM — metodę tę można zatem również wykorzystać do sprzątania pamięci. Domyślna metoda destroy odłącza element DOM od instancji wtyczki, dlatego należy pamiętać o wywołaniu bazowej funkcji z metody destroy wtyczki.

Przykład 8.11. Dodawanie metody destroy do widżetu

	$.widget( "nmk.pasekpostepu", {
	    options: {
	        value: 0
	    },
	 
	    _create: function() {
	        this.element.addClass("pasekpostepu");
	        this._update();
	    },
	 
	    _setOption: function(key, value) {
	        this.options[key] = value;
	        this._update();
	    },
	 
	    _update: function() {
	        var postep = this.options.value + "%";
	        this.element.text(postep);
	        if (this.options.value == 100 ) {
	            this._trigger("Skończono", null, { value: 100 });
	        }
	    },
	 
	    destroy: function() {
	        this.element
	            .removeClass("pasekpostepu")
	            .text("");
	 
	        // wywołujemy podstawową funkcję destroy
	        $.Widget.prototype.destroy.call(this);
	    }
	});

Podsumowanie

Fabryka widżetów to tylko jeden sposób tworzenia wtyczek przechowujących informacje o stanie. Można korzystać także z innych narzędzi, z których każde ma swoje zalety i wady. Fabryka widżetów rozwiązuje za programistę wiele często występujących problemów, zwiększa wydajność pracy, a ponadto umożliwia ponowne wykorzystanie kodu, dzięki czemu nie tylko świetnie pasuje do biblioteki jQuery UI, ale także do wielu innych wtyczek przechowujących informacje o stanie.

Ćwiczenia

Tabela z funkcją sortowania

W tym ćwiczeniu twoim zadaniem jest zidentyfikowanie, pobranie, a następnie zaimplementowanie na stronie index.html wtyczki sortującej zawartość tabeli. Jeśli wykonasz powyższe instrukcje prawidłowo, wszystkie kolumny znajdującej się na stronie tabeli będzie można posortować.

Wtyczka malująca tabelę w paski

Otwórz w przeglądarce plik /exercises/index.html, a także skorzystaj z pliku /exercises/js/stripe.js. Twoim zadaniem jest napisanie wtyczki o nazwie stripe, którą będzie można wywołać na dowolnym elemencie tabeli. Po wywołaniu wtyczki kolor nieparzystych rzędów tabeli powinien zostać zmieniony na kolor określony przez użytkownika.

	$('#myTable').stripe('#cccccc');

Nie zapomnij zwrócić tablicy! Dzięki temu inne metody będzie można dodać do wtyczki w formie łańcucha.

Autor: Rebecca Murphey

Źródło: http://github.com/rmurphey/jqfundamentals

Tłumaczenie: Joanna Liana

Treść tej strony dostępna jest na zasadach licencji CC BY-SA 3.0 US

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *