Przejdź do głównej zawartości

jQuery plugin - własna wtyczka od podstaw

W tym krótkim wpisie, przedstawię jak szybko można napisać własny plugin do jQuery. Z racji tego, iż jest to obecnie jeden z najbardziej popularnych frameworków JavaScriptowych, znajomość tworzenia rozszerzeń jest bardzo przydatna.

Nasz plugin

W celu uniknięcia tworzenia sztuki dla sztuki, stworzona wtyczka będzie coś robić. Jej zadaniem będzie zmiana tła w środku elementu, po kliknięciu na tym obiekcie. Jako parametry przyjmować będzie dwa kolory, które co kliknięcie będą się zmieniać.

Baza

Każdy plugin dla jQuery składa się z bazy, która zawsze jest identyczna dla każdej wtyczki, bez względu na to w jaki sposób będzie dalej tworzona.

Pierwszym krokiem jest dostarczenie naszemu pluginowi dostępu do $ oraz zapewnienie unikalności nazw i niekolidowania z innymi wtyczkami:


(function($) {
	//baza pod plugin
})(jQuery	

Teraz przyszedł moment aby dodać do kodu funkcję, w której nasz plugin będzie działał:


(function($) {
	$.fn.changeColor = function() {
		//ciało naszego pluginu
	}
})(jQuery);

Na tym etapie nazywamy nasz plugin. W tym przypadku będzie to changeColor. Już w tym momencie nasz plugin istnieje, mimo, iż nic nie robi można go wywołać:

$("div").changeColor();

Łańcuchowość

Pluginy jQuery opierają się na zasadzie, iż każda wtyczka zwraca przetworzony/wybrany łańcuch obiektów dalej. Dzięki czemu można pisać ciąg poleceń np.:


$("div").attr("data-type","slider").addClass("slider");

W powyższym przykładzie, ze strony wybieramy wszystkie elementy div i ustawiamy im atrybut data-type na slider . Dzięki temu, iż attr zwraca łańcuch divów z dodanym atrybutem, możemy ponownie przetworzyć dane i np. dodać do każdego diva klasę slider .

Łańcuchowośc zapewnimy, dzięki temu, iż plugin zwracać będzie element this , czyli dane które otrzymał do przetworzenia:


(function($) {
	$.fn.changeColor = function() {
		return this.each(function() {
		  //ciało naszego pluginu
		});	
	}
})(jQuery);

Parametry wejściowe

Nasz plugin powinien przyjmować parametry wejściowe, zatem należy zapewnić taką możliwość:


(function($) {
	$.fn.changeColor = function(options) {
	
		//parametry wejściowe
		var settings = $.extend( {
		  colorFirst : 'Red',
		  colorSecond : 'Green'
		}, options);
		
		return this.each(function() {
		  //ciało naszego pluginu
		});	
	}
})(jQuery);

Dzięki temu szybkiemu zabiegowi, uzyskaliśmy kilka ważnych rzeczy. Nasz plugin uzyskał możliwość inicjalizacji z parametrami wejściowymi. colorFirst oraz colorSecond mają odpowiadające wartości domyślne, które mogę być zmienione na te które poda użytkownik. Możliwe wywołania:


$("div").changeColor({ colorFirst : 'Blue', colorSecond : 'Black' });
//parametry domyślne
$("div").changeColor();
//ustawienie tylko jednego parametru
$("div").changeColor({ colorSecond : 'Yellow' });

Metody publiczne i prywatne

Kolejny krok to dodanie metod. Jeśli nasza wtyczka ma być prosta można spokojnie zacząć kodować w ciele głównej metody pluginu. Jednakże, jeśli kod ma być bardziej złożony i dodatkowo udostępniać na zewnątrz metody, warto jeszcze chwilę poczekać.

Poniższy schemat jest zalecany, w przypadku pluginów posiadających publiczne metody. Dzięki takiemu stworzeniu metod, nie marnujemy niepotrzebnie nazw w obrębie jQuery.


(function($) {
	$.fn.changeColor = function(options) {
		
		//metoda prywatna
		function onClick(event) {
			//ciało metody prywatnej
		}
		
		//metody publiczne
		var methods = {
			swapColors: function() {
				//wystawiona metoda
			},
			destroy: function() {
				//destruktor 
			}
		};
		
		return this.each(function() {
			//ciało naszego pluginu
			if(methods[options]){	
				//wywołana metoda publiczna
				return methods[options].apply( this, arguments );
			}
			else if (typeof options === 'object' || ! options ){
				//wywołany konstruktor
				var settings = $.extend( {
				  colorFirst : 'Red',
				  colorSecond: 'Green'
				}, options);
				//inicjalizacja pluginu
				return;
			}
			else{
				//bład
				$.error('changeColor: no method: '+ options);
			} 
		});	
	}
})(jQuery);					
	

Powyżej stworzono obiekt methods , zawierający metody publiczne. SwapColors jest publiczną metodą wystawioną na zewnątrz. Taki zabieg powoduje, iż do metody odwołujemy się podobnie jak ma to miejsce w pluginie jQuery UI:


$("div").changeColor('swapColors');

Dodatkowo prywatna metoda onClick będzie użyta jedynie wewnątrz wtyczki.

Destruktory

Pisząc plugin do jQuery, warto zadbać o to by można było nasz plugin "odinstalować". Należy zatem dodać metodę która będzie sprzątała po naszej wtyczce. W takim destruktorze warto zadbać o to, by znalazło się w nim usunięcie np. eventów, które podczepiliśmy podczas inicjalizacji lub innych danych wrzuconych do htmla. Do powyższego kodu dołączono metodę destroy , wywołuje się ją podobnie jak inne publiczne metody.

Dodawanie funkcjonalności

Możemy zatem przystąpić do dodawani funkcjonalności do naszego pluginu. Na początek dodamy inicjalizację wtyczki:


//inicjalizacja pluginu
$this = $(this);
data = $this.data("changeColor");
if(!data)
{
	data = $this.data("changeColor", settings);
	$this.bind("click", onClick);
}
$this.css("background-color", settings.colorFirst);
data.first = true;

Powyższy kod sprawdza, czy przypadkiem plugin dla danego elementu nie jest już jest dodany. W tym przypadku sprawdzić można, czy element posiada dane pod wybranym kluczem: changeColor . W prosty sposób unikamy podwójnego inicjalizowania tego samego elementu, a także jest to świetny sposób na przechowanie parametrów wejściowych. Do elementu, podczepiliśmy metodę onClick , która będzie wywoływana dla eventu odpowiadającego za kliknięcie myszką. Zmienna *first * będzie informować, o tym który kolor mamy ustawić jako tło.

Przyszła kolej na dodanie ciała dla funkcji onClick , która podmienia tło dla klikniętego elementu;


//ciało metody prywatnej
$this = $(this);
data = $this.data("changeColor");
data.first = !data.first;
$this.css("background-color", 
	data.first ? data.colorSecond : data.colorFirst);
return true;

Dodajmy jeszcze kod dla publicznej metody SwapColors , która zamienia kolejnością tła:


//wystawiona metoda
$this = $(this);
data = $this.data("changeColor");
tmp = data.colorSecond;
data.colorSecond = data.colorFirst;
data.colorFirst = tmp;

Ostatni krok to uzupełnienie metody dla destruktora:


//destruktor
$this = $(this);
$this.unbind("click");
$this.css("background-color","");
$this.removeData("changeColor");

Gdy zechcemy usunąć plugin z elementu wywołujemy metodę destroy . Pozbywamy się eventa dla kliknięcia na element i czyścimy wszelkie dane.

Nasz gotowy plugin


(function($) {
	$.fn.changeColor = function(options) {
		
		//metoda prywatna
		function onClick(event) {
			//ciało metody prywatnej
			$this = $(this);
			data = $this.data("changeColor");
			data.first = !data.first;
			$this.css("background-color", 
				data.first ? data.colorSecond : data.colorFirst);
			return true;
		}
		
		//metody publiczne
		var methods = {
			swapColors: function() {
				//wystawiona metoda
				$this = $(this);
				data = $this.data("changeColor");
				tmp = data.colorSecond;
				data.colorSecond = data.colorFirst;
				data.colorFirst = tmp;
			},
			destroy: function() {
				//destruktor
				$this = $(this);
				$this.unbind("click");
				$this.css("background-color","");
				$this.removeData("changeColor");	
			}
		};
		
		return this.each(function() {
			//ciało naszego pluginu
			if(methods[options]){	
				//wywołana metoda publiczna
				return methods[options].apply( this, arguments );
			}
			else if (typeof options === 'object' || ! options ){
				//wywołany konstruktor
				var settings = $.extend( {
				  colorFirst : 'Red',
				  colorSecond: 'Green'
				}, options);
				//inicjalizacja pluginu
				$this = $(this);
				data = $this.data("changeColor");
				if(!data)
				{
					data = $this.data("changeColor", settings);
					$this.bind("click", onClick);
				}
				$this.css("background-color", settings.colorFirst);
				data.first = true;
				return;
			}
			else{
				//bład
				$.error('changeColor: no method: '+ options);
			} 
		});	
	}
})(jQuery); 


Jak widać tworzenie pluginów do jQuery nie jest trudne. A zatem, do dzieła! :)

