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

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, że przygodę zacząłe…

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żywanie nowej funkcji jes…

Windows Phone 7 w LG E900

Na wstępie dziękuje za zaproszenie na HotZlot. To było niesamowite przeżycie! Możliwość porozmawiania z ludźmi z redakcji i z czytelnikami dobrych programów, których znało się jedynie z xywek/avatarów - bezcenne :) Wpis nigdy by nie powstał, gdyby nie konkurs na Kinecta, gdzie udało mi się wywalczyć w boksie - LG z Windows Phone 7 :) Pozdro dla wszystkich uczestników konkursu :)Pierwsze kroki w Windows Phone 7Windows Phone 7 miałem okazje zobaczyć już w okolicach października/listopada 2010. W większości przeważały opinie, iż jest brzydki i mało intuicyjny. Wówczas po minucie spędzonej z nim, nie można było myśleć inaczej.Teraz mając go już dłużej, dochodzę do wniosku, iż jest on... na swój sposób piękny;) Po pierwszym uruchomieniu widzimy ekran główny z kafelkami. Zaskoczeniem jest, to iż nie ma znanego wszystkim pulpitu jak z Androida. Przypomina to raczej iOS. Tutaj jednak postawiono na przejrzystość i funkcjonalność.Na wstępnie dodam, iż telefon został zaktualizowany do najnowsz…

Humble Voxatron Debut + tanie gry

Ponownie The Humble Indie Bundle atakuje nas świetną promocją.W skrócie czym jest Humble Indie Bundle:kupujesz gry za dowolne pieniądzegry są multiplatformowebrak zabezpieczeńpieniądze idą m.in. na cele charytatywnePod http://www.humblebundle.com/ znajdziecie więcej szczegółów.W nowej odsłonie The Humble Indie Bundle, która obecnie zwie się: Humble Voxatron Debut możemy otrzymać Voxatron, a także jeśli wpłata przekroczy średnią aktualnych wpłat: The Binding of Isaac i Blocks That Matter.VoxatronTytułowa pozycja to strzelanka z rzutem izometrycznym. Grę otrzymujemy w wersji alfa. Jest to jednocześnie pra-premiera. Nie posiada ona jednak jakiś znaczących defektów, przez co można spokojnie grać :) Mamy również gwarancję, iż będziemy dostawać wszelkie aktualizacje i dodatki, jakie otrzyma.Voxatron przy pierwszym uruchomieniu zachwyca, śwetną oprawą muzyczną. Tytułowy motyw z menu, przypomina stare czasy, kiedy muzykę z menu nuciło się jeszcze długo po tym jak wyłączyliśmy grę.Nie sposób …

Nokia Lumia 900 - recenzja najmocniejszego smartfona od Finów

Za nami już prezentacja nowego Windows Phone 8 oraz kilku urządzeń działających pod tym systemem. Takie cuda jak Nokia Lumia 920 / 820, HTC 8X / 8S, czy sporych rozmiarów Samsung Ativ S (4.8 calowy ekran) są marzeniem wielu z nas. Obecnie jednak ceny są dość wysokie (chociaż HTC 8S ma być już za 1300 zł..., tylko to nie Lumia... o czym na końcu tego wpisu), a i dostępność urządzeń na naszym rynku pozostawia wiele do życzenia. Cóż można zrobić w takiej sytuacji? Otóż nic nie stoi na przeszkodzie, aby zakupić jedną z najlepszych słuchawek jakie wyszły w tym roku. Mowa oczywiście o Nokia Lumia 900, która pomimo tego, iż posiada Windows Phone 7, jest niesamowicie warta uwagi. Czym się charakteryzuje? Czy warto ją kupić? Jakie ma wady i zalety? Na te i inne pytania znajdziesz odpowiedź w tym wpisie. Zapraszam!HardwareNokia Lumia 900 jest najwyższym modelem od Finów. Moim skromnym zdaniem, to również najbardziej atrakcyjne urządzenie pracujące na Windows Phone 7, ale o tym za chwilę. "…

Projektor Optoma GT5500+ rzucił mnie na kolana, poważnie...

Będąc na prezentacjach, szkoleniach czy wykładach nieraz zastanawiałem się nad zakupem projektora. Taki rzutnik byłby idealny do oglądania filmów czy grania w gry w domu. Niestety w mieszkaniu nie zawsze jest wystarczająco dużo miejsca, aby móc tak rzutnik postawić w odpowiedniej odległości od ściany. Stąd też temat zakupu projektora odłożyłem na bok, a to błąd...Co to za dziwo?Jakiś czas temu Redakcja portalu szukała osób do przetestowania projektorów krótkiego rzutu. Przyznaję, że nie słyszałem wcześniej o takich cudach i kojarzyłem jedynie rzutniki, które trzeba było umieszczać kilka metrów od ściany i uruchamiać przy zasłoniętych oknach. Zgłosiłem się do testów trochę z ciekawości, trochę z chęci sprawdzenia, jak taki sprzęt sprawi się w mieszkaniu, bez białego ekranu, bez zasłoniętych rolet czy żaluzji. W domu, gdzie miejsca nie ma za dużo na zbędne gadżety i wynalazki.W taki oto sposób w moje ręce trafił do testów rzutnik Optoma GT5500+. Już samo pudełko i promocyjne zdjęcia o…

