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

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,

Licznik Blogowy - wersja 0.6, czyli własne statystyki i wykresy tuż pod ręką

Zapewne wielu z Was pamiętam, a może i używa:) , mojej wtyczki Licznik Blogowy do najpopularniejszych przeglądarek, skierowanej do blogerów na portalu dobreprogramy. Jeśli ktoś nie kojarzycie, to w skrócie: Licznik Blogowy to wtyczka do Chroma/Opery/Firefoxa. Za jej pomocą przejrzycie szybko pełne statystyki swoich wpisów na blogu. Lista wpisów może być sortowana wg: ilości wyświetleń, ilości komentarzy, daty publikacji i adnotacji moderacji. Łatwo znajdziecie publikacje, oznaczone przez moderatorów, a to wszystko w estetycznej i miłej formie, dostosowanej do wybranej skórki na blogu. Licznik Blogowy 0.6 - czas na własne wykresy! :) Ostatnia odsłona wtyczki przyniosła ciekawe refleksje po rozmowie z szanownym Panem Mordziem. Zaproponował on, aby wtyczka mogła generować wykresy na podstawie zebranych danych. Pomysł wydał mi się niezmiernie interesujący, stąd też obecna aktualizacja (0.6) przynosi możliwość tworzenia wykresów, opierając się na zabranych danych. Używani

Oprogramowanie z czasopism - wątpliwa przyjemność?

Środek tygodnia, w skrzynce pocztowej pojawia się świeżutki numer Chipa. Jak zawsze szybko rozrywam folie (srut!), wyszukuję płytę(y) dołączonej do magazynu, gdzieś ukrytej pomiędzy stronami. Sukces! Tutaj już postępuje delikatniej, opuszkami palców dostaję się powoli do spoiwa łączącego tekturową kopertę DVD z kartką. Już tylko chwila dzieli mnie od odseparowania DVD od magazynu.... (trach)... niech to! Kartka się porwała, no cóż, nie pozostaje mi nic innego, jak brutalnie wyrwać to coś razem ze stroną. Z drugiej strony i tak pewnie jest reklama (ups... nie tym razem :P). W taki sposób, chcąc pozbyć się zbędnej (?) płyty DVD z Chipa, doszedłem do wniosku, iż od kiedy ponownie zaprenumerowałem czasopismo (na dwa lata, a było to już hmm, prawie dwa lata temu?), ani razu nawet nie włożyłem płyty do czytnika! W sumie przeglądając magazyny często zwracamy uwagę na dodatki do czasopism. W sieci jest wiele stron, których jedynym celem są owe dodatki ( http://www.markolf.pl/ , http://ww

"Amerykański sen" Microsoftu, na którym traci Windows Phone

Do poniższych przemyśleń doszedłem w ostatnim czasie, po publikacji danych na temat regionalizacji w ekosystemie Windows Phone. Są to dwie, ważne informacje. Szczególnie ważne dla nas, użytkowników z Polski (jak i wszystkich spoza USA). Microsoft jako cel postawił sobie zawojowanie rynku USA. To widać od początku powstania Windows Phone. Cały system nakierowany jest przed wszystkim na rynek amerykański. Jak to wygląda z punktu widzenia Polaków oraz jak rozwija się Windows Phone w USA? Windows Phone 7.x - pozdrawiamy użytkowników spoza USA Otóż urządzenia z Windows Phone 7 nie miały nawet polskiego interfejsu, czy klawaitury. Co było dość uciążliwe z oczywistych względów. Te pojawiły się dopiero rok po premierze, wraz z wydaniem dużej aktualizacji do 7.5 tzw. Mango . Oczywiście to nie koniec przykładów jak Microsoft traktuje klientów spoza USA. Linia Windows Phone 7.x ma nadal kilka małych "dodatków", które świadczą jak producent mobilnych okienek podchodzi do klien

Zdrowe ciało, zdrowy duch, zdrowy programista — przegląd aplikacji

Dziś w temacie rozszerzenia do Visual Studio, ale bardziej od strony tego co już jest na rynku i z czego można już korzystać od święta . Tak jak już pisałem , Healthy with Visual Studio będzie wtyczką do Visual Studio, która zadba o przerwę i czas pracy. Może uda się również dorobić jakieś proste ćwiczenia, do rozluźnienia spiętych mięśni. Zrób sobie przerwę i poćwicz Obecnie na rynku jest bardzo duża liczba aplikacji, które pomogą w pracy przy komputerze. 6 lat temu przedstawiłem kilka programów , które do dziś dzień są liderami w swojej niszy. Postaram się w tym wpisie przedstawić je tutaj ponownie z omówieniem kilku nowych, które wydają się niezmiernie ciekawe. Workrave Program legenda. Chyba jedna z najbardziej rozbudowanych i znanych aplikacji. Multiplatformowa, niewielka, a jednocześnie bardzo pomocna. Od ostatniego wpisu w 2011 roku niemalże nic się nie zmieniło. Mamy zatem monitoring pracy z wymuszaniem przerw (czasem dosłownie!), wizualizację ćwiczeń czy

HotZlot 2013 - nie regulujcie odbiorników

HotZlot 2013 już za około miesiąc. Wszyscy zapewne czekają na zaproszenia i rejestrację. Redakcja skutecznie odwraca naszą uwagę od HotZlotu konkursem związanym z Office 365, ale my wiemy, że coś się szykuje ;) Pod adresem http://2013.hotzlot.pl/ znajduje się niby niewiele, ot niewinny błąd: Szybki rzut okiem i już wiemy, że Docent na IIS już stworzył katalog aplikacji z conetentem w D:\IISContent\hotzlot.pl-2013 . Ograniczenie na adres IP nie pozwoli nam na otworzenie strony. Jednakże wystarczy kilka kliknięć w IIS i strona zostanie udostępniona dla ogółu. Zatem, na co czekacie droga Redakcjo? ;) Klikamy tutaj: http://www.hotzlot.pl/ (obecnie jeszcze informacje o HotZlocie 2012) - może licznik wyświetleń musi osiągnąć jakiś poziom, aby pojawiła się informacja o HotZlocie 2013? ;) Pierwszy przeciek! :P Nasz znany bloger i waleczny komentator gowain, zdobył screen z jeszcze nieopublikowanej wersji strony na HotZlot 2013! Co więcej, w kwestii przecieku wypowiedziała si

