Tworzenie własnego pluginu jQuery
Niewątpliwą zaletą jQuery jest dostępność olbrzymiej ilości pluginów. Za ich pomocą możemy niemal dowolnie rozszerzać możliwości biblioteki oraz uniknąć konieczności ciągłego powtarzania tych samych fragmentów kodu. Stworzenie własnego pluginu jest doskonałym rozwiązaniem w sytuacji gdy dostępne rozwiązania nie spełniają naszych potrzeb.
Kurs Programowania w jQuery
Poznaj najpopularniejszą i niezwykle użyteczną bibliotekę JavaScript Dowiedz się więcej
W poniższym przykładzie stworzymy od zera bardzo prosty plugin, który będzie modyfikował kolor tekstu elementów DOM. Zanim przystąpimy do pracy musimy przygotować prawidłowo strukturę plików. W katalogu naszego projektu tworzymy plik JavaScript naszego pluginu. Nazwiemy go jquery.textcolor.js – zauważmy, że nazwy zazwyczaj rozpoczynamy od słowa jquery a po kropce wprowadzamy właściwą nazwę pluginu. Oczywiście wszystkie pliki muszą być prawidłowo podpięte do dokumentu HTML (plik pluginu, plik biblioteki jQuery itd.).
<script src="js/jquery-2.0.0.min.js">
</script>
<script src="js/jquery.textcolor.js">
</script>
Pracę rozpoczniemy od stworzenia podstawowej struktury pluginu. Do pliku jquery.textcolor.js wprowadzamy następujący kod:
(function($) {
// kod pluginu
}(jQuery));
Taki kod pozwoli nam zamknąć zmienne pluginu w prywatnym zasięgu, dzięki czemu unikniemy potencjalnych konfliktów ze zmiennymi globalnymi. Zauważmy jeszcze, że nasz plugin definiujemy tak jakby jQuery funkcjonowała w trybie noConflict, a więc będziemy mogli go używać w sytuacji gdy inne biblioteki w naszych skryptach korzystają ze znaku $.
Do kodu wprowadzimy teraz następujący fragment:
(function($) {
$.fn.textColor = function(){ };
}(jQuery));
Taka konstrukcja umożliwia nam zdefiniowanie głównej metody pluginu o nazwie textColor(dodajemy ją do obiektu jQuery, który przechowuje metody czyli $.fn). Na chwilę obecną jQuery już „wie”, że istnieje plugin o nazwie textColor, ale problem polega na tym, że nie wykonuje on jeszcze żadnych czynności. Za jego pomocą chcemy zmieniać kolor tekstu, a więc kod funkcji będzie wyglądał następująco:
(function($){
$.fn.textColor = function(){
this.css("color",”blue”);
return this;
};
}(jQuery));
Słowo this odwołuje się do bieżącej instancji obiektu jQuery. Za pomocą standardowej metody CSS zmieniamy właściwość color. Wprowadzamy wartość blue, czyli kolor niebieski. Następnie za pomocą return this zwracamy bieżącą instancję obiektu. Na tym etapie nasz plugin można już przetestować. Spróbujmy go teraz użyć:
$('p').textColor();
Odwołujemy się do wszystkich elementów <p> i wywołujemy metodę textColor czyli nasz plugin. Po uruchomieniu strony w przeglądarce wszystkie akapity powinny otrzymać tekst w kolorze niebieskim.
Powróćmy na chwilę do kodu pluginu. Użyliśmy return this, czyli funkcja zwraca bieżącą instancję obiektu jQuery. Dzięki temu możemy metody łączyć w łańcuchy typowe dla biblioteki jQuery. Poniższych kod powinien więc zadziałać prawidłowo (najpierw zmieniamy kolor a potem wprowadzamy nową zawartość za pomocą metody html):
$('p').textColor().html('przykładowa zawartość');
Do rozwiązania pozostał nam jeden, ale dość istotny problem. W zdecydowanej większości wypadków nasz plugin będzie przetwarzać nie pojedynczy element, ale raczej całą kolekcję (tak jak w naszym przykładzie, który przetwarza wszystkie elementy <p>). Musimy więc zadbać o to, aby czynności wykonywane przez nasz plugin były wywoływane dla każdego elementu w kolekcji. Po prostu musimy użyć pętli.
$.fn.textColor = function() {
return this.each(function() {
$(this).css("color","blue");
});
};
Używamy metody each po to, aby przetworzyć każdy element w kolekcji. Dla każdego elementu wywołujemy metodę CSS. Warto jeszcze zauważyć, że $(this) odwołuje się do pojedynczego elementu w kolekcji (np. do pojedynczego akapitu), natomiast this reprezentuje obiekt jQuery zwracany przez metodą naszego pluginu.
Wiemy już jak stworzyć prosty plugin jQuery. Oczywiście jego funkcjonalność jest bardzo ograniczona. Więcej informacji na temat tworzenia własnych pluginów znajdziecie w kursie:
Kurs Programowania w jQuery
Poznaj najpopularniejszą i niezwykle użyteczną bibliotekę JavaScript Dowiedz się więcej
Opublikowane 30 września 2013 r. w kategorii: Programowanie
ŚCIEŻKA KARIERY
13130 uczestników
79 godzin
708 wykładów
Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony! Dowiedz się więcej