Komentarze

Popularne posty z tego bloga

Oni migają tymi kolorami w sposób profesjonalny. Narodziny gamedevu z ducha demosceny w Polsce - Piotr Marecki i Tomasz TDC Cieślewicz, recenzja książki

Tytuł książki jest mocno rozbudowany i zapewne pierwsze spojrzenie na okładkę może odstraszyć potencjalnego klienta, jednakże, warto dać szansę tej pozycji. Zaskoczeń jest kilka, chociaż nie tylko tych pozytywnych. Zatem przejdźmy do krótkiej recenzji "Oni migają tymi kolorami w sposób profesjonalny". TDC - Demoscena, Atari, Mirage i piractwo w Polsce Książka jest zbiorem historii opowiadanych przez Tomasza TDC Cieślewicza. Swoje przygody z IT zaczął w 1988 roku, kiedy to otrzymał Atari 800 XL. Od 1989 roku związany był z Mirage i jako jeden z najmłodszych tworzył gry na rynek polski. Był również współpracownikiem "Bajtka" i członkiem redakcji "Atari Magazynu". Bardzo mocno związany z demosceną Atari, gdzie tworzy do dziś. Zaangażowany w szkolenia i warsztaty z programowania. Obecnie redaktor Atarionline.pl Przyznaję, że wcześniej nie słyszałem o Tomaszu Cieślewiczu, ale po przeczytaniu tej książki śmiało można powiedzieć, że dziś zapewne byłby fre

