Rozpoczynanie pracy z bibliotek膮 jQuery

> Dodaj do ulubionych

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:

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:

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:

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艂!

Autor: J枚rn Zaefferer

殴r贸d艂o: http://learn.jquery.com/using-jquery-core/

T艂umaczenie: 艁ukasz Piwko

1 komentarz do “Rozpoczynanie pracy z bibliotek膮 jQuery”

  1. 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

Mo偶liwo艣膰 komentowania zosta艂a wy艂膮czona.