home
Kontakt Projekty News Strona główna

Jak napisać własny plugin jQuery

10 października 2010

Używasz jQuery, potrafisz sprawnie korzystać z jego możliwości więc może pora przejść na wyższy poziom? Bo z pewnością napisałeś już nie jedną ciekawą funkcję, którą może chciałbyś zaprezentować szerszej publiczności lub też korzystać z niej podczas następnych projektów.

Powstaje pytanie jak to zrobić, żeby było miło łatwo i przyjemnie? Odpowiedź brzmi: napisz własny plugin dla jQuery! Z pewnością niejednokrotnie korzystałeś z tego typu rozwiązań: implementując chociażby galerie, „karuzele” i inne tego typu gadżety, i wiesz jakim udogodnieniem są one dla twórców stron internetowych, szczególnie dzięki możliwości dołączania parametrów.

Dziś prezentuję pierwszą część poświęconą zagadnieniu tworzenia pluginów dla jQuery. Ponieważ jestem praktykiem to przedstawię zagadnienie na konkretnym przykładzie, w którym naszym zadaniem będzie stworzenie rozwiązania:

  • gdzie całość mieści się w jednym pliku
  • zadaniem będzie kopiowanie elementu z kontenera X do kontenera Y
  • liczba elementów do skopiowania będzie ograniczona poprzez limit

W podsumowaniu artykułu znajdziesz link, pod którym zobaczysz jaki jest efekt naszego działania

Podstawowa struktura

Najprościej ujmę to słowami – użyj metody kopiuj wklej, nie zastanawiając się po co i dlaczego. Jedynym zmiennym elementem jest tutaj zwrot „przenosiciel” będący nazwą pluginu, oczywiście postaraj się aby twoja nazwa była unikalną względem pozostałych plugin-ów użytych na stronie.

  1. (function($){
  2.   $.fn.extend({
  3.     //w miejce "przenosiciel" wpisz nazwę własnej funkcji
  4.     przenosiciel: function() {
  5.         //tu zostanie wprowadzony kod wykonywany na tablicy przesłanych elementów
  6.     }
  7.   });
  8. })(jQuery);

Opcje dla pluginu

Wzbogacamy podstawową strukturę o domyślne wartości, nazwy tych zmiennych będą widoczne wyłącznie w obszarze pisanego właśnie kodu i nie będą w żaden sposób kolidować z identycznymi zmiennymi w pozostałych funkcjach, czy też plugin-ach. Oczywiście domyślne wartości nie są wymagane ale są zalecane – niech ich ustalenie zawsze na starcie będzie twoją dobrą praktyką.

Wymaganym elementem jest także wpis jak w linii 11 ( var options = $.extend(defaults, options); ) oraz jeszcze wcześniej - drobna modyfikacja w linii 04 w celu możliwości wywołania plugin-u z parametrami. Za pomocą zapisu typu options.zmienna będziemy odwoływać się do nich właśnie. Najlepiej pokaże to fragment kodu poniżej:

  1. (function($){
  2.   $.fn.extend({
  3.     //w miejce "przenosiciel" wpisz nazwę własnej funkcji
  4.     przenosiciel: function(options) {
  5.       //ustanowienie domyślych wartości
  6.       var defaults = {
  7.         limit: 7,
  8.         kontener : ‘#kontener2‘
  9.       }
  10.       //aby opcje domyślne były widoczne
  11.       var options = $.extend(defaults, options);
  12.       alert(‘limit:‘+options.limit);
  13.     }
  14.   });
  15. })(jQuery);

Efektem działania będzie pojawienie się komunikatu o treści „limit:7”.

Dodanie działań

