Od podstaw do tworzenia wtyczek.
Niniejszy przewodnik zawiera podstawowe informacje na temat biblioteki jQuery. Do jego zrozumienia potrzebna jest podstawowa wiedza z zakresu JavaScriptu i obiektowego modelu dokumentów (DOM). Na początku znajdują się najważniejsze informacje na temat tego, jak rozpocząć pracę z biblioteką jQuery. W artykule tym znajdziesz przykładowy program, objaśnienie selektorów i zdarzeń, opis Ajaksa, FX, a także dowiesz się jak używać wtyczek i jak tworzyć własne wtyczki.
Jeśli szukasz obszerniejszego kursu posługiwania się biblioteką jQuery, przeczytaj nasz Kurs jQuery od podstaw.
Przewodnik ten nie zawiera żadnych przykładów typu „kliknij mnie”. Ma to zachęcić Cię do skopiowania przykładów i wypróbowania ich na własną rękę. Skopiuj wybrany przykład, sprawdź jak działa i zmodyfikuj go zgodnie z własnymi potrzebami.
1. Wstępna konfiguracja
Na początek należy pobrać kopię biblioteki jQuery. W pakiecie jQuery Starterkit znajdują się pliki HTML i CSS, z którymi będziemy pracować. Pobierz go i rozpakuj w dowolnym folderze, do którego skopiuj również plik jquery.js. Następnie otwórz pliki starterkit.html i custom.js w dowolnym edytorze oraz dodatkowo plik starterkit.html otwórz w przeglądarce internetowej.
Mamy wszystko, czego nam trzeba do utworzenia tradycyjnego programu „Witaj, świecie”.
2. Witaj, jQuery
Zaczniemy od pustej strony HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Tutaj wpiszmy nasz kod JavaScript
</script>
</head>
<body>
<!-- Tutaj wpiszmy nasz kod HTML -->
</body>
</html> Ta strona wczytuje tylko bibliotekę jquery.js — pamiętaj, aby podać prawidłową ścieżkę do swojej kopii biblioteki! W tym przykładzie przyjęto założenie, że biblioteka ten znajduje się w tym samym folderze, co plik HTML. Za pomocą komentarzy zostały oznaczone miejsca, w których będziemy dodawać kod.
Gdy używamy biblioteki jQuery do odczytywania obiektowego modelu dokumentu (DOM) lub jego modyfikowania, zdarzenia musimy zacząć dodawać dopiero, gdy model ten jest już gotowy do użycia.
Dlatego pracę zaczynamy od zarejestrowania zdarzenia ready dla dokumentu.
$(document).ready(function() {
// Kod wykonywany, gdy DOM jest gotowy
});Umieszczanie alertu w tej funkcji mija się z celem, ponieważ do wyświetlenia alertu DOM nie musi być wczytany. Spróbujemy zatem czegoś bardziej wyszukanego — wyświetlimy alert w odpowiedzi na kliknięcie odnośnika.
Wpisz poniższy kod w elemencie <body>:
<a class="external-link" href="">Łącze</a>
Teraz wpisz poniższy kod w procedurze obsługi zdarzenia $(document).ready:
$(document).ready(function() {
$("a").click(function() {
alert("Witaj, świecie!");
});
});
Ten kod powinien spowodować wyświetlenie alertu, gdy użytkownik kliknie odnośnik. Skrypt jest gotowy, więc możesz go przenieść do pliku custom.js. Gdy to zrobisz, otwórz stronę starterkit.html w przeglądarce i kliknij dowolny ze znajdujących się na niej odnośników. Kliknięcie któregokolwiek łącza powinno spowodować pojawić się okna dialogowego z tekstem „Witaj, świecie!”.
Przeanalizujmy dokładnie nasz kod. Ciąg $("a") to selektor jQuery, który wybiera wszystkie elementy a. Znak $ jest w jQuery aliasem słowa class, a więc zapis $() oznacza utworzenie nowego obiektu jQuery. Funkcja click(), którą wywołujemy dalej jest metodą tego obiektu. Wiąże ona zdarzenie kliknięcia z wszystkimi wybranymi elementami (w tym przypadku z jedną kotwicą) i wykonuje podaną funkcję, gdy zdarzenie to wystąpi.
Jest to coś podobnego poniższego kodu:
<a class="external-link" href="" onclick="alert('Witaj, świecie')">Łącze</a> Różnica między tym skryptem, a poprzednim jest oczywista: nie musimy pisać zdarzenia onclick dla każdego elementu. Dzięki temu całkowicie oddzieliliśmy warstwę struktury (HTML) od warstwy mechanicznej (JS), podobnie jak oddzielamy strukturę od prezentacji za pomocą CSS.
Pamiętając o tym przyjrzymy się selektorom i zdarzeniom nieco dokładniej.
Interesujące odnośniki:
3. Znajdź mnie — selektory i zdarzenia
W jQuery elementy można wybierać na dwa sposoby. Pierwszy polega na użyciu kombinacji selektorów CSS i XPath, które przekazuje się jako łańcuchy do konstruktora jQuery (np. $("div > ul a")). Drugi natomiast polega na wykorzystaniu kilku metod obiektu jQuery. Obie metody można stosować na raz.
Aby wypróbować niektóre selektory, wybierzemy i zmodyfikujemy pierwszą nieuporządkowaną listę na naszej stronie internetowej.
Najpierw musimy dostać się do samej listy. Lista ta ma identyfikator orderedlist. W klasycznym JavaScripcie użylibyśmy do tego celu następującej instrukcji: document.getElementById("orderedlist"). Przy użyciu jQuery natomiast zrobimy to tak:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
W pakiecie początkowym znajduje się arkusz stylów zawierający klasę o nazwie red, która zmienia kolor tła elementu na czerwony. Dlatego po odświeżeniu strony pierwsza lista nieuporządkowana powinna mieć czerwone tło. Druga lista pozostaje bez zmian.
Teraz dodamy jeszcze klasy do elementów potomnych tej listy.
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
Powyższy kod wybiera elementy li znajdujące w elemencie o identyfikatorze orderedlist i dodaje do nich klasę blue.
Teraz zrobimy coś bardziej wyszukanego: chcemy dodawać i usuwać klasę w odpowiedzi na najechanie lub opuszczenie kursorem elementu li, przy czym interesuje nas tylko ostatni element naszej listy.
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
Dostępnych jest jeszcze wiele innych selektorów o składni podobnej do CSS i XPath. Więcej przykładów i listę wszystkich dostępnych wyrażeń można znaleźć tutaj.
Dla każdego zdarzenia typu onxxx, np. onclick, onchange, onsubmit, istnieje odpowiednik w jQuery. Istnieją też inne zdarzenia, jak ready i hover, które ułatwiają wykonywanie pewnych zadań.
Listę wszystkich zdarzeń można znaleźć w dokumentacji zdarzeń jQuery.
Już za pomocą samych tych selektorów można wiele zdziałać, ale to nie wszystko.
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});
Za pomocą funkcji find() można wyszukiwać potomków już wybranych elementów, a zatem np. instrukcja $("#orderedlist").find("li") jest w zasadzie równoważna instrukcji $("#orderedlist li").
Funkcja each() pozwala przejrzeć po kolei wszystkie elementy i przetworzyć je w dowolny sposób. Jest ona używana m. in. przez takie metody, jak addClass().
W tym przykładzie funkcja append() została użyta do dołączenia tekstu na końcu każdego elementu.
Inną często wykonywaną czynnością jest wywoływanie metod na elementach DOM, które nie są obsługiwane przez jQuery. Może to być na przykład formularz, który trzeba zresetować po zatwierdzeniu go przy użyciu Ajaksa.
$(document).ready(function() {
// Skrypt ten służy do zresetowania jednego formularza.
$("#reset").click(function() {
$("form")[0].reset();
});
});
Powyższy kod wybiera pierwszy element formularza i wywołuje na jego rzecz metodę reset(). Jeśli na stronie jest więcej formularzy, można posłużyć się następującym skryptem:
$(document).ready(function() {
// Ten skrypt służy do resetowania wielu formularzy na raz.
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
Powyższy skrypt wybierze wszystkie znajdujące się na stronie formularze, a następnie przejrzy je wszystkie za pomocą iteracji i na każdym z nich wywoła metodę reset(). Zwróć uwagę, że w funkcji .each() słowo kluczowe this dotyczy bieżącego elementu. Ponadto zauważ, że ponieważ funkcja reset() należy do elementu formularza, a nie do obiektu jQuery, nie można zastosować zwykłego wywołania $("form").reset(), aby zresetować wszystkie formularze na stronie.
Dodatkowym wyzwaniem jest wybór tylko niektórych z kilku podobnych lub identycznych elementów. W jQuery do tego celu służą funkcje filter() i not(). Funkcja filter() wybiera tylko te elementy, które spełniają warunki jej wyrażenia, a funkcja not() działa odwrotnie — usuwa elementy, które spełniają warunki jej wyrażenia. Za pomocą tych funkcji można na przykład wybrać wszystkie elementy <li> listy nieuporządkowanej, które nie zawierają żadnych zagnieżdżonych elementów <ul>.
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});
Powyższa instrukcja znajduje wszystkie elementy <li>, które zawierają element <ul> i usuwa je z grupy wybranych. Dzięki temu obramowanie będą miały wszystkie elementy <li> z wyjątkiem tego, który zawiera zagnieżdżony element <ul>.
Przy użyciu składni [wyrażenie] z XPath można wybierać elementy wg atrybutów. Poniżej znajduje się przykładowa instrukcja wybierająca wszystkie kotwice mające zdefiniowany atrybut name:
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});
Kolor tła wszystkich kotwic z atrybutem name zostanie zmieniony.
Częściej jednak kotwice wybiera się nie wg atrybutu name, a wg atrybutu href. Może to powodować problemy, ponieważ przeglądarki różnie interpretują to, czym jest zawartość atrybutu href (uwaga: problem ten w wersjach biblioteki jQuery nowszych od 1.1.1 jest już rozwiązany). Aby dopasować tylko część wartości, można użyć selektora w postaci *= zamiast =:
$(document).ready(function() {
$("a[href*='/content/gallery']").click(function() {
// Kod dotyczący odnośników prowadzących do katalogu /content/gallery.
});
});
Do tej pory selektorów używaliśmy do wybierania elementów potomnych lub filtrowania wybranych grup elementów. Czasami jednak trzeba też wybrać element poprzedni lub następny, czyli tzw. element siostrzany. Wyobraź sobie na przykład stronę z odpowiedziami na najczęściej zadawane pytania, na której początkowo wszystkie odpowiedzi są ukryte i pojawiają się, gdy użytkownik kliknie pytanie. Poniżej znajduje się kod jQuery realizujący taką funkcję:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});
W kodzie tym połączyliśmy kilka instrukcji w jeden łańcuch, aby zmniejszyć rozmiar kodu i zwiększyć jego szybkość działania, ponieważ element #faq jest wybierany tylko raz. Dzięki wywołaniu metody end(), pierwsze wywołanie metody find() nie zostaje dokończone, co pozwala nam na rozpoczęcie nowego wyszukiwania przy użyciu drugiego wywołania metody find() w elemencie #faq, zamiast w elementach dd.
W procedurze obsługi kliknięcia, funkcji przekazywanej metodzie click(), za pomocą instrukcji $(this).next() poszukujemy następnego elementu siostrzanego, zaczynając od bieżącego elementu dt. W ten sposób szybko wybieramy odpowiedź znajdującą się za klikniętym pytaniem.
Oprócz elementów siostrzanych można także wybierać elementy rodzice (zwane także elementami nadrzędnymi lub przodkami w terminologii XPath). Możemy na przykład wyróżnić akapit będący rodzicem odnośnika, nad którym znajduje się kursor. Posłuży nam do tego poniższy kod:
$(document).ready(function() {
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});
Gdy użytkownik umieści kursor nad którymkolwiek elementem kotwicy, nastąpi odszukanie akapitu będący rodzicem tego elementu, a następnie akapitowi temu zostanie dodana i odjęta klasa highlight.
Zanim przejdziemy dalej, zrobimy jeden krok wstecz: biblioteka jQuery pozwala znacznie skrócić kod, co sprawia że jest on prostszy i łatwiejszy w utrzymaniu. Poniżej znajduje się skrót zapisu $(document).ready(callback) :
$(function() {
// Kod, który ma zostać wykonany, gdy model DOM będzie gotowy do użytku.
});
Przenosząc to do przykładu Witaj, świecie!, otrzymamy:
$(function() {
$("a").click(function() {
alert("Witaj, świecie!");
});
});
Znając podstawy możemy przejść do innych zagadnień. Zaczniemy od Ajaksa.
Interesujące odnośniki:
- Dokumentacja API jQuery
- Visual jQuery — dokumentacja API z podziałem na kategorie i możliwością przeszukiwania.
- Selektory jQuery
- Zdarzenia jQuery
- Przeglądanie drzewa DOM za pomocą jQuery
4. Oceń mnie — używanie Ajaksa
W tej części artykułu napiszemy niewielką aplikację Ajax umożliwiającą użytkownikom ocenianie publikacji — coś podobnego do systemu ocen w serwisie youtube.com.
Do tego potrzebny będzie też kod działający po stronie serwera. W opisywanym przykładzie użyjemy pliku PHP, który będzie odczytywał parametr rating i zwracał liczbę ocen oraz ich średnią. Kod omawianego skryptu znajduje się w pliku o nazwie rate.php.
Nie chcemy, aby nasz program działał bez Ajaksa (chociaż byłoby to możliwe) i dlatego cały kod HTML będziemy generować za pomocą jQuery i dołączać go do kontenera <div> z identyfikatorem rating.
$(document).ready(function() {
// Generowanie kodu HTML.
$("#rating").append("Oceń to: ");
for ( var i = 1; i >= 5; i++ ) {
$("#rating").append("<a class="external-link" href='#'>" + i + "</a> ");
}
// Dodanie kodu HTML do kontenera i zastosowanie procedur obsługi kliknięcia do kotwic.
$("#rating a").click(function(e) {
// Anulowanie normalnego kliknięcia odnośnika.
e.preventDefault();
// Wysłanie żądania.
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// Sformatowanie i wysłanie na wyjście wyniku.
$("#rating").html(
"Dziękujemy za opinię. Aktualna średnia ocena: " +
$("average", xml).text() +
", liczba głosów: " +
$("count", xml).text()
);
});
});
});
Ten skrypt tworzy pięć kotwic i wstawia je do kontenera z identyfikatorem rating. Następnie dodawana jest procedura obsługi kliknięcia każdej z tych kotwic. Gdy użytkownik kliknie kotwicę, następuje wysłanie do skryptu rate.php żądania zawierającego treść kotwicy jako parametr. W odpowiedzi zostaje zwrócony wynik w formacie XML, który zostaje dodany do kontenera w miejsce kotwic.
Jeśli nie masz dostępu do serwera z PHP, możesz obejrzeć ten przykład w internecie.
Pełną dokumentację metod Ajaksa biblioteki jQuery można znaleźć w dokumentacji Ajaksa i w serwisie Visual jQuery w zakładce Ajax.
Przy wczytywaniu treści za pomocą Ajaksa bardzo często występuje następujący problem: jeśli dodawane są procedury obsługi zdarzeń, które powinny mieć zastosowanie do wczytanej treści, procedury te trzeba zastosować po wczytaniu treści. Aby uniknąć duplikowania kodu, można zastosować delegację do funkcji. Przykład:
function addClickHandlers() {
$("a.remote", this).click(function() {
$("#target").load(this.href, addClickHandlers);
});
}
$(document).ready(addClickHandlers);
Funkcja addClickHandlers zostanie po raz pierwszy wywołana, gdy model DOM dokumentu stanie się gotowy, a następnie po wczytaniu treści za każdym razem, gdy użytkownik kliknie odnośnik przypisany do klasy remote.
Zwróć uwagę na zapytanie $("a.remote", this) — słowo kluczowe this jest w nim przekazywane jako kontekst: dla zdarzenia gotowości dokumentu słowo kluczowe this odnosi się do dokumentu, a więc powoduje przeszukanie całego dokumentu w celu znalezienia kotwic przypisanych do klasy remote. Gdy funkcja addClickHandlers jest użyta jako funkcja zwrotna dla load(), słowo kluczowe this odnosi się do innego elementu: w tym przykładzie jest to element z identyfikatorem target. Zapobiega to nieskończonemu stosowaniu zdarzenia kliknięcia do tych samych odnośników i awarii, którą by to w końcu wywołało.
Inny problem z funkcjami zwrotnymi powodują parametry. Określiliśmy funkcję zwrotną, ale musimy przekazać jeszcze dodatkowy parametr. Najprościej jest opakować tę funkcję zwrotną w inną funkcję:
// Pobranie danych
var foobar = ...;
// Określenie procedury obsługowej, która wymaga danych w postaci parametru.
function handler(data) {
//...
}
// Dodanie procedury obsługi kliknięcia i przekazanie foobar!
$('a').click(function() {
handler(foobar);
});
// Jeśli potrzebujesz kontekstu oryginalnej procedury obsługowej, użyj metody apply:
$('a').click(function() {
handler.apply(this, [foobar]);
});
Za pomocą tych prostych elementów Ajaksa możemy zaimplementować wiele funkcji typu Web 2.0. Znając podstawy Ajaksa możemy dodać do strony proste efekty i animacje.
Interesujące odnośniki:
- Dokumentacja Ajaksa w jQuery
- API jQuery — zawiera opisy i przykłady użycia wszystkich metod jQuery, włącznie z append.
5. Ożyw mnie — używanie efektów
Proste animacje w jQuery można tworzyć przy użyciu metod show() i hide().
$(document).ready(function() {
$("a").toggle(function(){
$(".stuff").hide('slow');
},function(){
$(".stuff").show('fast');
});
});
Przy użyciu metody animate() można tworzyć dowolne kombinacje animacji, np. wsuwka z zanikaniem:
$(document).ready(function() {
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});
Bardziej wyszukane efekty można tworzyć przy użyciu kolekcji wtyczek Interface. Na stronie kolekcji można znaleźć przykłady użycia skryptów i dokumentację. Kolekcja Interface jest jedną z najważniejszych wtyczek do jQuery, ale nie jedyną. W następnej części artykułu dowiesz się, jak używać wtyczki tablesorter.
Interesujące odnośniki:
6. Posortuj mnie — używanie wtyczki tablesorter
Wtyczka tablesorter umożliwia sortowanie zawartości tabel po stronie klienta. Aby jej użyć, wystarczy dołączyć do strony bibliotekę jQuery i wtyczkę tablesorter oraz wskazać, które tabele mają mieć możliwość sortowania.
Aby wypróbować przykład opisany w tej części, musisz pobrać wtyczkę tablesorter z internetu i dodać do pliku starterkit.html poniższy wiersz kodu (pod elementem dołączającym bibliotekę jQuery):
<script src="jquery.tablesorter.js"></script> Gdy wtyczka jest dołączona do strony, można ją wywołać następująco:
$(document).ready(function() {
$("#large").tablesorter();
});
Kliknij dowolny nagłówek tabeli kilka razy, aby przekonać się, że zawartość kolumny zostaje posortowana raz rosnąco, a raz malejąco.
Tabela byłaby bardziej przejrzysta, gdyby miała pokolorowane wiersze. Efekt ten można uzyskać poprzez przekazanie dodatkowych parametrów:
$(document).ready(function() {
$("#large").tablesorter({
// Tabela w paski
widgets: ['zebra']
});
});
Więcej przykładów i opis wszystkich opcji można znaleźć w serwisie wtyczki.
W większości przypadków przepis na użycie wtyczki jest następujący: dołącz plik wtyczki i wywołaj jej metodę na wybranych elementach, a za pomocą parametrów przekazywanych tej metodzie dostosuj działanie wtyczki do własnych potrzeb.
Aktualną listę wtyczek do jQuery można znaleźć na stronie wtyczek jQuery.
Jeśli często używasz biblioteki jQuery, możesz używany przez siebie kod zapisać w postaci wtyczki, którą możesz zachować tylko dla siebie lub swojej firmy albo udostępnić całej społeczności. W następnej części znajdziesz podstawowe informacje na temat tworzenia wtyczek.
Interesujące odnośniki:
- Wtyczki do biblioteki jQuery
- Wtyczka tablesorter
7. Wetknij mnie — pisanie własnych wtyczek
Utworzenie wtyczki do jQuery jest bardzo proste. Jeśli dodatkowo będziesz przestrzegać opisanych tu zasad, to Twoja wtyczka będzie także łatwa w użyciu dla innych.
Nazwa wtyczki
Musisz jakoś nazwać swoją wtyczkę. Naszą przykładową wtyczkę nazwiemy foobar. Utwórz plik o nazwie jquery.[nazwatwojejwtyczki].js, np. jquery.foobar.js
Dodawanie metod
Metody należy dodawać poprzez rozszerzenie obiektu jQuery, np.:
jQuery.fn.foobar = function() {
// Jakiś kod
};
Dostęp do powyżej zdefiniowanej metody będzie można uzyskać w następujący sposób:
$(...).foobar();
Domyślne ustawienia:
Utwórz zestaw ustawień domyślnych, które użytkownik będzie mógł zmienić, np.:
jQuery.fn.foobar = function(options) {
var settings = jQuery.extend({
value: 5, name: "pete", bar: 655
}, options);
};
Dzięki temu wtyczkę będzie można wywoływać bez opcji, z ustawieniami domyślnymi:
$("...").foobar();
albo z opcjami:
$("...").foobar({ value: 123, bar: 9 });
Dokumentacja
Jeśli udostępnisz swoją wtyczkę społeczności, dołącz do niej przykłady użycia i dokumentację. Możesz wzorować się na wielu aktualnie dostępnych wtyczkach.
Masz już podstawowe wiadomości na temat tworzenia wtyczek. Pokażę Ci, jak je wykorzystać w praktyce.
Wtyczka Checkbox
Osoby używające jQuery do pracy z formularzami często potrzebują funkcji dotyczących zaznaczania i usuwania zaznaczeń przycisków radiowych i pól wyboru. Zazwyczaj piszą kod podobny do poniższego:
$(":checkbox").each(function() {
this.checked = true;
this.checked = false; // lub, aby usunąć zaznaczenie
this.checked = !this.checked; // lub, aby przełączać
});
Jeśli w kodzie, który piszesz użyta jest metoda each, kod ten możesz w bardzo prosty sposób zapisać jako wtyczkę:
jQuery.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
Wtyczki tej można użyć następująco:
$(":checkbox").check();
Można by też było napisać wtyczki dla metod uncheck() i toggleCheck(). Ale nie zrobimy tego, tylko dodamy do naszej pierwszej wtyczki możliwość używania opcji.
jQuery.fn.check = function(mode) {
// Jeśli tryb nie jest określony, domyślnie zostanie zastosowane ustawienie on
var mode = mode || 'on';
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
Dzięki temu, że opcja ma wartość domyślną, użytkownik może ją opuścić albo przekazać jej wartość on, off lub toggle, np.:
$(":checkbox").check();
$(":checkbox").check('on');
$(":checkbox").check('off');
$(":checkbox").check('toggle');
Ustawienia opcjonalne
Jeśli opcji ma być więcej niż jedna, to sprawa się komplikuje, ponieważ w tej postaci kodu, jeżeli użytkownik chce pominąć pierwszy parametr i i użyć tylko drugiego, w pierwszym parametrze musi wpisać null.
Użycie wtyczki tablesorter w poprzednim rozdziale pokazuje, jak problem ten można rozwiązać przy użyciu literału obiektowego. Użytkownik może opuścić wszystkie parametry albo przekazać obiekt z parą klucz-wartość dla każdego ustawienia, które chce zmienić.
W ramach ćwiczenia możesz spróbować zapisać skrypt oceniania z czwartego rozdziału jako wtyczkę. Struktura tej wtyczki powinna być następująca:
jQuery.fn.rateMe = function(options) {
// Zamiast wybierania statycznego kontenera za pomocą kodu
// $("#rating"), teraz użyjemy kontekstu jQuery
var container = this;
var settings = jQuery.extend({
url: "rate.php"
// Tu należy umieścić dalsze ustawienia domyślne.
}, options);
// ... reszta kodu ...
// Jeśli to możliwe, zwróć tu this, aby nie rozrywać łańcucha
return this;
});
Wtyczkę tę powinno się uruchamiać tak:
$(...).rateMe({ url: "test.php" });
8. Dalsze kroki
Jeśli zamierzasz częściej używać JavaScriptu, warto zainstalować sobie wtyczkę FireBug do Firefoksa o nazwie. Udostępnia ona konsolę (dobry zamiennik dla alertów), debuger oraz inne narzędzia, które są przydatne w codziennej pracy z językiem JavaScript.
Jeśli masz jakiekolwiek problemy, pomysły, którymi chcesz się podzielić z innymi albo po prostu chcesz porozmawiać o jQuery, zapisz się do listy mailingowej jQuery.
Uwagi dotyczące tego artykułu można zamieszczać na moim blogu lub wysyłać do mnie bezpośrednio.
Co pozostało… Wielkie dzięki dla Johna Resiga za tę świetną bibliotekę! Dziękuję społeczności jQuery za dostarczenie Johnowi dużo kawy i wszystkiego, czego potrzebował!
Jquery starterkit, do którego link jest powyżej, nie istnieje, a co za tym idzie – te funkcje nie działają, bo nie mają pliku źródłowego JS.
pozdrawiam