Tworzenie pluginów jQuery – własne rozszerzenia w praktyce

jQuery

Poziom średnio-zaawansowany

Dziś kontynuacja tematu tworzenia rozszerzeń (pluginów) dla frameworka jQuery. Zajmiemy się aspektem praktycznym.

Tworzenie pluginów jQuery – dalsze kroki

Development pluginu może odbywać się według wzorca jak poniżej. Definiujemy poszczególne elementy, takie jak funkcje opcje:

(function($) {

  // rozszerzamy o nową funkcję
  $.fn.myFunctionExt = function(param) {
    alert("The parameter is: " + param);
  };

  // ...

  // kod pluginu
  $.mySimplePlugin = function(options) {

    var myVar1 = 'A',

    ...,

    actions = {

      doSomething: function() {
        // ...
      },
    },

    // wywołania ... 
  }; 
})(jQuery); // i to wszystko 

Ale dość już teoretyzowania, przejdźmy do konkretów!

Zobaczmy i przeanalizujmy pełny przykład naszego prostego pluginu jQuery.

Przykład – nasz własny plugin jQuery:


(function($) {
    
    // we extend jQ by new simple function 
    $.fn.myFunctionExt = function(param) {
        alert("The parameter is: " + param);
    };
    
    // standard CSS modifier for elements
    $.fn.myCSSModifier = function() {
        
        return this.css({
            margin: '5px',
            padding: '5px',
            border: 'solid 2px #f00',
        });
    };
    
    // plugin code
    $.mySimplePlugin = function(options) {
        
        // define properties and methods
        var str = 'abdef',
        number = 128,
        arr = ['One', 'Two', 'Three', '...'],
        
        actions = {
            test_alert: function() {
                this.myFunctionExt('X1');
                
                // this.myFunctionExt(str);
                this.myFunctionExt(arr[1]);
            },
            
            test_css: function() {
                // apply for all elements in body
                // this.myCSSModifier();
                
                // apply only for specified element
                $('#d2').myCSSModifier();
            },
            
            default_action:  function() {
                alert('Bye bye!');
            }
        },
        
        // core processing - options
        
        body = $('body');
        
        if (options) {
            // multiple options
            if (typeof options == 'object') {
                for(i in options) {
                    if (options[i] != false && actions[i]) {
                        actions[i].call(body);
                    }
                }
            } else {
                // string - one option
                if (actions[options]) {
                    actions[options].call(body);
                }
            }
        } else {
            // no option specified - call default
            return actions['default_action'].call(body);
        }
        
    };
    
})(jQuery);

Jest to w pełni działający przykład. Poniżej przykład uruchomienia go.

Wywołanie (w dokumencie HTML, w którym dołączamy jQuery i plik .js z kodem naszego pluginu) wygląda następująco:

$(document).ready(function() {
  $.mySimplePlugin('test_alert');
  // lub
  // $.mySimplePlugin({test_css: true, test_alert: true});
});

Pierwszy wariant to wywołanie pojedynczej metody z naszego pluginu:

$.mySimplePlugin('test_alert');

Aby wywołać wiele akcji jednocześnie, napiszemy:

$(document).ready(function() {
  $.mySimplePlugin('test_alert');
  // lub
  // $.mySimplePlugin({test_css: true, test_alert: true});
});

Omówmy teraz poszczególne elementy kodu pluginu.


Elementy pluginu jQuery

Pierwsze dwie funkcje (myFunctionExt oraz myCSSModifier) rozszerzają jQuery o dodane przez nas funkcjonalności.

Natomiast dostępne funkcje (akcje), które można wykonywać na elementach dokumentu (strony) zgromadziliśmy wewnątrz obiektu actions:

...
// we extend jQ by new simple function 
$.fn.myFunctionExt = function(param) {
  alert("The parameter is: " + param);
};
...

oraz