Comet - MVU w MAUI bez XAML, czyli próba dogonienia Fluttera

MAUI jest już z nami od kilku miesięcy i jest bardzo mocno promowane przez Microsoft. Jest to niezmiernie ciekawa opcja do pisania aplikacji pod różne systemy i środowiska. O ile jednak w przypadku pisania aplikacji desktopowych czy webowych, taki MAUI jest ciekawostką dla deweloperów .NET, to w przypadku świata mobilnego jest zupełnie inaczej. Rok temu w listopadzie 2021 pisałem o tym jak tworzenie mobilnych aplikacji w .NET jest nie lada wyzwaniem. Oficjalne zakończenie wsparcia dla Xamarin.Forms i przedstawienie alternatywy w postaci MAUI, które w 2021 roku nie doczekało się premiery, powodowało ból głowy mobilnych deweloperów .NET. Mimo, iż w maju 2022 roku MAUI miało oficjalną premierę, to nadal sytuacja nie jest wcale lepsza.  Samo MAUI nie jest jeszcze narzędziem, które można uznać w 100% gotowe na to, aby pójść z nim na produkcję. Wiele jeszcze mniejszych niedoróbek i problemów spędza sen z powiek deweloperów mobilnych w .NET. Mimo, że dostaliśmy wersję finalną, nie jest to we

Drukarka Epson EcoTank – napełniamy tusze, analiza w szczegółach (Epson EcoTank L3110)

Drukarka dostarczona od Epsona do testów jest już u mnie jakiś czas. Jest ona reklamowana jako jedno z najtańszych urządzeń na rynku w kwestiach eksploatacyjnych. We wcześniejszym wpisie ( Tanie, cebulowe drukowanie z Epson EcoTank L3110 ) przedstawiłem kilka suchych faktów odnośnie samej drukarki. Dziś przyszedł czas na trochę praktyki. W pierwszej kolejności zobaczymy jak napełnia się tuszami ów sprzęt i czy nie sprawa to problemów natury technicznej lub "logistycznej". Epson EcoTank - sposób na tanie i dobre drukowanie EcoTank to całkiem ciekawy sposób na drukowanie bez kartridży. Zamiast tego w drukarce znajdziemy 4 przezroczyste pojemniki na tusz (Czarny, Magneta, białY, Cyan). Pojemniki napełniamy tuszem z butelki. W takim przypadku oryginalny tusz kosztuje ok. 27 zł (65 ml), co jest niezmiernie atrakcyjne cenowo. Napełnienie jest szybkie, a co ważne nie upaćkamy się w tuszu, gdyż każda z buteleczek ma blokadę (kuleczka w szyjce) przed wylaniem. Dodatkowo nie przele

