JavaScript

Własny plugin do jQuery

Dziś pragnę pokazać Wam, drodzy czytelnicy jak napisać swój własny plugin do jQuery. W Internecie, na ten temat w naszym języku ojczystym jest bardzo mało materiałów. Dlatego też postanowiłem przekazać Wam tą wiedzę w, jak sądzę, przejrzysty sposób. Na co nam jednak własny plugin?

Wielu osobom zdarza się często, że nie mogą znaleźć takiego pluginu który spełniał by ich potrzeby. W najlepszych przypadkach potrafią oni napisać własny skrypt który w pewnym stopniu by spełniał ich wymogi, jednak najczęściej nie był napisany tak jak być powinien – jako łatwy do przeniesienia plugin.

Główny szablon pluginu.

jQuery wymaga od nas pewnego szablonu do pisania pluginu. Jest on stosunkowo dobrym wyjściem gdyż nie ogranicza on twórców i jest łatwy do przyswojenia.
Wygląda on tak:

(function ($) {
    $.fn.nasza_nazwa = function () {

    };
})(jQuery);

Najpierw mapujemy jQuery jako znak $ (dolara) w naszym skrypcie poprzez function ($). Ten zapis pozwala nam na użycie jQuery w naszym pluginie. Kolejna linijka to utworzenie nowej funkcji w kontenerze funkcji jQuery. To właśnie dzięki niemu możemy dodać nową funkcję do jQuery. W miejsce nasza_nazwa możemy wpisać nazwę naszego pluginu. W tym przypadku będzie to koloruj. Napiszemy sobie plugin na kolorowanie danego tekstu. Może się to wydawać trochę śmieszne, lecz od takich właśnie rzeczy warto zaczynać.
A więc nasz kod wygląda tak:

(function ($) {
    $.fn.koloruj = function () {

    };
})(jQuery);

Musimy dopisać sobie teraz tablicę która będzie nam przechowywać kolor domyślny, który zostanie użyty jeśli użytkownik pluginu nie poda koloru.

(function ($) {
    $.fn.koloruj = function (options) {
             var settings = {
             'color' : '#000000'
             };
    };
})(jQuery);

Jak widzimy domyślnym kolorem będzie kolor czarny. Jak warto również zauważyć dodaliśmy argument do naszej funkcji który będzie przyjmował kod koloru.
Kolejnym krokiem który musimy wykonać jest nadpisanie naszych ustawień tymi którymi dostaniemy od użytkownika. Robimy to metodą $.extend.

(function ($) {
    $.fn.koloruj = function (options) {
             var settings = {
             'color' : '#000000'
             };
             if(options)
             {
                 $.extend( settings, options );
             }
    };
})(jQuery);

Jeśli już mamy odbieranie argumentów od użytkownika robimy teraz zmianę koloru. Zastosujemy do tego metodę zmieniającą parametry CSS: $.css.

(function ($) {
    $.fn.koloruj = function (options) {
             var settings = {
             'color' : '#000000'
             };
             if(options)
             {
                 $.extend( settings, options );
             }
             this.css("color", settings['color']);
             return true;
    };
})(jQuery);

Jeśli chcemy odwołać się do aktualnego elementu dla którego użyto plugin używamy this.
Teraz należy już tylko przetestować nasz plugin. Zapisujemy plik jako plugin.js następnie linkujemy go w naszym dokumencie i w kodzie JavaScript naszej strony piszemy:

$(".element").koloruj({'color': '#003a76'});

Tekst w elemencie HTML „element” powinien zmienić się na ciemnoniebieski.

Zakończenie

No i to tyle w podstawach pisania własnych pluginów w tak wspaniałej bibliotece jaką jest jQuery. Zachęcam Was do rozbudowania tego pluginu o jakieś efekty itp. aby utrwalić nowe wiadomości.

Brak komentarzy

Napisz komentarz jako pierwszy!

Zostaw odpowiedź