Ad Mediator, czyli dodajemy wiele sieci reklamowych do aplikacji Windows Phone

Sposobów na zarabianie na aplikacjach mobilnych jest bardzo dużo. Od udostępniania płatnych wersji oprogramowania, poprzez mikropłatności, aż do reklam umieszczanych wewnątrz aplikacji. Ten ostatni element nie wymaga dużego wkładu własnego od programisty, nie zmusza użytkowników do wydawania ciężko zarobionych pieniędzy, a dodatkowo jest możliwy do wdrożenia niemalże w każdym typie aplikacji. Co więcej, reklama może być motorem napędowym do innych płatności. Wystarczy, że umieścimy wersję płatną bez reklam lub dodamy mikropłatność, która wyłączy reklamy.Osoby tworzące aplikacje na Windows Phone w czystym środowisku deweloperskim mają gotową kontrolkę AdControl, która umożliwia proste wyświetlanie reklam Microsoft Advertising. Działa to wyśmienicie, ale jeśli chcielibyśmy dodać inne sieci reklamowe (w celu zwiększenia przychodów poprzez optymalizację reklamodawców do rynku) jak AdMob od Google czy AdDuplex, wówczas mamy nie lada problem.AdMob (Google), AdDuplex, Smaato i inne, mają wł…

Niezbędne, "zakazane" aplikacje do Windows Phone 7.5

Świat Windows Phone i nie tylko, czeka z niecierpliwością na nowe wcielenie systemu w wersji 8. Aby umilić czas, przygotowałem kolejną porcję aplikacji, których nie sposób znaleźć w Marketplace. Przedstawione niżej programy, rozszerzają możliwość konfiguracji Windows Phone, a także dodają nowe funkcje, niezbędne dla części z nas.W skrócie o czym dziś będzie mowa:WinTT - tweakerBlueManager - przesyłanie plików przez BluetoothOrientation Lock - blokowanie autorotacji obrazuWinTTWinTT jest jednym z pierwszych tweakerów jakie powstały na Windows Phone. Oferuje on całkiem pokaźna liczbę opcji, dzięki którym można skonfigurować mobilne okienka. Aplikacja została podzielona na kilka grup, oto krótkie omówienia najciekawszych, dostępnych funkcji:Tweaks - kilka przydatnych opcji do włączenia. Warto zwrócić uwagę na:możliwość zwiększenia ilość zakładek w IEwłączenie dostępu do Marketplace/Muzyki/Wideo podczas synchronizacji z Zunewymuszenie wyszukania aktualizacji dla zainstalowanych aplikacj…

Dysk SSD z Windows - konfiguracja

Wpis chcę zacząć od złożenia podziękowań na ręce Redakcji dobrychprogramów za wyróżnienie "bloger kwartału" i nagrodzenie dyskiem SSD (Kingston SSDNow V+100 96 GB - miodzio). Bardzo dziękuję za docenienie takiego szaraczka jak ja :) Mam nadzieję, że będę miał szansę się wyróżnić (i zasłużyć na wyróżnienie:P) oraz na to, aby zaskoczyć zarówno czytelników dobrychprogramów jak i Redakcję :)Kingston SSDNow V+100 96 GB - to nie jest recenzjaNie chce się powtarzać pisząc recenzję dysku SSD, którą zrobił już wcześniej Ave5 /pozdrawiam %) /. Różnica jest jedynie w większej pojemności.Ten wpis chciałbym poświecić konfiguracji dysku pod Windowsami. Ze względu na to, iż charakterystyka SSD wymusza pewnie działa, które dla dysku HDD nie miałyby sensu, a nawet powodowałyby spadek wydajności. Zanim jednak przejdę do optymalizacji...Krótko dodam kilka spostrzeżeń, odnośnie dysku SSD. Podczas zwykłem pracy, nie czuć przycięć i charakterystycznego dla dysków HDD, doczytywania danych, przy d…

Programistok - Białystok dla programistów i nie tylko

W Białymstoku powstała bardzo ciekawa inicjatywa promująca nowe technologie i trendy w programowaniu - Programistok. (Programistok na Facebooku: http://www.facebook.com/pages/Programistok/237808102923666 )Cykliczne spotkania będą omawiać m.in. programowanie na urządzenia mobilne, testowanie aplikacji, projektowanie interfejsów użytkownika czy pisanie lepszego, czystszego kodu. Każdy zainteresowany może zgłosić swoją propozycjię prezentację (20 - 30 minut).Impreza organizowana przy udziale firmy AmberBit (http://amberbit.com/ )Cele jakie przyświecają Programistokowi:integracja podlaskiego (i nie tylko) środowiska programistów poprzez wymianę pomysłów, doświadczeń wśród wielu różnych technologii związanych z internetem - nie ma narzędzi idealnych, każdy projekt warto rozpatrzyć indywidualniena spotkaniu są różnorodni ludzie, więc dobra okazja na poszukanie nowej pracy lub znalezienie pracownikaspotkanie raz w miesiącu w luźnej atmosferze (Pub Mao, Młynowa 44, http://www.mao.com.pl/ )…