Wojny konsolowe, Blake J. Harris — recenzja książki (SEGA, Nintendo i batalia, która zdefiniowała pokolenie)

Nie ma co tu owijać w bawełnę i nudzić wstępem na siłę. Książka jest świetna i jeśli interesujesz się grami retro lub ogólnie historią przemysłu rozrywkowego, to jest to pozycja wręcz obowiązkowa. Nawet więcej, warto znać omawianą książkę jako szersze spojrzenie na obecną branżę gier, a uwierzcie, że znajdziecie wiele analogii do obecnych poczynań tuz świata growego.  Sega od środka Książka nie jest cieniutką pozycją, a całkiem opasłym tomiskiem  w twardych oprawach. Ma ona prawie 600 stron i dość niewielką czcionkę, więc jest tu sporo do poczytania. Po środku mamy kilkadziesiąt kolorowych zdjęć z tamtych lat, które ogląda się zupełnie inaczej podczas lektury, wiedząc już kim są dane osoby na fotografiach.  Książka opisuje Segę od momentu przejęcia przez  Toma Kalinske  posady CEO Sega of America w roku 1990, a także wcześniejsze perypetie gigantów branży rozrywkowej w latach 80-tych. Początek Wojen konsolowyc h zaczynamy od poznania Toma na wakacjach na Hawajach, gdzie s

222 polskie gry, które warto znać - Marcin Kosman, recenzja książki

Marcin Kosman dał się poznać jako autor ciekawej pozycji o polskim game devie: " Nie tylko Wiedźmin. Historia polskich gier komputerowych ". Po pięciu latach wraca z nową książką, również związaną z polską branżą grową, ale w zupełnie innej formie. 222 polskie gry "222 polskie gry, które warto znać" to wyjątkowa książka. Co więcej, to nie jest książka jako taka, a bliżej jej do albumu. W języku angielskim funkcjonują one jako tzw. "Coffee table books", czyli książki/albumy bardziej do oglądania, niż do czytania. Tak jest właśnie z omawianą pozycją. W twardych okładach, w formacie B5 i na pięknym, kredowym papierze, znalazło się 222 polskich gier z lat 1983-2019. Każda strona to duża grafika, z kilkoma zdaniami o grze od autora książki, a czasem również dodatkowy, akapitem od osób tworzących dany kawałek softu. Wybór gier jest na tyle szeroki, że można śmiało powiedzieć, iż wybrano faktycznie najbardziej znaczące i rozpoznawalne tytuły. Jako,

Windows Phone — pierwsze uruchomienie, wstępna konfiguracja oraz garść porad

Dostałeś urządzenie z Windows Phone pod choinkę, ale nie miałeś nigdy styczności z systemem mobilnym od Microsoftu? Chcesz dowiedzieć się jak skonfigurować smartfon, co warto zainstalować oraz przeczytać garść porad? Jeśli odpowiedziałeś choć raz "TAK", to ten wpis jest właśnie dla Ciebie :) Zapraszam :) Każdy z nas po pierwszym uruchomieniu telefonu zastanawia się jak szybko i optymalnie skonfigurować urządzenie. Dodatkowo dochodzi aktualizacja najważniejszych składników systemu oraz instalacja niezbędnych aplikacji. W tym poradniku przedstawię jak poprawnie przejść przez te zagadnienia i jak szybko skonfigurować urządzenie z Windows Phone. Używany smartfon = reset ustawień Jeśli kupiliśmy używany telefon warto zrobić reset ustawień. Nie ma sensu cofania zmian wprowadzonych przez kogoś, co więcej nie zmienimy konta Microsoft na własne. Wyczyszczenie smartfonu dokonamy przez menu Ustawienia => zakładka aplikacje=> informacje i klikając na przycisk zresetuj t

Duke Nukem Forever - wydany!

czerwca zakończyła się 14 letnia męczarnia/produkcja gry Duke Nukem Forever! :) Wreszcie nasze spragnione palce, z odciśniętymi klawiszami WSAD, mogą zanurzyć się w świat Dukea... Tak chyba by było, gdyby gra wyszła z 8-10 lat temu. Powiem szczerze, że jakoś nie zelektryzowała mnie wiadomość o wydaniu DNF, ale zacznijmy od początku... One man, one world, one million babes to save!! Pierwsze dwie części ('91 i '93 r.) były typowymi platformówkami. Były miłe i bardzo grywalne jak na tamte czasy. Bardzo dobre i porządne produkcje. Jednakże dopiero trzecia część Duke Nukem 3D, zapoczątkowała Dukomanie trwającą do dziś. Gra wydana w 1996 r. była strzałem w dziesiątkę! Świetna jak na tamte czasy grafika (mimo modeli 2D udających 3D) i naprawdę świeży humor, tworzyły grę godną zagrania i wciągnięcia się w nią na dłuuugie godziny. Jeśli dodać do tego szczyptę erotyzmu i niespotykaną wówczas interakcję z otoczeniem, wyłania się nam gra, która zawładnęła światem na długie