The Humble Indie Bundle 6

Po przerwie powraca ponownie paczka The Humble Indie Bundle . Pakiet oznaczony jest numerkiem 6, nie posiada żadnego podtytułu, a zatem mamy do czynienia z kolejną pełnoprawną wersją The Humble Indie Bundle . O The Humble Indie Bundle słyszał zapewne każdy, w wielkim skrócie - kupujemy gry za dowolną kwotę. Wpłacamy powyżej średniej, dostajemy dodatkową grę. W połowie akcji dochodzi często bonusowy tytuł. Całość pieniędzy idzie na cele charytatywne i/lub dla developerów. Tyle teorii, cóż otrzymujemy w tej edycji? Torchlight Metacritic: 83/100 Wciągający hack&slash, stworzony przez osoby, pracujące wcześniej nad serią Diablo. Gra nastawiona jest na walkę z potworami, eksplorację terenu i zbieranie wszystkiego co znajdziemy na swojej drodze. Styl graficzny może przypominać Diablo III, zaś sama rozgrywka klasyczne gry z tego gatunku. Bardzo dobry slasher na długie zimowe wieczory. Niedawno wyszła kontynuacja, opatrzona numerkiem dwa. [youtube=http://www.youtube.com/wat

jQuery - miłość od pierwszego wejrzenia!

[code].......##..#######..##.....##.########.########..##....## .......##.##.....##.##.....##.##.......##.....##..##..##. .......##.##.....##.##.....##.##.......##.....##...####.. .......##.##.....##.##.....##.######...########.....##... .##....##.##..##.##.##.....##.##.......##...##......##... .##....##.##....##..##.....##.##.......##....##.....##... ..######...#####.##..#######..########.##.....##....##... [/code] jQuery - write less, do more Chciałbym podzielić sie z Wami, pięknem jQuery [1] (dalej jq). Kilka miesięcy temu skandyn dodał wpis , w którym przedstawił pobieżnie, jak zrobić prosta galerię z jq, bez zagłębiania i wstępnej prezentacji geniuszu jq:). Tutaj chciałbym ogólnie zaprezentować jq, dla niewtajemniczonych (są jeszcze tacy?:)). Czym jest jq? Można powiedzieć, iż jest to biblioteka do Java Script (dalej js), która, pomaga w obsłudze js i drzew DOM. Jednakże robi to w tak finezyjny sposób, iż po pewnym czasie korzystania z niej, dochodzimy do wniosku, i

Zdrowa praca przy komputerze cz. 1 - Aplikacje wspomagające

Każdy z nas spędza przy komputerze pewien czas, prawie każdego dnia. Dla części jest to również narzędzie pracy. Często zapominamy, iż oprócz czystego biurka :) , należy zadbać o to by nie zaszkodzić sobie. W tym króciutkim, pierwszym wpisie o "Zdrowej pracy przy komputerze", chciałbym zacząć od zaprezentowania dwóch bardzo przydatnych aplikacji, zarówno w domu jak i w pracy. F.lux Pierwszą aplikacją jest mały program do oszczędzania naszych oczu podczas pracy w nocy. Ok, w nocy mało kto pracuje przy kompie, ale czytając tekst na jasnym tle przy sztucznym oświetleniu (powiedzmy jakaś żarówka) nasz wzrok bardzo się męczy. Problemem jest duży kontrast, pomiędzy bardzo jasnym wyświetlaniem obrazu przez monitor, a tłem naszego pokoju. Po dłuższej pracy oczy męczą się szybciej, niż przy naturalnym świetle. Przydatny w takich chwilach jest program F.lux [1]. Jego zadaniem jest jedynie (albo aż) dopasowanie jasności monitora, do oświetlenia panującego w pokoju. Aplikacja je