...
actions = {
  test_alert: function() {
  this.myFunctionExt('X1');
    
  // this.myFunctionExt(str);
  this.myFunctionExt(arr[1]);
},
...

Zdefiniowaliśmy także właściwości, do których można się bezpośrednio odwoływać:

...
$.mySimplePlugin = function(options) {

  var str = 'abdef',
  number = 128,
  arr = ['One', 'Two', 'Three', '...'],
...

Warto zwrócić uwagę na funkcję test_css, która modyfikuje style elementów. I w tym momencie można zastosować style do wszystkich elementów dokumentu (zachowanie domyślne):

this.myCSSModifier();

tudzież zastosować kod tylko dla określonego elementu:

$('#d2').myCSSModifier();

Oczywiście wszytko to możemy dostosowywać w miarę potrzeb, przekazywać dane elementów jako parametry, itd.

Natomiast wywołaniami odpowiednich akcji zajmuje się ostatnia część kodu, która rozpoznaje czy przekazano łańcuch (pojedyncza instrukcja), czy też obiekt (wiele instrukcji do wywołania).

...
body = $('body');

if (options) {
  // multiple options
  if (typeof options == 'object') {
    for(i in options) {
      if (options[i] != false && actions[i]) {
        actions[i].call(body);
      }
    }
  }
...
}

I to wszystko. Jak widać, programowanie pluginu wcale nie musi boleć.

Pełny przykład do pobrania tutaj:

http://directcode.eu/samples/jquery_plugins_dev/jq_plugin_dev_demo2.zip

Kolejny przykład – generator losowego ciągu znaków

Kolejnym pluginem, który szybko napiszemy, będzie generator losowego łańcucha.

Programujemy więc kolejno poszczególne elementy. Nasz plugin będzie uruchamiał się automatycznie.

Implementacja:


(function($) {
    $.fn.randStrGenerator = function(options) {
        
        options = $.extend({
            minLength: 7,
            randomStrLength: 12,
            theBox: this
        }, options);
        
        return this.each(function(index) {
            
            // run automatically
            evaluate();
            
            function evaluate() {
                var randomPassword = generate();
                $(options.theBox).val(randomPassword);
            }
            
            function generate() {
                return 'Todo ...';
            }
        });
        
    }

})(jQuery)

Do uruchomienia przykładu potrzebujemy:

– pola tekstowego:

<input type="text" id="random" />

oraz wywołania:

$(document).ready(function() {
  $('#random').randStrGenerator();
});

// lub z własnymi opcjami
// $('#random').randStrGenerator({
  // minLength: 5,
  // randomStrLength: 10
// });

Pełny przykład online oraz do pobrania tutaj.

I jeszcze jeden plugin – slide show

Trzeci i ostatni dziś praktyczny przykład pluginu to pokaz slajdów. Efekt uzyskany niewielkim nakładem kodu i jest trywialny w użyciu. A w przypadku jQuery, plugin jest wręcz najlepszym sposobem implementacji takiej funkcjonalności.

Plugin operuje na elementach HTML – załóżmy że mamy listę z obrazkami. Nasz plugin będzie je pojedynczo, kolejno wyświetlał wraz z animacją.

Krok 1 – definiujemy naszą listę obrazków:

<div id="slideshow">
  <img src="img/1.png" alt="" />
  <img src="img/2.png" alt="" />
  <img src="img/3.png" alt="" />
  <img src="img/4.png" alt="" />
  <img src="img/5.png" alt="" />
  <img src="img/6.png" alt="" />
</div>

Krok 2 – dla prawidłowego wyświetlania obrazków potrzebujemy zdefiniować CSS:

#slideshow img {
  display: none;
  position: absolute;
}

Krok 3 – implementujemy plugin:

(function($) {
    $.mySlideShow = function(element, settings) {
        
        // setup
        var config = {
            'fadeSpeed': 500,
            'delay': 1000
        };
        
        if (settings) {
            $.extend(config, settings);
        }
        
        var obj = $(element);
        var img = obj.children('img');
        var count = img.length;
        var i = 0;
        
        // display first image
        img.eq(0).show();
        
        // run
        setInterval(function() {
            img.eq(i).fadeOut(config.fadeSpeed);
            
            i = (i + 1 == count) ? 0 : i + 1;
            img.eq(i).fadeIn(config.fadeSpeed);
        }, config.delay);
        
        return this;
    };
	
})(jQuery);

Krok 4 – wywołujemy plugin dla elementu naszej listy obrazków:

$(document).ready(function() {
  $.mySlideShow('#slideshow');
});

I gotowe. Interwał wykonuje kod co pewien czas. Zarówno czas ten jak i szybkość animacji są konfigurowalne.

Przykład działający online:

http://directcode.eu/samples/jquery_plugins_dev/jq_plugin_dev_demo4_slideshow/jq_plugin_dev_demo4.html

Do pobrania:

http://directcode.eu/samples/jquery_plugins_dev/jq_plugin_dev_demo4_slideshow.zip

I na tym kończymy dzisiejszy artykuł.

Podsumowanie

Tworzenie pluginów jQuery nie jest jak widać czymś nadmiernie skomplikowanym. W dość prosty sposób możemy zmienić nasz kod w plugin i tym samym umożliwić bardzo wielu użytkownikom korzystnie z niego w ten bardzo prosty sposób, jaki oferuje jQuery.

Dziękuje za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+2Share on LinkedIn2Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.