Programowanie pod WP7.5, czyli Windows Phone od kuchni

Po miesiącach szaleństw z Windows Phone, nieskończonej liczby instalacji i deinstalacji, kilku flashowaniach, grzebaniach się w MFG, aktualizacjach (udanych i tych zakończonych niepowodzeniem), przyszedł wreszcie czas, ażeby "spoważnieć" :P i napisać coś własnego na Windows Phone 7.5. Od razu napisze, że jest kilka problemów (i to wcale nie natury programistycznej). Dla kogo? Chcący zacząć programować dla Windows Phone 7(.5) powinniśmy umieć "na dzień dobry" podstawy C#/VB oraz podstawy Silverlighta lub XNA jeśli zechcemy tworzyć gry (także na XBox360!). Aplikacje pisane są w Visual Studio 2010 for Windows Phone. W Tym krótkim przewodniku postaram się opisać jak zacząć przygodę z pisaniem aplikacji na Windows Phone. A zatem, do dzieła! Visual Studio 2010 for Windows Phone Jak już wspomniałem przygodę rozpoczynamy od instalacji Visual Studio 2010 for Windows Phone http://www.microsoft.com/visualstudio/en-us/products/2010-editions/windows-phone-developer-too

Nokia Pocztówka - wyślij za darmo pocztówkę ze swojej Lumii!

Zapewne słyszeliście o aplikacjach, które pozwalają na wysłanie ze smartfona własnej wizytówki. Całość sprowadza się często do wybrania zdjęcia i zapłacenia z wydruk oraz przesyłkę. Polski oddział Nokii postanowił pójść o krok dalej i ponownie użytkownicy Lumi z Windows Phone mogą mieć powody do zadowolenia i czuć się wyróżnieni. Za darmo? Tak! Zatem, jeśli posiadacie Nokię Lumię z Windows Phone (zarówno w wersji 7. jak i 8.) szybciutko pobierajcie ze Sklepu Windows Phone aplikację Nokia Pocztówka . Skąd ten pospiech? Nokia (odział w Polsce) zorganizował wzorową akcję promującą Windows Phone, ale przede wszystkim ich Lumie. Otóż każdy posiadacz Nokii, może za darmo pobrać aplikację Nokia Pocztówka . Dzięki niej za darmo wyślemy pocztówkę ze zdjęciem z Lumi! Bez żadnych ukrytych kosztów, wszystko za free :) Całość sprowadza się do wybrania zdjęcia z albumu lub bezpośrednio z aparatu. Następnie możemy dodać jeden z pięćdziesięciu filtrów i wykadrować grafikę. Teraz prz

Licznik Blogowy - wtyczka do Chrome/Opery/Firefoxa dla każdego Blogera portalu [aktualizacja 08.04.14 (nowe funkcjonalności)] 0.6

Wielu z nas zapewne spogląda często na swoją listę Popularne wpisy , która pokazuje najczęściej komentowane publikacje na naszym prywatnym blogu. Cóż, można śmiało powiedzieć, że równie ważnym czynnikiem popularności wpisu jest również ilość wyświetleń. Niestety, aby zobaczyć licznik wyświetleń musimy wejść ręcznie do każdego wpisu z okna edycji i tam wyszukać tej informacji. Nie jest to ani szybkie, ani optymalne. Nie jest łatwo znaleźć wpis, który jest najbardziej popularny, gdy mamy ich wiele. Przeszukiwanie wszystkich publikacji i ręczne wybieranie tych najbardziej poczytnych jest baaardzo niewygodne. Oczywiście, postanowiłem coś z tym zrobić i tak powstał... Licznik Blogowy dobreprogramy.pl Licznik Blogowy dobreprogramy.pl to wtyczka do Chroma, nowej Opery i Firefoxa, niezbędna dla każdego blogera na portalu. Dzięki niej w prosty sposób wyświetlimy: listę najczęściej wyświetlanych własnych wpisów z ilością wyświetleń na dany czas datę modyfikacji wpisu spra