|
Zobacz ten artykuł na stronie autora: tworzenie własnych wtyczek jQuery.
jQuery to obecnie najpopulariejszy i najszybciej rozwijający się framework javascript. O jego wielkim sukcesie decyduje prostota i efektywność (programisty, niekoniecznie szybkość skryptów).
Bardzo ciekawą opcją w jQuery jest możliwość tworzenia własnych wtyczek, rozszerzających standardowe możliwości biblioteki.
Co powinieneś umieć / mieć:
Tworzenie wtyczki
Funkcjonalność wtyczki będzie prosta. Rozwinę artykuł "Opisy w chmurce".
Kod tworzący chmurkę nad węzłem zadawanym jako parametr konstruktora wygląda tak:
$(document).ready(function() {
$('#a').mouseover(function() {
$('').html('opis').appendTo($(this));
}).mouseout(function() {
$(this).find('span.bubble').remove();
});
});
Chcemy osiągnąć coś takiego:
$(document).ready(function() {
$('#a').bubbleSpeech({'description' : 'opis'});
});
Prawda, że ładniej :). No to do dzieła!
Struktura pluginu jQuery
Oto struktura wtyczki do jQuery wg dokumentacji. Każda wtyczka posiada taki szkielet.
// uniknijmy konfliktow nazw przez wykorzystanie anonimowych funkcji
(function($){
$.fn.extend({
// w miejsce 'pluginname' wpisujemy nazwe wtyczki
pluginname: function(options) {
var defaults = {
k1 : v1, // domyślne wartości
k2 : v2 // które można nadpisać przekazując opdowiednie dane w konstruktorze
}
options = $.extend(defaults, options); // nadpiszą się tu
// dla każdego węzła spełaniającego warunki
return this.each(function() {
// wykonaj ten kod
});
}
});
})(jQuery); // przekaz do funkcji referencje na framework
Jeśli zastanawiasz się, co oznacza anonimowa funkcja to warto przeczytać artykuł o zasięgu zmiennych w JS.
W oparciu o powyższy kod można stworzyć dowolnie wiele wtyczek.
Krok 1 - "hello world"
Na początek w ogóle uruchommy ten kod, z prostym alertem
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
bubbleSpeech: function() {
return this.each(function() {
// dla każdego węzła dodajemy obsługę zdarzenia 'click'
$(this).click(function() {
alert('HelloWorld');
});
});
}
});
})(jQuery);
$(document).ready(function() {
$('#a').bubbleSpeech();
$('.b').bubbleSpeech();
});
</script>
<style type="text/css">
#a { position: relative; }
#a span.bubble { position: absolute; top: 20px; left: 0;
width: 180px; padding: 10px; line-height: 30px;
border: 1px solid #000; background: #fff;
}
</style>
To jest akapit z id a
To jest akapit z klasą b
To jest pojemnik z klasą b
Powyższy kod pozwala już na używanie naszej własnej wtyczki! Jak widzisz, może kodu jest trochę więcej niż w pierwszy mwypadku, ale za to o ile łatwiej i przyjemniej się tego teraz używa! Choć - trzeba przyznać - efekt póki co nie jest powalający. Same alerty :/
Krok 2 - przekazanie parametrów
Teraz przekażmy parametry do naszej wtyczki
(function($) {
$.fn.extend({
bubbleSpeech: function(options) {
var defaults = {
description : 'Hello World' // tu mamy domyślne wartości [3]
};
options = $.extend(defaults, options); // nadpiszmy domyślne wartości [4]
return this.each(function() {
// dla każdego węzła dodajemy obsługę zdarzenia 'click'
$(this).click(function() {
alert(options.description); // wyświetlmy wynik [5]
});
});
}
});
})(jQuery);
$(document).ready(function() {
$('#a').bubbleSpeech({description : 'To jest mój opis 1'}); // to dajemy obiekt z naszymi wartościami [1]
$('.b').bubbleSpeech(); // tu bez żadnych danych przekazanych [2]
});
// reszta kodu HTML pozostaje bez zmian
Jak widać, teraz gdy klikamy opisy są inne. Dzieje się tak dzięki sparametryzowaniu: [1], [2]. Możemy oczywiście zmienić nazwę klucza w przekazywamyn JSON-ie. Należałoby wtedy także dokonać odpowiednich zmian w [3], [5]. Czas, aby nasza wtyczka zaczęła robić, to czego oczekujemy - wyświetlać "chmurkę", a nie alertować.
Krok 3 - "chmurka" z opisem
Tym razem zmiany będą dotyczyć tylko samej wtyczki:
(function($) {
$.fn.extend({
bubbleSpeech: function(options) {
var defaults = {
description : 'Hello World'
};
options = $.extend(defaults, options);
return this.each(function() {
var self = $(this); // [1]
self.mouseover(function() {
var zIndex = self.css('z-index'); // [2]
$('').
attr({'zindex' : zIndex}). // [3]
html(options.description).
appendTo(self);
self.css({'z-index' : 10000000000}); // [4]
}).mouseout(function() {
var bubble = self.find('span.bubble'); // [5]
var zIndex = bubble.attr('zindex'); // [6]
self.css({'z-index' : zIndex}). // [7]
find('span.bubble').remove(); // [8]
});
});
}
});
})(jQuery);
W powyższym kodzie po kolei robimy:
-
Tworzymy obiekt dla aktualnego węzła DOM spełniającego warunki podane w konstrukltorze [np. id = "a" => $('#a') ].
-
Zapamiętujemy aktualną wartość z-index...
-
... i zapisujemy ją na przyszłośc w specjalnym - niezgodnym ze standardami atrybucie
-
Ustawiamy bardzo duży z-index (aby nasza chmurka przykryła wszystko inne).
-
Chwytamy naszą chmurkę.
-
Odczytujemy wcześniej [2] zapisany z-index.
-
Ponownie przypisujemy naszemu węzło wi jego pierwotny z-index [aby niczego nie popsuć]
-
Usuwamy chmurkę.
Tym sposobem zyskujemy już gotową wtyczkę.
Co można poprawić?
Zawsze jest coś do poprawienia. Tu chociażby warto dodać nowy parametr - nazwę klasy dla chmurki. Póki co jest zahardkodowane "bubble". Istnieje jednak możliwość, że ktoś zechce tak nazwać klasę na swojeje stronie. Warto więc może dać tym sterować.
|
English
Arabic
Bulgarian
Croatian
Czech
Danish
Dutch
Finnish
French
German
Greek
Hindi
Italian
Japanese
Korean
Norwegian
Polish
Portuguese
Romanian
Russian
Spanish
Swedish
Catalan
Filipino
Hebrew
Indonesian
Latvian
Lithuanian
Serbian
Slovak
Slovenian
Ukrainian
Vietnamese
Albanian
Estonian
Galician
Hungarian
Maltese
Thai
Turkish
Persian
Afrikaans
Malay
Swahili
Irish
Welsh
Belarusian
Icelandic
Macedonian
Yiddish
Armenian
Azerbaijani
Basque
Georgian
Haitian Creole
Urdu
Chinese (S)
Chinese (T)
Komentarze