W tym wpisie na prostym przykładzie pokaże Ci jak napisać własną wtyczkę w jQuery. Wtyczka będzie kolorowała tekst wewnątrz znacznika do którego będzie się odnosiła. Oczywiście aby to zrobić nie ma sensu pisać wtyczki, ale można na tym przykładzie szybko nauczyć się jak tworzyć własne, bardziej zaawansowane pluginy.
Zaczynajmy 🙂
Zacznijmy od utworzenia pliku z naszą wtyczką. Przyjęło się że plik z wtyczką nazywamy w ten sposób: jquery.nazwawtyczki.js. Możemy nazwać ten plik jak chcemy, ja jednak będę się trzymał tego zwyczaju i utworzę plik o nazwie jquery.colorit.js. Na razie niech będzie pusty. Utwórzmy teraz prosty szkielet strony.
Struktura HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>colorIt - wtyczka jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.colorit.js"></script>
<script>
$(document).ready(function() {
});
</script>
</head>
<body>
<h1 class="naglowek">Nagłówek 1</h1>
<h2 class="naglowek">Nagłówek 2</h2>
<h3 class="naglowek">Nagłówek 3</h3>
<h4 class="naglowek">Nagłówek 4</h4>
<h5 class="naglowek">Nagłówek 5</h5>
<h6 class="naglowek">Nagłówek 6</h6>
</body>
</html>Jest to standardowa struktura strony. W szóstej linijce podpinamy bibliotekę jQuery a za nią plik z naszą wtyczką. Dlatego w tej kolejności? Aby nasz plik działał musi mieć dostęp do funkcji biblioteki jQuery – dlatego musimy ją załadować jako pierwszą.
Poniżej umieszczamy parę znaczników <script> wewnątrz której umieszczamy funkcję ready wywołaną na całym dokumencie. Oznacza to, że kod zawarty pomiędzy znacznikami { } wykona się dopiero gdy strona będzie na to gotowa (załadowana zostanie struktura DOM). Można to umieścić w osobnym pliku z całym kodem javascript jednak dla tak prostego przykładu nie ma sensu tego robić. Przejdźmy do pliku jquery.colorit.js i zacznijmy pisanie naszej wtyczki 🙂
Szkielet wtyczki:
(function($) {
$.fn.colorIt = function() {
// ciało naszej wtyczki
}
}(jQuery));Dzięki umieszczeniu naszej wtyczki wewnątrz (function() {}) zabezpieczamy wtyczkę przed kolizjami. Umieszczając znak $ dajemy pluginowi dostęp do funkcji jQuery. Sprawmy teraz by nasza wtyczka coś robiła.
Gotowa wtyczka:
(function($) {
$.fn.colorIt = function(color) {
this.each( function() {
$(this).css("color", color);
});
}
}(jQuery));Dzięki zapisowi this.each() stosujemy wtyczkę na każdym elemencie o podanym selektorze więc jeśli zastosujemy naszą wtyczkę na elemencie h2 to zmieni się kolor każdego nagłówka h2. W parametrze podajemy funkcję anonimową wewnątrz której odwołujemy się za pomocą $(this) do tego konkretnego elementu i przy pomocy funkcji css() nadajemy mu color równy podanemu przez nas w parametrze.
W tym momencie nasza wtyczka jest gotowa i będzie zmieniała kolor tekstu na ten podany w parametrze. Aktywujmy teraz naszą wtyczkę. W tym celu musimy dodać kod wewnątrz stworzonej wcześniej funkcji ready.
<script>
$(document).ready(function() {
$('.naglowek').colorIt('green');
});
</script>
Tekst zmienił kolor, więc nasza wtyczka działa. Moglibyśmy na tym skończyć, ale zastanówmy się co się stanie gdy użytkownik nie poda parametru przy wywołaniu colorIt. Oczywiście nie zostanie przypisany żaden kolor. Warto byłoby zdefiniować jakiś kolor, na wypadek gdyby użytkownik wtyczki nie podał żadnego. Przydaje się to szczególnie w bardziej rozbudowanych wtyczkach, w których chcemy podać jakieś początkowe wartości (np. długość animacji elementu, rodzaj animacji itd.). W takim wypadku chcemy dać użytkownikowi możliwość nie podawania parametrów i zastosowania domyślnych ustawień wtyczki.
Skoro już to wiemy to zmodyfikujmy teraz naszą wtyczkę 🙂
(function($) {
$.fn.colorIt = function(options) {
var settings = $.extend( {
color : 'red'
}, options);
return this.each( function() {
$(this).css("color", settings.color);
});
}
}(jQuery));Zaczynamy od zmiany nazwy parametru funkcji z color na options. Nie jest to wymagane, ale jest to dobra praktyka, szczególnie gdy mamy kilka-kilkanaście różnych opcji do zdefiniowania. Do zmiennej settings przypiszmy metodę extend wewnątrz której podajemy tablicę z naszymi początkowymi ustawieniami. W tym przypadku będzie tylko jedna opcja którą nazwałem po prostu color i nadałem jej początkowy kolor – czerwony. Właśnie taki kolor uzyska tekst gdy nie podamy żadnych parametrów przy wywołaniu wtyczki.
Wywołajmy teraz naszą wtyczkę tą linijką:
$('.naglowek').colorIt({color : 'green'});Zauważmy, że w tym przypadku w parametrze podajemy tablicę, wewnątrz której ustawiamy nasz nowy kolor. Dzięki takiemu zapisowi nasz tekst stanie się zielony.
Jak to działa? Podając parametr przy wywołaniu wtyczki tablica zostaje umieszczona w zmiennej options. Zauważmy że jako drugi parametr metody extend podajemy właśnie zmienną options. Ten zapis sprawia, że jeśli podaliśmy parametr to zawartość zmiennej settings zostaje podmieniona na zawartość tablicy options. Jeśli nie podaliśmy to nie następuje żadna podmiana i wykorzystane są ustawienia początkowe.
Poniżej, wewnątrz funkcji css() podajemy po prostu element color z tablicy settings.
I to już wszystko, nasz własny plugin jQuery już działa. Zachęcam do napisania w ramach ćwiczeń jakiejś prostej wtyczki aby utrwalić sobie zdobytą wiedzę. Pozdrawiam 🙂
Przewijanie ekranów z wtyczką One Page Scroll
Przeczytaj artykuł
Tworzenie gry przeglądarkowej – #5 Rejestracja i logowanie
Przeczytaj artykuł
Oznacza to że kod wykona się kiedy zostanie załadowana struktura DOM. Z Twojej strony kiepskie wyjaśnienie.
To prawda, ale moim zdaniem napisanie „gdy strona będzie na to gotowa” mówi o wiele więcej początkującym, a osoba zaawansowana (jak ty) i tak będzie wiedziała o co chodzi. Mimo to postaram się żeby definicja, którą podałeś też znalazła się we wpisie. Pozdrawiam : )