docLaboratorium 4 Biblioteka JQuery – budowa i implementacja pluginów
download 
Reklamacja Transkrypt
Laboratorium 4 Biblioteka JQuery – budowa i implementacja pluginów
Laboratorium 4
Biblioteka JQuery – budowa i implementacja pluginów
W związku z tym, Ŝe framework w postaci biblioteki JQuery został napisany w języku
JavaScript zakres jego moŜliwości moŜna więc w łatwy sposób rozszerzać budując własne
funkcje rozszerzające - pluginy, które dołączamy do obiektu JQuery.
Struktura pluginu rozszerzającego moŜliwości funkcjonalne biblioteki JQuery wygląda
następująco:
(function($){
$.fn.extend({
nazwa_pluginu: function(options){
var defaults = {
// domyślne wartości
// moŜna je nadpisać przekazując odpowiednie dane w konstruktorze
k1 : v1,
k2 : v2
}
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);
Aby poprawnie stworzyć dodatkowy plugin naleŜy postępować zgodnie z następującymi
zasadami:
1. Nazwy plików powinny być formowane następująco: jquery.[nazwa_wtyczki].js.
Przykładowo: jquery.nazwa.js.
2. W metodach pluginu this jest referencją (wskazaniem) do aktualnie przetwarzanego
obiektu jQuery.
3. Powinno się dołączać wtyczkę do obiektu nadrzędnego poprzez jQuery, a nie $, co
uŜytkownikom zwiększa pole manewru we wprowadzaniu zmian z uŜyciem
jQuery.noConflict().
4. W celu uniknięcia problemów z poprawnością kodu po jego wcześniejszej kompresji,
wszelkie metody oraz funkcje powinny kończyć się znakiem średnika (;).
5. UŜycie .each pozwala na bezproblemową iteracje po wszystkich elementach drzewa
DOM, na których operujemy w metodzie.
6. Metoda domyślnie musi zwracać wartość.
Plugin (wtyczkę) biblioteki JQuery moŜemy zdefiniować w naszym skrypcie jako:
Funkcję, lub
Metodę
A. Lewicki – Języki internetowe
Do metody odwołujemy się operując na jakimś elemencie, identyfikatorze, bądź na klasie
znajdującej się na stronie internetowej, a w przypadku funkcji, po prostu ją wywołujemy w
celu wykonania jakieś akcji.
Budując plugin dla metody korzystamy z następującego zapisu:
jQuery.fn.nazwa = function() {
[...]
};
i wywołujemy go następująco:
$(element).nazwa();
Natomiast budując wtyczkę jako funkcję uŜywamy:
jQuery.nazwa = function() {
[...]
};
a wywołanie to:
var x = $.nazwa();
alert(x);
Obydwa rodzaje wtyczek moŜemy teŜ parametryzować. Argumentem wtedy moŜe być
zwykła zmienna, dowolnego, obsługiwanego przez JavaScript typu lub obiekt przechowujący
zbiór pól o konkretnym przeznaczeniu.
jQuery.fn.nazwa = function(options) {
[...]
};
oraz
jQuery.nazwa = function(options) {
[...]
};
Przykład
Napisz wtyczkę o nazwie komunikat, której zadaniem będzie umieszczenie
w dokumencie tekstu Laboratorium przedmiotu języki programowania. Wtyczkę tą naleŜy
następnie wywołać dla akapitu o identyfikatorze #info.
Rozwiązanie – umieszczamy w pliku jquery.komunikat.js:
$.fn.komunikat = function() {
this.each(function() {
$(this).html('Laboratorium przedmiotu języki programowania');
});
return this;
};
})(jQuery);
Wykorzystanie zbudowanego pluginu:
A. Lewicki – Języki internetowe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head><title>Przykład</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.komunika..js"></script>
<script type="text/javascript">
$(function(){
$('#info').komunikat();
});
</script>
</head>
<body>
<p id=info></p>
</body>
</html>
Ćwiczenie 1
Plik: zadania/plugins/ Cwiczenie1.html
Rozwiązanie: zadania/plugins/ Cwiczenie1_finished.html, zadania/plugins/jquery.cw1.js
Napisz dwie wtyczki o nazwach: pierwszy oraz ostatni, których zadaniem będzie
wyświetlanie napisu ‘Nowy Rok’ dla pierwszego elementu zbioru oraz ‘Sylwester’ dla
ostatniego elementu zbioru (listy) . Działanie wtyczek wzbogać poprzez wykorzystanie
funkcji css(), animate() oraz fadeOut().
Ćwiczenie 2
Plik: zadania/plugins/ Cwiczenie2.html
Rozwiązanie: zadania/plugins/ Cwiczenie2_finished.html, zadania/plugins/jquery.cw2.js
Napisz plugin o nazwie czcionka, którego zadaniem będzie zmiana czcionki
wszystkich dostępnych elementów zbioru (listy) na czcionkę przekazaną jako parametr
funkcji. W rozszerzeniu skorzystaj z funkcji css().
Ćwiczenie 3
Plik: zadania/plugins/ Cwiczenie3.html
Rozwiązanie: zadania/plugins/ Cwiczenie3_finished.html, zadania/plugins/jquery.cw3.js
Napisz dodatkową funkcję (plugin) o nazwie zmien_kolor, która jako parametr
pozwoli na wskazanie obiektu. Funkcja ta powinna wykorzystywać właściwości tekstu,
koloru oraz tła do modyfikacji wyglądu elementów struktury strony html.
A. Lewicki – Języki internetowe
Ćwiczenie 4
Plik: zadania/plugins/ Cwiczenie4.html
Rozwiązanie: zadania/plugins/ Cwiczenie4_finished.html, zadania/plugins/jquery.cw4.js
Rozszerz moŜliwości pluginu z poprzedniego zadania, tak aby moŜna było wywołać
zdefiniowaną funkcję zmien_kolor zarówno nie podając Ŝadnego parametru, jak
i z moŜliwością podania jednego parametru będącego napisem oraz będącego obiektem.
Ćwiczenie 5
Plik: zadania/plugins/ Cwiczenie5.html
Rozwiązanie: zadania/plugins/ Cwiczenie5_finished.html, zadania/plugins/jquery.cw5.js
Napisz dodatkowy plugin dla biblioteki JQuery, który przekształci strukturę
dostępnego pliku tekstowego o nazwie dane.txt w strukturę w postaci tabeli zgodnej ze
znacznikami XHTML.
Ćwiczenie 6
Wejdź na stronę o adresie http://plugins.jquery.com i zapoznaj się z funkcjonalnością
dostępnych przykładowych wtyczek rozszerzających moŜliwości biblioteki JQuery.
Zadanie do samodzielnego wykonania
Napisz wtyczkę, która pozwoli na przekazanie jako parametru nazwy dowolnego
miesiąca bieŜącego roku, tak aby na stronie moŜna było wyświetlić kalendarz miesięczny
(w postaci tabelarycznej) zgodny z przekazanym parametrem. W przypadku braku parametru
naleŜy wyświetlić kalendarz miesiąca listopad.
A. Lewicki – Języki internetowe