Teraz pozostaje dopisać kilka linijek kodu, które wydają się być jasne dla osób korzystających już wcześniej z jQuery – nie ma tu nic odkrywczego. Oczywiście zmienna do_limitu za każdym przerzuceniem zostaje inkrementowana.

  1. (function($){
  2.   $.fn.extend({
  3.     //w miejce "przenosiciel" wpisz nazwę własnej funkcji
  4.     przenosiciel: function(options) {
  5.       //ustanowienie domyślych wartości
  6.       var defaults = {
  7.         limit: 7,
  8.         kontener : ‘#kontener2‘
  9.       }
  10.       var options = $.extend(defaults, options);
  11.       //ustalamy zmienną inkrementowaną na starcie = 0
  12.       var do_limitu = 0;
  13.       //uruchomienie działania po kliknięciu na element z tablicy obiektów
  14.       $(this).click(function(){
  15.         if(options.limit>do_limitu){
  16.           //zwiększamy licznik o 1
  17.           do_limitu++;
  18.           //klonujemy kliknięty obiekt do wybranego kontenera
  19.           $(this).clone().appendTo(options.kontener);
  20.         }else{
  21.           alert(‘Osiągnąłeś limit‘);
  22.         }
  23.       })
  24.     }
  25.   });
  26. })(jQuery);

Korzystanie z pluginu

Tu sytuacja jest standardowa, wywołujemy plugin bez lub z dodatkowymi parametrami.

  1. <script type="text/javascript">
  2.   $(document).ready(function(){
  3.     //wywołanie bez dodatkowych parametrów - korzysta z domyślnych
  4.     $(„#kontener1 div”).przenosiciel();
  5.     //wywołanie ze wszystkimi możliwymi parametrami - można wywołać tylko z niektórymi
  6.     $(„#kontener1 div”).przenosiciel({kontener:‘#kontener2‘,limit:5});
  7.   });
  8. </script>

Podsumowanie

Mam nadzieję że pomogłem w zapoznaniu się z metodą tworzenie rozszerzeń do podstawowych możliwości tego świetnego narzędzia jakim jest jQuery.

Jak działa skrypt opisany w tym poradniku możesz zobaczyć pod tym linkiem. Podczas tworzenia artykułu korzystałem z jQuery w wersji 1.3.2

Na samym początku wspomniałem, że jest to część pierwsza, a kiedy następna? To zależy już od was, jeżeli macie uwagi może opinie- zachęcam do kontaktu.

komentarze

Thommee (290 dni)
Wielkie dzięki. Opisane w idealny sposób!
boneless (476 dni)
Tutorial łatwy, szybki i przejrzysty. Wielkie dzięki za podzielenie się swoją wiedzą.

Dodaj komentarz

*zostanie opublikowany po weryfikacji
Twój nick
Komentarz
więcej opcji
 

Aktualności

Relacja z pracyO optymizacji sklepu web-market, o monitorach, o uczelni - czyli kilka rzeczy w jednym. Warto poczytać...
Co nieco o skokach narciarskichCiekawostka. Już prawie końcówka sezony 2010 / 2011 w skokach - jeszcze tylko 10 konkursów (z czego...
Skąd ta cisza?Oto odpowiedź skąd takie czarne dziury na stronie. Co mam przez to na myśli? Ostatni wpis na stronie...
( zobacz wszystkie: 12 )

Projekty

Numerowanie i punktowanie w Word 2007Dowiedz się jak w praktyce używać Word 2007 do edycji list numerowanych i punktowanych. Czego więcej...
Smerf - plugin jqueryPlugin jquery z dużą gammą parametrów. Jeżeli należysz do grona osób, które...
Aplikacja internetowa dla PolarisPrezentacja aplikacji internetowej dla stowarzyszenia astronomicznego. Zbieranie danych i raportowanie...
( zobacz wszystkie: 4 )

Chmura tagów

informacje(9) ciekawostki(7) html(5) programowanie(5) statystyki(4) akcje(4) mysql(3) javascript(2) jquery(2) php(2) kolory(2) ( zobacz wszystkie: 15 )

Komentarze

Trzeba by sprawdzić Twoją teorię spiskową ;pja tu widz? pewną zależność...taka... sinusoida :D:DWielkie dzięki. Opisane w idealny sposób!Tutorial łatwy, szybki i przejrzysty. Wielkie dzięki za podzielenie się swoją wiedzą. no to ja mam las za oknem ;) Po za tym zielony jest w czołówce \"najulubieńszych\" kolorów obok niebieskiego...
polecam
moje top 5
kontakt