oraz

w widĔet akordeonu 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14



154

Rozdziaä 7. Interakcja z widĔetami 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

Spróbuj wyĂwietliÊ nastÚpnÈ czÚĂÊ

A oto treĂÊ...

NastÚpna grupa

I kolejna treĂÊ...

Ostatnia grupa

WiÚcej treĂci juĝ nie bÚdzie.

W wierszach 15. – 34. został umieszczony element div o ściśle określonej strukturze kodu HTML. Łatwo w nim zauważyć pewną prawidłowość — najpierw jest umieszczany element h3 z odnośnikiem, a za nim element div z treścią, po czym następuje kolejna podobna grupa. Elementy h3 pełnią rolę nagłówków grup, a elementy div mogą być ukrywane w celu zwinięcia danej grupy.

OkreĈlanie wyglñdu akordeonu Zgodnie z informacjami podanymi na samym początku tego rozdziału widżet akordeonu może generować bardziej złożoną strukturę kodu HTML. Precyzyjnie rzecz biorąc, widżet ten rozbudowuje strukturę początkowego kodu HTML strony. Po przekształceniu elementu div na widżet akordeonu jego kod HTML zostanie przekształcony do postaci przedstawionej na poniższym przykładzie. (Trzeba przy tym pamiętać, że ten kod HTML jest wygenerowany. Nie trzeba go umieszczać w kodzie tworzonego dokumentu HTML).

Receptura: Grupowanie treĈci przy uĔyciu akordeonu

Pierwszy nagïówek

TreĂÊ pierwszej grupy.

Drugi nagïówek

TreĂÊ drugiej grupy.

Na powyższym przykładzie czcionką pogrubioną oznaczono kod, który został dodany do oryginalnego. Z kolei szarym wyróżnieniem zostały oznaczone te opcje, które będą się zmieniać podczas wyświetlania różnych części akordeonu.

OkreĈlanie opcji akordeonu Widżet akordeonu udostępnia wiele różnego rodzaju opcji. Tabela 7.1 przedstawia przykłady pokazujące, jak można je określać, wraz z opisami wyjaśniającymi ich przeznaczenie.

155

156

Rozdziaä 7. Interakcja z widĔetami Tabela 7.1. Opcje widĔetu akordeonu

Opcja

Opis

$('#my-accordion'). accordion({disabled: true});

DomyĈlnñ wartoĈciñ opcji disabled jest false. Przypisanie jej wartoĈci true wyäñcza akordeon i sprawia, Ĕe przestanie on dziaäaè. Jej wartoĈè moĔna zmieniè w dowolnym momencie, takĔe podczas inicjalizacji.

$('#my-accordion'). accordion({active: false});

Przypisanie opcji active wartoĈci false sprawia, Ĕe podczas inicjalizacji wszystkie grupy zostanñ zwiniöte. Opcja ta dziaäa wyäñcznie w przypadku, gdy opcja collapsible ma wartoĈè true. Zamiast wartoĈci logicznej wartoĈciñ opcji active moĔe byè takĔe selektor, obiekt jQuery lub element HTML, przy czym te trzy ostatnie rodzaje wartoĈci okreĈlajñ grupö, którñ naleĔy rozwinñè.

$('#my-accordion'). accordion({animated: 'blind'});

Opcja animated pozwala na odtwarzanie animacji podczas rozwijania i zwijania grup. Jej domyĈlnñ wartoĈciñ jest slide, lecz moĔe ona przyjmowaè takĔe dowolnñ z nastöpujñcych wartoĈci: blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size oraz transfer.

$('#my-accordion'). accordion({autoHeight: false});

Wyäñcza moĔliwoĈè dostosowywania wysokoĈci grup. Dziöki temu kaĔda grupa bödzie mieè takñ wysokoĈè, jakñ ma jej zawartoĈè. Oznacza to, Ĕe caäkowita wysokoĈè widĔetu akordeonu bödzie siö zmieniaè. DomyĈlnñ wartoĈciñ tej opcji jest true.

$('#my-accordion'). accordion({clearStyle: true, autoHeight: false});

Opcja clearStyle powoduje, Ĕe po zakoþczeniu animacji z grupy sñ usuwane wszystkie style okreĈlajñce jej wysokoĈè. Opcja ta jest uĔyteczna w przypadku dynamicznego pobierania zawartoĈci grup. NaleĔy pamiötaè, Ĕe ta opcja nie dziaäa w przypadku stosowania opcji autoHeight.

$('#my-accordion'). accordion({collapsible: true});

Przypisanie opcji collapsible wartoĈci true sprawia, Ĕe bödzie moĔna zwinñè wszystkie grupy akordeonu. Opcji tej moĔna uĔywaè takĔe w przypadku, gdy opcja active ma wartoĈè false, by utworzyè akordeon, którego wszystkie grupy poczñtkowo bödñ zwiniöte. DomyĈlnñ wartoĈciñ tej opcji jest false.

$('#my-accordion'). accordion({event: 'dblclick'});

Zmienia zdarzenie powodujñce rozwijanie grup akordeonu. MoĔna rozwaĔyè uĔycie w tym celu takich zdarzeþ jak mouseover lub click.

$('#my-accordion'). accordion({fillSpace: true});

Przesäania ustawienie opcji autoHeight i sprawia, Ĕe akordeon w caäoĈci wypeäni obszar elementu nadrzödnego. Opcji tej moĔna uĔyè w celu stworzenia pasków bocznych z rozwijalnymi grupami, przypominajñcych te znane ze Ĉrodowiska programistycznego Visual Studio. DomyĈlnñ wartoĈciñ tej opcji jest false.

Receptura: Grupowanie treĈci przy uĔyciu akordeonu Tabela 7.1. Opcje widĔetu akordeonu (ciñg dalszy)

Opcja

Opis

$('#my-accordion'). accordion({header: 'h3'});

DomyĈlnie widĔet akordeonu uĔywa co drugiego elementu jako nagäówka kolejnej grupy. W tym przykäadzie widĔet zostaä skonfigurowany w taki sposób, by nagäówkami byäy jedynie elementy h3.

$('#my-accordion').accordion ({ icons: { 'header': 'ui-icon-circleplus', 'headerSelected': 'ui-iconcircle-minus' }}); $('#my-accordion'). accordion({navigation: true});

Przy wykorzystaniu opcji icons moĔna wyĈwietlaè w nagäówkach grup dodatkowe ikony. Lista dostöpnych ikon zostaäa podana w rozdziale 8., „Zmiany wyglñdu”.

$('#my-accordion').accordion({ navigation: true, navigationFilter:function (index) { return index == 2; }});

Zamiast otwieraè grupö z adresem odpowiadajñcym adresowi bieĔñcej strony, moĔna takĔe zaimplementowaè funkcjö okreĈlajñcñ, którñ z grup naleĔy rozwinñè. Funkcja ta jest wywoäywana dla kaĔdej z grup, przy czym jest do niej przekazywany indeks danej grupy. Funkcja ta powinna zwróciè wartoĈè true dla grupy, która powinna zostaè rozwiniöta. Implementacja tej funkcji moĔe byè znacznie bardziej zäoĔona niĔ ta przedstawiona na przykäadzie obok.

Rozwija grupö, której nagäówek zawiera element a z atrybutem href odpowiadajñcym adresowi bieĔñcej strony. Opcja ta wymaga, by odnoĈniki umieszczane w nagäówkach grup okreĈlaäy unikalne etykiety. DomyĈlnñ wartoĈciñ tej opcji jest false.

Obsäuga zdarzeþ akordeonu Poniżej zostały przedstawione wartości, które mogą zostać przekazane w parametrze ui: ui = { newContent: // element newHeader: // element oldContent: // element oldHeader: // element options: Object active: 3 animated: "slide" autoHeight: true change: function (event, ui) { clearStyle: false collapsible: false disabled: false duration: undefined event: "click" fillSpace: false header: "> li > :first-child,> :not(li):even" icons: Object

157

158

Rozdziaä 7. Interakcja z widĔetami navigation: true navigationFilter: function (index) { proxied: "slide" proxiedDuration: undefined }

Poniższy fragment kodu pozwala obsługiwać utworzenie nowego widżetu akordeonu: $('#my-accordion').accordion({create: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-accordion') .on('accordioncreate', function(event, ui) { // obs§uga zdarzenia

}) .accordion();

Poniższy fragment kodu pokazuje wybór nowej grupy oraz sposób obsługi zdarzenia generowanego po zakończeniu animacji: $('#my-accordion').accordion({change: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-accordion').accordion() .on('accordionchange', function(event, ui) { // obs§uga zdarzenia

});

Poniższy fragment kodu przedstawia wybór nowej grupy oraz obsługę zdarzenia generowanego podczas rozpoczynania animacji: $('#my-accordion').accordion({changestart: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-accordion').accordion() .on('accordionchangestart', function(event, ui) { // obs§uga zdarzenia

});

Metody Widżet akordeonu udostępnia także kilka metod, których można używać do zmiany wartości opcji oraz działania samego widżetu. Metody te zostały przedstawione w tabeli 7.2.

Receptura: Sugerowanie wartoĈci przy uĔyciu widĔetu automatycznego uzupeäniania Tabela 7.2. Metody widĔetu akordeonu

Metoda

Opcja

$('#my-accordion'). accordion('destroy');

Usuwa wszelkie moĔliwoĈci funkcjonalne akordeonu i przywraca poczñtkowñ postaè elementu HTML, na podstawie którego widĔet zostaä utworzony.

$('#my-accordion'). accordion('disable');

Wyäñcza dziaäanie akordeonu, lecz nie usuwa go ze strony.

$('#my-accordion'). accordion('enable');

Ponownie wäñcza wyäñczony widĔet akordeonu.

$('#my-accordion').accordion ('option', optionName,[wartoĂÊ]);

Tej metody moĔna uĔywaè, by ustawiaè i odczytywaè wartoĈci opcji widĔetu. JeĈli w wywoäaniu metody nie zostanie podana wartoĈè, to metoda zwróci bieĔñcñ wartoĈè podanej opcji. W przypadku podania wartoĈci zostanie ona przypisana podanej opcji widĔetu.

$('#my-accordion').accordion ('option', options);

Przekazujñc obiekt options, moĔna w jednym wywoäaniu okreĈliè wartoĈci wielu opcji.

$('#my-accordion'). accordion('widget');

Zwraca element .ui-accordion.

$('#my-accordion'). accordion('activate', 1);

Rozwija drugñ grupö w akordeonie.

$('#my-accordion'). accordion('resize');

Przelicza wysokoĈè widĔetu na podstawie bieĔñcej zawartoĈci elementów HTML.

Receptura: Sugerowanie wartoĈci przy uĔyciu widĔetu automatycznego uzupeäniania Na niektórych witrynach można znaleźć rozwijane listy zawierające niezwykle dużo opcji. W wielu przypadkach można jednak ułatwić życie użytkownikom witryny, zastępując takie listy rozwijanym menu wyposażonym w pole tekstowe z mechanizmem wyświetlania sugestii i automatycznego uzupełniania. Zamiast przewijać długą listę opcji, użytkownik może wpisać kilka początkowych liter interesującej go nazwy, a widżet zrobi całą resztę. Listing 7.2 przedstawia przykład zastosowania widżetu automatycznego uzupełniania pozwalającego na wybór pięciu słów ze standardowego tekstu Lorem Ipsum. Tekst ten pochodzi sprzed dwóch tysiącleci, a obecnie jest używany przez projektantów grafiki i osoby zajmujące się tworzeniem czcionek do prezentowania tymczasowych wyników ich pracy projektowej (z tego względu jest on określany także jako „wypełniacz” lub „zamiennik”).

159

160

Rozdziaä 7. Interakcja z widĔetami Listing 7.2. Podpowiadanie säów z tekstu Lorem Ipsum 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

Zacznij wpisywaÊ litery

Warto zwrócić uwagę, że po uruchomieniu przykładu sugestie wyświetlane na liście widżetu są prezentowane dokładnie w takiej samej kolejności, w jakiej zostały podane w kodzie, w wierszach 29. – 31. Funkcja autocomplete() jest wywoływana w wierszu 34., przy czym przekazywana jest do niej opcja source o wartości loremIpsum; loremIpsum to tablica utworzona w wierszu 28. Jeśli strona wymaga użycia innej kolejności sortowania — alfabetycznej lub według częstotliwości wybierania poszczególnych opcji — to trzeba ją zaimplementować samodzielnie i określić przed przekazaniem do widżetu dostępnych wartości.

Receptura: Sugerowanie wartoĈci przy uĔyciu widĔetu automatycznego uzupeäniania

OkreĈlanie wyglñdu widĔetu automatycznego uzupeäniania Po wywołaniu funkcji autocomplete() kod HTML pola tekstowego jest modyfikowany w poniższy sposób:

Kiedy zaczniemy wpisywać znaki w polu tekstowym widżetu, na samym końcu dokumentu dodawana jest grupa elementów HTML, pozwalająca wyświetlić listę sugerowanych podpowiedzi.

• Lorem
• dolor
. . . itd . . .

Nazwy klas widoczne na powyższym przykładzie można wykorzystać, by samodzielnie określić wygląd widżetu automatycznego uzupełniania.

OkreĈlanie opcji widĔetu automatycznego uzupeäniania Tabela 7.3 przedstawia dostępne opcje widżetu automatycznego uzupełniania.

Obsäuga zdarzeþ widĔetu automatycznego uzupeäniania W przypadku stosowania widżetu automatycznego uzupełniania obsługa zdarzeń może być realizowana w wielu miejscach. Zostały one przedstawione w przykładach zamieszczonych poniżej.

161

162

Rozdziaä 7. Interakcja z widĔetami Tabela 7.3. Opcje widĔetu automatycznego uzupeäniania

Opcja

Opis

$('#my-autocomplete').autocomplete({

Pobiera dostöpne wartoĈci, wykonujñc odwoäanie do zasobu o podanym adresie URL. WidĔet dodaje do podanego adresu äaþcuch zapytania o postaci: ?term={nasza_wartosc}.

source: '/retrieve-suggestions'});

[ {id: 'my-id', label: 'my-label', value: 'my-value'},

Zwrócone dane mogñ byè strukturñ zapisanñ w formacie JSON, takñ jak ta przedstawiona obok.

{id: '2nd-id', label: '2nd-label', value: '2nd-value'}, // itd. ] $('#my-autocomplete').autocomplete( source: function(req, res) { res(['

Oprócz zapytaþ do zasobów umieszczonych na serwerze oraz statycznych tablic dane mogñ byè takĔe zwracane przez funkcjö.

{id: 'my-id', label: 'my-label', value: 'my-value'}, {id: '2nd-id', label: '2nd-label', value: '2nd-value'} // itd. ]); }}); $('#my-autocomplete'). autocomplete({disabled: true}); $('#my-autocomplete'). autocomplete({appendTo: '#another-autocomplete'}); $('#my-autocomplete'). autocomplete({delay: 500}); $('#my-autocomplete').autocomplete ( {autoFocus: true, source:loremIpsum});

Przypisanie opcji disabled wartoĈci true sprawia, Ĕe widĔet przestanie dziaäaè. DomyĈlnñ wartoĈciñ tej opcji jest false. OkreĈla element, do którego zostanie dodana rozwijana lista widĔetu. DomyĈlnñ wartoĈciñ tej opcji jest body. Korzystajñc z tej opcji, moĔna ustawiè licznik czasu, który opóĒni uaktywnienie komponentu. DomyĈlnñ wartoĈciñ tej opcji jest 300. Automatycznie wybiera pierwszy element z listy automatycznego uzupeäniania. ãñczñc tö opcjö z opcjñ source, moĔna okreĈlaè, które dane powinny byè wyĈwietlane na poczñtku. DomyĈlnñ wartoĈciñ opcji autoFocus jest false.

Receptura: Sugerowanie wartoĈci przy uĔyciu widĔetu automatycznego uzupeäniania Tabela 7.3. Opcje widĔetu automatycznego uzupeäniania (ciñg dalszy)

Opcja

Opis

$('#my-autocomplete').autocomplete( {minLength: 3, source:loremIpsum});

OkreĈla minimalnñ liczbö znaków (w tym przykäadzie sñ to 3 znaki), które trzeba wpisaè w polu, zanim widĔet wyĈwietli listö podpowiedzi. Opcja ta zapobiega prezentowaniu bardzo däugich list lub nadmiernemu obciñĔeniu bazy danych.

$('#my-autocomplete').autocomplete({

OkreĈla poäoĔenie listy z podpowiedziami. Szczegóäowe informacje na temat tej opcji moĔna znaleĒè na stronie: http://docs.jquery.com/UI/Position.

position: { my: 'left top', at: 'right top' }, source: loremIpsum});

Obsługa inicjalizacji nowego widżetu automatycznego uzupełniania: $('#my-autocomplete').autocomplete({create: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete') .on('autocompletecreate', function(event, ui) { // obs§uga zdarzenia

}) .autocomplete();

Użytkownik strony wpisał w polu tekstowym poszukiwany łańcuch znaków, którego długość jest równa wartości opcji minLength lub od niej większa. Procedura obsługi tego zdarzenia może zwrócić wartość false, aby anulować wyszukiwanie: $('#my-autocomplete').autocomplete({search: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete').autocomplete() .on('autocompletesearch', function(event, ui) { // obs§uga zdarzenia

});

Została wyświetlona lista sugestii: $('#my-autocomplete').autocomplete({open: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete').autocomplete() .on('autocompleteopen', function(event, ui) { // obs§uga zdarzenia

});

Został wskazany jeden z elementów listy sugestii. Procedura obsługi tego zdarzenia może zwrócić wartość false, aby wybrana wartość nie została zapisana w polu tekstowym widżetu:

163

164

Rozdziaä 7. Interakcja z widĔetami $('#my-autocomplete').autocomplete({focus: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete').autocomplete() .on('autocompletefocus', function(event, ui) { // obs§uga zdarzenia

});

Został wybrany jeden z elementów listy sugestii: selected.$('#my-autocomplete').autocomplete({select: function(event,ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete').autocomplete() .on('autocompleteselect', function(event, ui) { // obs§uga zdarzenia

});

Lista podpowiedzi widżetu została zamknięta: $('#my-autocomplete').autocomplete({close: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete').autocomplete() .on('autocompleteclose', function(event, ui) { // obs§uga zdarzenia

});

Poniższe zdarzenie jest zgłaszane w przypadku, gdy użytkownik przejdzie do kolejnego pola na stronie, a wartość pola tekstowego widżetu zmieniła się: $('#my-autocomplete').autocomplete({change: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-autocomplete').autocomplete() .on('autocompletechange', function(event, ui) { // obs§uga zdarzenia

});

Wywoäywanie metod widĔetu automatycznego uzupeäniania Poniższy fragment kodu pokazuje, w jaki sposób można wywoływać metody widżetu automatycznego uzupełniania. Poniższy przykład określa procedurę obsługi zdarzeń kliknięcia, przy czym parametr value jest ignorowany, przez co wartość pola tekstowego widżetu nie ulegnie zmianie; dodatkowo opcji minLength przypisywana jest wartość 0, aby były wyświetlane wszystkie dostępne sugestie:

Receptura: Przeksztaäcanie elementów w przyciski $('#my-autocomplete') .autocomplete({minLength: 0, source: loremIpsum}) .click(function() { $(this).autocomplete('search'); });

Poniższe wywołanie powoduje zamknięcie listy sugestii: $('#my-autocomplete').autocomplete('close');

Receptura: Przeksztaäcanie elementów w przyciski Ogólnie rzecz biorąc, nawet bez stosowania arkuszy stylów CSS oraz JavaScriptu język HTML udostępnia kilka sposobów tworzenia elementów wyglądających jak przyciski. Warto tu wspomnieć na przykład o elemencie button oraz elemencie input z atrybutem type o wartościach button lub submit. Jeśli dodatkowo wykorzystane zostaną arkusze stylów oraz język JavaScript, okaże się, że niemal każdy inny element także może wyglądać jak przycisk. Listing 7.3 pokazuje, w jaki sposób jQuery UI pomaga w tworzeniu przycisków. Listing 7.3. Wybór listy elementów i przeksztaäcenie ich w przyciski 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Mój przycisk Mój odnoĂnik

A to jest akapit

• I lista wypunktowana...
• choÊ to moĝe akurat nie jest najlepszy pomysï...

W powyższym przykładzie wiersze 11. – 20. zawierają różnego rodzaju elementy HTML. W wyniku wykonania wywołania zapisanego w wierszach 31. – 36. wszystkie te elementy zostaną wyświetlone w sposób przypominający przyciski.

OkreĈlanie wyglñdu przycisków Jeśli chcemy zastosować swoje własne style określające postać przycisków, to może w tym pomóc przedstawiony poniżej fragment kodu HTML reprezentujący strukturę strony po wygenerowaniu przycisków:

Mój przycisk Mój odnoĂnik

A to jest akapit

• I lista wypunktowana...
• choÊ to moĝe akurat nie jest najlepszy pomysï...

Receptura: Przeksztaäcanie elementów w przyciski

Widżet przycisków dodaje wiele klas, których można używać do określania ich postaci, można także używać klas dostępnych w istniejących tematach graficznych. Co więcej, w kodzie jest umieszczany dodatkowy element span, służący do umieszczania zawartości wewnątrz widżetu przycisku. Podczas interakcji z użytkownikiem do widżetu są tymczasowo dodawane kolejne klasy: ui-state-hover, ui-state-active, ui-state-disabled oraz ui-button-disabled.

OkreĈlanie opcji przycisków Opcja disabled została opisana w poprzednim rozdziale. Niemniej jednak warto o niej wspomnieć jeszcze raz, zwłaszcza w kontekście przycisków, gdyż wyłączanie i włączanie ich jest wykorzystywane znacznie częściej niż wyłączanie komponentów draggable. Poniższe przykłady pokazują, jak można wyłączyć przycisk, wyświetlić na nim ikonę oraz zmienić etykietę. Wyłączanie przycisku: $('button').button({ disabled: true});

Wyświetlenie na przycisku dwóch ikon zamiast etykiety tekstowej: $('button').button({ text: false, icons: { primary:'ui-icon-signal', secondary:'ui-icon-signal-diag'} });

Zmiana etykiety przycisku na podany łańcuch znaków: $('button').button({ label: 'Powiedz coĂ innego'});

Obsäuga zdarzeþ przycisków Podobnie jak w przypadku innych widżetów, także procedury obsługi zdarzeń generowanych przez przyciski można określać podczas ich tworzenia oraz inicjalizacji. Poniższe fragmenty kodu pokazują, jak można to robić. Obsługa zdarzenia generowanego podczas tworzenia nowego widżetu button: $('button').button({create: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('button') .on('buttoncreate', function(event, ui) { // obs§uga zdarzenia

}) .button();

167

168

Rozdziaä 7. Interakcja z widĔetami

Zaskakujący może być fakt, że przyciski nie generują żadnych innych zdarzeń. W przypadku przycisków najważniejszym zdarzeniem jest click, a to jest już generowane dla wszystkich elementów HTML, nie trzeba go więc od nowa implementować w jQuery UI.

Metody Metody dostępne w widżetach button są podobne do tych, które udostępnia widżet accordion, opisany na początku tego rozdziału, oraz komponenty draggable, opisane w rozdziale 6., „Interakcja z użytkownikiem”. Tam też można znaleźć szczegółowe informacje dotyczące metod: destroy, disable, enable, option oraz widget. Aby ręcznie odświeżyć przycisk na podstawie bieżącego stanu strony, można wykonać następujące wywołanie: $('button').button('refresh');

Przykäad: OkreĈlanie wyglñdu przycisków opcji przy uĔyciu widĔetu buttonset Oprócz widżetu buttons jQuery UI udostępnia także widżet buttonset. Listing 7.4 pokazuje, w jaki sposób można go użyć, by wyświetlić grupę przycisków opcji w formie zwyczajnych przycisków, z których w danej chwili może być zaznaczony tylko jeden. Listing 7.4. OkreĈlanie wyglñdu grupy przycisków opcji 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Pierwszy
Drugi
Trzeci

W podobny sposób można przekształcić pola wyboru lub konwencjonalne przyciski.

Receptura: Wybór dat przy uĔyciu widĔetu datepicker Przed wprowadzeniem języka HTML5 wybieranie dat na stronach WWW było uciążliwe. Jednak nawet dziś są przeglądarki, które nie udostępniają żadnej użytecznej implementacji kalendarza. Listing 7.5 przedstawia widżet kalendarza — datepicker — udostępniany przez bibliotekę jQuery UI, który operuje na standardowym polu tekstowym. Listing 7.5. Uäatwianie uĔytkownikom wyboru dat 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25



169

170

Rozdziaä 7. Interakcja z widĔetami

Kod umieszczony w wierszach 10. oraz 20. to wszystko, czego potrzeba do zainicjowania prostego kalendarza. Ale to jest jedynie czubek góry lodowej. Pod tą prostą powierzchnią ukrywa się wiele opcji pozwalających na modyfikowanie ustawień i obsługę wielu języków.

OkreĈlanie wyglñdu kalendarza Kod HTML, CSS oraz JavaScript używany do wyświetlania kalendarza nie są najbardziej zachwycającym aspektem tego widżetu. Oto klasy CSS oraz elementy HTML, które należy znać, by samodzielnie określać wygląd widżetu datepicker.

Poprzedni NastÚpny

Listopad  2011

... i tak dalej aĝ do ostatniego tygodnia miesiÈca ...

Pn	Wt	¥r	Cz	Pt	So Receptura: Wybór dat przy uĔyciu widĔetu datepicker	N
		1	2	... i tak dalej aĝ do ostatniego dnia miesiÈca ...

Aktualna data jest oznaczana przy użyciu stylu ui-state-highlight.

OkreĈlanie opcji kalendarza Poniższy fragment kodu pokazuje, że opcja disabled działa tak samo jak w innych komponentach i widżetach. Jej wartość można określić podczas inicjalizacji bądź zmienić później. Jej domyślną wartością jest false. $('#my-date').datepicker({disabled: true});

Opcja altField pozwala określić pole, które widżet spróbuje odnaleźć i zaktualizować po wybraniu daty.

171

172

Rozdziaä 7. Interakcja z widĔetami

Opcja altFormat zmienia postać, w jakiej będzie zapisana zwracana data. W przeciwieństwie do tego, co można by przypuszczać, symbol yy oznacza rok zapisany przy użyciu czterech cyfr. Jeśli zatem w formacie użyjemy zapisu yyyy, to zwrócona data będzie mieć postać 23-06-20122012, a nie 23-06-2012. $('#my-date').datepicker({ altField: '#dutch-notation', altFormat: 'dd-mm-yy' });

Poniższe wywołanie określa tekst, który jest wyświetlany za polem tekstowym, w celu przedstawienia formatu, w jakim użytkownik powinien ręcznie wpisywać datę: $('#my-date').datepicker({appendText: '(mm/dd/yyyy)'});

Poniższe wywołanie określa, czy należy modyfikować wielkość pola tekstowego w taki sposób, by zmieściła się w nim bieżąca data. Domyślną wartością tej opcji jest false: $('#my-date').datepicker({autoSize: true});

Na podstawie znajomości innych widżetów i komponentów jQuery UI można by przypuszczać, że wszystkie aspekty wyglądu kalendarza są modyfikowane lub określane przy użyciu nazw klas, takich jak ui-icon-calendar. Jednak w celu wyświetlenia graficznego przycisku kalendarza należy podać ścieżkę dostępu do pliku graficznego, taką jak ta przedstawiona poniżej: $('#my-date').datepicker({buttonImage: '/images/my-image.png'});

Poniższe wywołanie pokazuje, jak można usunąć tekst z przycisku. Domyślną wartością tej opcji jest false: $('#my-date').datepicker({buttonImageOnly: true});

Opcja buttonText pozwala zmienić tekst wyświetlany na przycisku. Można także skorzystać z opcji showOn, by określić, kiedy kalendarz będzie wyświetlany. Domyślna wartość tej opcji, focus, powoduje, że będzie on wyświetlany, kiedy użytkownik przejdzie do pola tekstowego, klikając je lub używając klawisza tabulacji. Użycie wartości button sprawi, że kalendarz będzie wyświetlany po kliknięciu przycisku, natomiast w przypadku podania obu tych wartości kalendarz zostanie wyświetlony dopiero, gdy wystąpią oba te zdarzenia. Poniższe wywołanie powoduje, że obok pola tekstowego zostanie wyświetlony przycisk z napisem Wybierz datÚ, a kalendarz będzie wyświetlany dopiero po kliknięciu tego przycisku: $('#my-date').datepicker({buttonText: 'Wybierz datÚ', showOn: 'button'});

Można także zmieniać sposób określania tygodni. Domyślny sposób jest zgodny ze standardem ISO 8601. Oznacza to, że pierwszy tydzień roku jest zależny od tego, kiedy wypada pierwszy czwartek roku:

Receptura: Wybór dat przy uĔyciu widĔetu datepicker $('#my-date').datepicker({calculateWeek: function(date) { // okreĻla numer tygodnia na podstawie daty

return calculatedWeekNr; }});

Poniższe wywołanie pozwala wyświetlać rozwijalne listy z miesiącami i latami, zamiast strzałek służących do przechodzenia do poprzedniego i następnego miesiąca. Domyślną wartością obu tych opcji jest false: $('#my-date').datepicker({changeMonth: true, changeYear: true});

Opisane tu opcje zmieniają teksty wyświetlane na przyciskach w widżecie. Opcja closeText określa tekst wyświetlany na przycisku do zamykania kalendarza, a jej domyślną wartością jest Done1. Opcja currentText zmienia tekst widoczny na przycisku służącym do przejścia do bieżącej daty; jej domyślną wartością jest Today. Opcja prevText zmienia tekst alternatywny odnośnika pozwalającego na wyświetlenie poprzedniego miesiąca; jej domyślną wartością jest Prev. Opcja nextText zmienia tekst alternatywny odnośnika pozwalającego na wyświetlenie poprzedniego miesiąca, jej domyślną wartością jest Next. Opcja showButtonPanel określa, czy panel z przyciskami ma być wyświetlany, czy nie; jej domyślną wartością jest false. Poniższe wywołanie zmienia tekst przycisku zamykającego kalendarz na Anuluj, tekst na przycisku wyświetlającym bieżącą datę na DziĂ, teksty odnośników do poprzedniego i następnego miesiąca odpowiednio na: WczeĂniejszy oraz Kolejny, a oprócz tego nakazuje wyświetlenie panelu przycisków: $('#my-date').datepicker({closeText: 'Anuluj', currentText: 'DziĂ', prevText: 'WczeĂniejszy', nextText: 'Kolejny', showButtonPanel: true});

Czytelnik trzymający w ręku tę książkę może mieszkać w niewielkim kraju w Europie Środkowej i nie być całkowicie przekonany, że język angielski będzie optymalny dla internautów z dwudziestego pierwszego wieku. Oczywiście, istnieje spora szansa, że kiedyś zamiast angielskiego rolę tę zacznie spełniać język chiński. Jednak chiński jest trudnym językiem i jeszcze musi przejść długą drogę, zanim podbije świat. Aby zdystansować się od debaty o tym, który z języków — angielski czy chiński — powinien odgrywać dominującą rolę, można zachować neutralność i zapisywać teksty i daty na tworzonej witrynie w mało znanym i przestarzałym języku, takim jak język polski. Polacy robią wszystko trochę inaczej. Na przykład, daty zapisują w formacie dd-mm-yy, a nie mm/dd/yy. Ale to żaden problem — widżet datepicker pozwala na zapisywanie dat w dowolnym formacie. Poniższy fragment kodu przedstawia sposób polonizacji kalendarza jQuery UI:

1

W przypadku domyślnej, spolonizowanej wersji kalendarza domyślną wartością opcji closeText jest Zamknij, a opcji currentText — DziĂ. Domyślnymi wartościami opcji prevText oraz nextText są odpowiednio: — przyp. tłum.

173

174

Rozdziaä 7. Interakcja z widĔetami $.datepicker.regional['pl'] = { dateFormat: 'yy-mm-dd', dayNames: ['Niedziela','Poniedziaïek','Wtorek','¥roda','Czwartek', 'PiÈtek','Sobota'], dayNamesMin: ['N','Pn','Wt','¥r','Cz','Pt','So'], dayNamesShort: ['Nie','Pn','Wt','¥r','Czw','Pt','So'], monthNames: ['Styczeñ','Luty','Marzec','Kwiecieñ','Maj','Czerwiec', 'Lipiec','Sierpieñ','Wrzesieñ','Paědziernik','Listopad','Grudzieñ'], monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze', 'Lip','Sie','Wrz','Pa','Lis','Gru']};

Opcja duration pozwala określić szybkość wyświetlania kalendarza. Wartością tej opcji może także być liczba określająca czas animacji wyrażony w milisekundach: $('#my-date').datepicker({duration: 'slow'});

Poniższe wywołanie pozwala skonfigurować kalendarz w taki sposób, że tygodnie będą zaczynać się od środy, a nie od niedzieli2. Domyślną wartością opcji firstDay jest 0, która to liczba reprezentuje niedzielę. Reszcie dni tygodnia odpowiadają kolejne liczby: 1 — poniedziałkowi, 2 — wtorkowi itd. $('#my-date').datepicker({firstDay: 3});

Jeśli zostanie określona wartość opcji minDate bądź maxDate, to zamiast wyłączania przycisków pozwalających na wyświetlanie poprzedniego i następnego miesiąca można je całkowicie ukryć. Domyślną wartością tej opcji jest false: $('#my-date').datepicker({hideIfNoPrevNext: true});

Jeśli widżet kalendarza jest wyświetlany na stronie napisanej na przykład w języku arabskim, to prezentowane w nim daty powinny być rozmieszczane od prawej do lewej. (Uwaga: litery RTL w nazwie tej opcji pochodzą od angielskich słów: right to left — od prawej do lewej). Jej domyślną wartością jest false: $('#my-date').datepicker({isRTL: true});

Poniższy fragment kodu ogranicza dostępny zakres dat do podanej daty maksymalnej i minimalnej. W tym przykładzie litera w oznacza tygodnie. Można także używać liter: d, m oraz y, oznaczających odpowiednio: dni miesiące oraz lata; można także podać konkretną datę w postaci łańcucha zapisanego w odpowiednim formacie: $('#my-date').datepicker({ maxDate: '+5w', minDate: '–4w'});

Użyta w poniższym przykładzie opcja numberOfMonths określa, że kalendarz powinien jednocześnie wyświetlać 3 miesiące. Domyślną wartością tej opcji jest 1. Druga z zastosowanych opcji — showCurrentAtPos — informuje, że bieżący miesiąc należy wyświetlić na drugim miejscu. Domyślną wartością tej opcji jest 0, a miejsca są liczone od lewego górnego wierzchołka widżetu kalendarza: 2

W krajach anglojęzycznych tygodnie zaczynają się od niedzieli, takie też jest domyślne ustawienie kalendarza — przyp. tłum.

Receptura: Wybór dat przy uĔyciu widĔetu datepicker $('#my-date').datepicker({numberOfMonths: 3, showCurrentAtPos: 1});

Poniższa opcja pokazuje, w jaki sposób można wyświetlać w kalendarzu ostatnie dni poprzedniego miesiąca oraz pierwsze dni następnego miesiąca. Obie opcje widoczne na poniższym przykładzie zostały przedstawione razem, gdyż opcja selectOtherMonths będzie działać wyłącznie w przypadku, gdy opcji showOtherMonths zostanie przypisana wartość true. Domyślną wartością obu tych opcji jest false: $('#my-date').datepicker({selectOtherMonths: true, showOtherMonths: true});

Powyższa opcja określa, kiedy widżet będzie uznawał, że rok zapisany przy użyciu dwóch cyfr należy do bieżącego wieku, a kiedy do poprzedniego. Domyślną wartością tej opcji jest +10: $('#my-date').datepicker({shortYearCutoff: '+20'});

Opcji showAnim można używać, aby podczas korzystania z widżetu były odtwarzane animacje. Dostępnymi wartościami tej opcji są: blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide oraz transfer. Jej domyślną wartością jest show: $('#my-date').datepicker({showAnim: 'blind'});

Poniższa opcja pozwala zmienić postać nagłówka kalendarza i zmienić kolejność wyświetlanej w nim nazwy miesiąca i roku. Także ta opcja jest zależna od lokalizacji kalendarza. Jej domyślną wartością jest false: $('#my-date').datepicker({showMonthAfterYear: true});

Można także określać dodatkowe parametry wykorzystywane przez animacje. Domyślną wartością tej opcji jest domyślna wartość opcji showAnim: $('#my-date').datepicker({showAnim: 'slide', showOptions: {direction: 'down' }});

Poniższa opcja określa, czy mają być wyświetlane numery tygodni; jej domyślną wartością jest false: $('#my-date').datepicker({showWeek: true});

Opcja stepMonth pozwala szybko przewijać miesiące w przypadkach, gdy w kalendarzu jest ich wyświetlonych kilka. Domyślną wartością tej opcji jest 1: $('#my-date').datepicker({stepMonths: 2});

Kolejna opcja zmienia nagłówek tygodnia (jest ona przydatna podczas lokalizowania kalendarza): $('#my-date').datepicker({weekHeader: 'w'});

175

176

Rozdziaä 7. Interakcja z widĔetami

Opcja yearRange zmienia zakres lat, które będzie można wybierać w kalendarzu. Poniższy przykład może się przydać podczas tworzenia kalendarza do wyboru dat urodzin. Stosowanie tego ograniczenia wymaga także wyświetlenia rozwijanej listy z latami: $('#my-date').datepicker({yearRange: 'c-120:c-18', changeYear: true});

Ostatnia opcja pozwala na wyświetlenie dodatkowego tekstu za rokiem: $('#my-date').datepicker({yearSuffix: ' A.D.'});

Obsäuga zdarzeþ kalendarza Istnieje wiele miejsc, w których można obsługiwać zdarzenia generowane podczas korzystania z widżetu datepicker. Zostały one przedstawione na fragmentach kodu zamieszczonych w tym punkcie rozdziału. Oto zdarzenie pozwalające na wykonywanie czynności podczas inicjalizacji widżetu: $('#my-date').datepicker({create: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-date') .on('datepickercreate', function(event, ui) { // obs§uga zdarzenia

}) .datepicker();

Funkcja określona w opcji beforeShow zwraca obiekt opcji pozwalający zmodyfikować widżet kalendarza. W jej wywołaniu przekazywane jest pole tekstowe oraz obiekt kalendarza. Dzięki temu można uzależnić opcje widżetu od daty aktualnie podanej w polu: $('#my-date').datepicker({beforeShow: function(input, inst) { return {yearSuffix: ' A.D.'}; }});

Opcji beforeShowDay można używać do podawania dodatkowych szczegółów odnośnie działania i wyglądu kalendarza. Opcja ta pozwala określać funkcję, która może się przydać, gdy na przykład cena oferowanej przez nas usługi zależy od konkretnej daty. W ramach przykładu można sobie wyobrazić aplikację do rezerwowania miejsc w hotelach lub podobną: $('#my-date').datepicker({beforeShowDay: function() { return [ true, // dat£ moŚna wybraô 'my-class', // dodanie klasy my-class 'Probably NOT X-Mas' // etykietka ekranowa ]; }});

Kolejną możliwością jest wykonywanie jakichś operacji w momencie wyboru miesiąca lub roku. Na przykład, w odpowiedzi na wybór nowego miesiąca można zaktualizować całą stronę wyświetlaną w przeglądarce. Można by na przykład zmieniać wygląd strony zależnie od pory roku bądź wprowadzać na niej jakiekolwiek inne zmiany:

Receptura: Wybór dat przy uĔyciu widĔetu datepicker $('#my-date').datepicker({ onChangeMonthYear: function(year, month, inst) { alert(year + '–' + month); }});

Poniżej pokazano, jak można zdefiniować własną funkcję, która będzie wywoływana w momencie zamykania kalendarza, niezależnie od tego, czy została w nim wybrana jakaś data, czy nie. Jeśli żadna data nie została wybrana, to parametr dateText będzie pusty. Oto przykład pokazujący, jak można wyświetlić wybraną datę: $('#my-date').datepicker({ onClose: function(dateText, inst) { alert(dateText); }});

Podobnie do zdarzenia onClose także zdarzenie onSelect zawsze zwraca wybraną datę: $('#my-date').datepicker({ onSelect: function(dateText, inst) { alert(dateText); }});

Wywoäywanie metod kalendarza Widżet datepicker udostępnia te same metody co widżet akordeonu, przedstawiony na początku tego rozdziału, oraz komponenty draggable, opisane w rozdziale 6. Chodzi tu konkretnie o metody: destroy, disable, enable, option oraz widget. Poniższa funkcja wyświetla widżet kalendarza w formie okna dialogowego na środku okna przeglądarki. W wywołaniu tej funkcji można jednocześnie przekazać funkcję obsługującą zdarzenia onSelect, obiekt zawierający dodatkowe ustawienia oraz parę współrzędnych [x, y] określających położenie okna dialogowego: $('#my-date').datepicker('dialog', '02/05/2013');

Poniższe wywołanie zwraca informację, czy widżet datepicker jest aktualnie aktywny czy nie: ('#my-date').datepicker('isDisabled');

Oto jak można ukryć kalendarz: $('#my-date').datepicker('hide');

A w poniższy sposób można go wyświetlić, jeśli jest ukryty: $('#my-date').datepicker('show');

Poniższe wywołanie pozwala odświeżyć widżet po zmianie zawartości strony: $('#my-date').datepicker('refresh');

177

178

Rozdziaä 7. Interakcja z widĔetami

Poniższe wywołanie zwraca aktualnie wybraną datę (lub null, jeśli żadna data nie została jeszcze wybrana): $('#my-date').datepicker('getDate');

Poniżej pokazany został sposób zmiany wybranej daty. Można także używać takich wartości jak '+1m +2y', by przesunąć wybraną datę o dwa lata i jeden miesiąc w przód: $('#my-date').datepicker('setDate', '02/02/2013');

Receptura: Przyciñganie uwagi przy uĔyciu okien dialogowych Jeśli chcemy, by niewielki fragment tworzonej strony skoncentrował na sobie uwagę użytkownika, to możemy to zrobić na kilka sposobów. Jednym z nich jest wyświetlenie takich treści w formie okna dialogowego. jQuery UI udostępnia taki komponent. Listing 7.6 pokazuje, w jaki sposób można utworzyć okno dialogowe na podstawie zwyczajnego akapitu. Listing 7.6. Przeksztaäcanie akapitu w okno dialogowe 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Oto tekst bÚdÈcy zawartoĂciÈ okna dialogowego.

WyĂwietl okno dialogowe

Receptura: Przyciñganie uwagi przy uĔyciu okien dialogowych

Kod umieszczony w wierszach 22. – 24. łączy inicjalizację okna dialogowego z obsługą kliknięcia przycisku, a zatem okno nie zostanie wyświetlone podczas wczytywania strony. Takie rozwiązanie wyraźnie pokazuje, że bezpośrednio po wczytaniu strony zawartość okna dialogowego jest zwyczajnym akapitem tekstu. Inicjalizacja okna dialogowego sprawia, że akapit ten wydaje się znikać z dokumentu.

OkreĈlanie wyglñdu okna dialogowego Komponent okna dialogowego generuje dosyć rozbudowany kod HTML, wewnątrz którego zostaje umieszczony oryginalny element wybrany na zawartość okna. Dlatego też w poniższym przykładzie to właśnie ten oryginalny element został wyróżniony, a nie nowe elementy, które do niego dodano. Trzeba zwrócić uwagę, że cały ten kod HTML został wygenerowany. Nie trzeba go nigdzie wpisywać. Powstanie on po wykonaniu skryptu przedstawionego na listingu 7.6.

  close

Oto tekst będący zawartością okna dialogowego.

179

180

Rozdziaä 7. Interakcja z widĔetami

W powyższym kodzie można rozpoznać uchwyty do zmiany wielkości, znane z komponentu resizable.

OkreĈlanie opcji okna dialogowego Okno dialogowe posiada wiele opcji, których wartości można ustawiać, by zmieniać dane lub nawet tekst wyświetlany w oknie. Tabela 7.4 zawiera fragmenty kodu pokazujące sposób określania dostępnych opcji widżetu dialog wraz z opisami ich znaczenia. Tabela 7.4. Dostöpne opcje widĔetu okna dialogowego oraz ich opisy

Opcja

Opis

$('#my-dialog').dialog({disabled:

Wyäñcza okno dialogowe. DomyĈlnñ wartoĈciñ tej opcji jest false.

true}); $('#my-dialog').dialog({autoOpen: false});

$('#my-dialog').dialog({buttons: { 'Mój przycisk': function() {alert('KlikniÚto przycisk');}

Okno pozostanie zamkniöte aĔ do momentu, gdy jawnie zaĔñdamy jego wyĈwietlenia. Utworzenie okna dialogowego powoduje ukrycie oryginalnego elementu HTML, który zostaä wybrany jako jego zawartoĈè. DomyĈlnñ wartoĈciñ tej opcji jest true. OkreĈla niestandardowy zbiór przycisków wyĈwietlanych u doäu okna dialogowego, wraz z procedurami obsäugi klikniöè tych przycisków.

}}); $('#my-dialog').dialog({closeOnEscape: false});

Zapobiega zamykaniu okna dialogowego po naciĈniöciu klawisza Esc. DomyĈlnñ wartoĈciñ tej opcji jest true.

$('#my-dialog').dialog({closeText: 'X'});

Opcja pozwala zmieniè tekst etykietki ekranowej dla przycisku zamykajñcego okno. DomyĈlnie ma ona treĈè close.

$('#my-dialog').dialog({dialogClass:

Ta opcja pozwala dodawaè klasy säuĔñce do okreĈlania postaci okna dialogowego.

'my-dialog'}); $('#my-dialog'). dialog({draggable: false}); $('#my-dialog').dialog({height: 200, width: 200}); $('#my-dialog').dialog({hide:'bounce'});

UniemoĔliwia przeciñganie okna dialogowego w oknie przeglñdarki. DomyĈlnñ wartoĈciñ tej opcji jest true. Zmienia wymiary okna dialogowego. DomyĈlnñ wartoĈciñ tej opcji jest auto. Opcja pozwala zmieniè animacjö odtwarzanñ podczas ukrywania okna dialogowego. UĔycie efektu bounce moĔe byè w tym przypadku nieco przesadne.

Receptura: Przyciñganie uwagi przy uĔyciu okien dialogowych Tabela 7.4. Dostöpne opcje widĔetu okna dialogowego oraz ich opisy (ciñg dalszy)

Opcja

Opis

$('#my-dialog').dialog({maxHeight: 300, maxWidth: 300});

Te dwie opcje okreĈlajñ maksymalne wymiary okna dialogowego. Ich domyĈlnñ wartoĈciñ jest false, co oznacza, Ĕe uĔytkownik moĔe dowolnie zmieniaè wymiary okna.

$('#my-dialog').dialog({minHeight: 100, minWidth: 300});

Te dwie opcje okreĈlajñ minimalne wymiary okna. DomyĈlnñ wartoĈciñ obu tych opcji jest 150.

$('#my-dialog').dialog({modal:true});

Ta opcja powoduje, Ĕe okno zostanie wyĈwietlone jako modalne okno dialogowe, przez co kiedy bödzie widoczne, uĔytkownicy nie bödñ mieli dostöpu do pozostaäej zawartoĈci strony. DomyĈlnñ wartoĈciñ tej opcji jest false.

$('#my-dialog').dialog({position:

OkreĈlajñc wartoĈci tej opcji, moĔna takĔe uĔyè äaþcuchów znaków center bñdĒ tablic lub äaþcuchów znaków, takich jak ['left', 'top']. Jej domyĈlnñ wartoĈciñ jest center.

[100, 100]});

$('#my-dialog').dialog({resizable: false});

Ta opcja uniemoĔliwia zmianö wielkoĈci okna dialogowego. Jej domyĈlnñ wartoĈciñ jest true.

$('#my-dialog').dialog({show:'bounce'});

WyĈwietla okno dialogowe, uĔywajñc przy tym animacji, podobnie jak w przypadku opcji hide.

$('#my-dialog').dialog({stack:false});

Zapobiega sytuacji, gdy jedno okno dialogowe bödzie przesäaniaè inne. WartoĈciñ domyĈlnñ tej opcji jest true.

$('#my-dialog').dialog({title: 'Tytuï okna dialogowego'});

OkreĈla tekst wyĈwietlany w nagäówku okna dialogowego.

$('#my-dialog').dialog({zIndex: 1001});

Zmienia wartoĈè wäaĈciwoĈci zIndex. DomyĈlnñ wartoĈciñ tej opcji jest 1000.

Obsäuga zdarzeþ generowanych przez okna dialogowe Poniższe fragmenty kodu pokazują, w jaki sposób można obsługiwać zdarzenia generowane przez widżet dialog. Oto sposób obsługi zdarzeń generowanych podczas inicjalizacji okna dialogowego: $('#my-dialog').dialog({create: function(event, ui) { // obs§uga zdarzenia

}}); $('#my-dialog') // lub .on('dialogcreate', function(event, ui) { // obs§uga zdarzenia

}) .dialog();

181

182

Rozdziaä 7. Interakcja z widĔetami

Ten przykład pokazuje sposób obsługi zdarzeń generowanych w momencie, gdy użytkownik próbuje zamknąć okno dialogowe. Zwrócenie przez tę funkcję wartości false spowoduje, że okna nie będzie można zamknąć: $('#my-dialog').dialog({beforeClose: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogbeforeclose', function(event, ui) { // obs§uga zdarzenia

});

Te zdarzenia są generowane podczas otwierania okna dialogowego: $('#my-dialog').dialog({open: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogopen', function(event, ui) { // obs§uga zdarzenia

});

Obsługa zdarzeń generowanych, kiedy użytkownik przejdzie do okna dialogowego, używając klawisza Tab lub klikając je myszką: $('#my-dialog').dialog({focus: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogfocus', function(event, ui) { // obs§uga zdarzenia

});

Poniższe zdarzenia są generowane, kiedy użytkownik zaczyna przeciągać okno dialogowe: $('#my-dialog').dialog({dragStart: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogdragstart', function(event, ui) { // obs§uga zdarzenia

});

Te zdarzenia są generowane, kiedy użytkownik kontynuuje przeciąganie okna dialogowego: $('#my-dialog').dialog({drag: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog()

Receptura: Przyciñganie uwagi przy uĔyciu okien dialogowych .on('dialogdrag', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane, gdy użytkownik skończy przeciągać okno dialogowe: $('#my-dialog').dialog({dragStop: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogdragstop', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane, kiedy użytkownik rozpocznie zmianę wielkości okna dialogowego: $('#my-dialog').dialog({resizeStart: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogresizestart', function(event, ui) { // obs§uga zdarzenia

});

Te zdarzenia są generowane, kiedy użytkownik będzie kontynuował zmianę wielkości okna dialogowego: $('#my-dialog').dialog({resize: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogresize', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane, kiedy użytkownik skończy zmieniać wielkość okna dialogowego: $('#my-dialog').dialog({resizeStop: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-dialog').dialog() .on('dialogresizestop', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane podczas zamykania okna dialogowego: $('#my-dialog').dialog({close: function(event, ui) { // obs§uga zdarzenia

}}); // lub

183

184

Rozdziaä 7. Interakcja z widĔetami $('#my-dialog').dialog() .on('dialogclose', function(event, ui) { // obs§uga zdarzenia

});

Wywoäywanie metod okien dialogowych Widżet okna dialogowego dysponuje tymi samymi metodami co widżet akordeonu, przedstawiony na początku tego rozdziału, oraz komponenty draggable, opisane w rozdziale 6.; konkretnie chodzi o metody: destroy, disable, enable, option oraz widget. Poniższe wywołanie całkowicie usuwa okno dialogowe ze strony: $('#my-dialog').dialog('destroy');

Poniższa metoda wyłącza okno dialogowe: $('#my-dialog').dialog('disable');

A ta je włącza: $('#my-dialog').dialog('enable');

Poniższe wywołanie pokazuje, jak można odczytać lub ustawić wartość okna dialogowego: $('#my-dialog').dialog('option', options);

Poniższe wywołanie zwraca element okna dialogowego: $('#my-dialog').dialog('widget');

Kolejny przykład pokazuje, jak zamknąć otwarte okno dialogowe. Można je potraktować jako rodzaj funkcji ukrywającej okno. Po zamknięciu okno dialogowe można ponownie wyświetlić: $('#my-dialog').dialog('close');

Określa, czy okno dialogowe jest aktualnie wyświetlone: $('#my-dialog').dialog('isOpen');

Jeśli okno dialogowe jest przesłonięte przez inne okna, to poniższe wywołanie pozwala je wyświetlić ponad innymi: $('#my-dialog').dialog('moveToTop');

To wywołanie wyświetla uprzednio zamknięte okno dialogowe lub okno, w którym podczas tworzenia użyto opcji autoOpen z wartością false: $('#my-dialog').dialog('open');

Receptura: WyĈwietlanie informacji o postöpie prac przy uĔyciu widĔetu progressbar

Receptura: WyĈwietlanie informacji o postöpie prac przy wykorzystaniu widĔetu progressbar Receptura: WyĈwietlanie informacji o postöpie prac przy uĔyciu widĔetu progressbar

Kiedy tworzona aplikacja internetowa realizuje jakieś operacje, których wykonanie może zająć więcej niż około dwóch sekund, to dobra praktyka nakazuje, by wyświetlić coś, co będzie pokazywać użytkownikom postęp wykonywanych operacji. Kiedy nie wiadomo, jaki jest status wykonywanej operacji, to zazwyczaj zmienia się wskaźnik myszy, nadając mu postać obracającego się kółka. Jednak w niektórych przypadkach będziemy dysponowali informacjami o postępach wykonywanych operacji. W takich sytuacjach warto przekazywać użytkownikom możliwie jak najdokładniejsze informacje, aby spełnić ich wymagania. Listing 7.7 przedstawia widżet paska postępu jQuery UI — progressbar — którego można używać do prezentowania informacji o postępach wykonywanych prac. Listing 7.7. Przeksztaäcanie elementu

w pasek postöpów 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

37 38

W tym przypadku do symulacji prawdziwych postępów wykonywanych operacji wykorzystana została wbudowana funkcja języka JavaScript o nazwie setInterval. Określanie postępu realizacji rzeczywistych procesów może wymagać dokładnego przemyślenia i złożonych obliczeń.

OkreĈlanie wyglñdu paska postöpów Biblioteka jQuery UI dodaje do wskazanego elementu div kilka klas i atrybutów oraz zagnieżdżony element div reprezentujący postęp wykonywanych operacji. Należy unikać umieszczania tekstów w elemencie div wskazanym jako pasek postępów, gdyż spowoduje to, że graficzny wskaźnik postępu zostanie przesunięty w dół.

Ustawianie opcji paska postöpów Poniższe wywołania pokazują, w jaki sposób można określać opcje paska postępów. Aby wyłączyć pasek postępów podczas jego tworzenia: $('#my-progress').progressbar({disabled: true});

Aby utworzyć pasek postępów wypełniony w 25 procentach: $('#my-progress').progressbar({value: 25});

Obsäuga zdarzeþ paska postöpów Poniższe fragmenty kodu pokazują, w jaki sposób można obsługiwać zdarzenia generowane przez widżet progressbar. Oto jak obsługiwać zdarzenie generowane podczas inicjalizacji widżetu: $('#my-progress').progressbar({create: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-progress') .on('progressbarcreate', function(event, ui) { // obs§uga zdarzenia

}) .progressbar();

Receptura: Pobieranie liczb przy wykorzystaniu suwaka

Oto sposób obsługi zdarzeń generowanych podczas zmiany statusu paska postępu: $('#my-progress').progressbar({change: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-progress').progressbar() .on('progressbarchange', function(event, ui) { // obs§uga zdarzenia

});

Poniższe zdarzenie jest generowane, gdy pasek postępu zostanie w całości wypełniony. Można go używać, aby zmienić wygląd widżetu, na przykład go wyróżnić: $('#my-progress').progressbar({complete: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-progress').progressbar() .on('progressbarcomplete', function(event, ui) { // obs§uga zdarzenia

});

Wywoäywanie metod paska postöpów Widżet progressbar używa tych samych metod co komponenty draggable, opisane w rozdziale 6., oraz przedstawione wcześniej w tym rozdziale widżety dialog i accordion. W ich opisach można znaleźć informacje o metodach destroy, disable, enable, option oraz widget. Poniższe wywołanie zmienia wartość paska postępów: $('#my-progress').progressbar('value', 50});

Receptura: Pobieranie liczb przy wykorzystaniu suwaka W aplikacjach klienckich czasami można znaleźć suwaki stosowane jako elementy służące do podawania liczb. Ich zaletą jest to, że mają bardziej wizualny charakter, a korzystanie z nich jest bardziej intuicyjne niż wpisywanie liczb w zwyczajnym polu tekstowym. Listing 7.8 pokazuje, w jaki sposób można przekształcić element div w suwak, używając w tym celu widżetu slider. Listing 7.8. Przeksztaäcanie elementu div w suwak i wyĈwietlanie wartoĈci wybieranej przy jego uĔyciu 00 01 02 03

187

188

Rozdziaä 7. Interakcja z widĔetami 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Oto suwak:

WartoĂÊ wybrana przy uĝyciu suwaka:

Oprócz inicjalizacji samego widżetu slider powyższy kod implementuje także procedurę obsługi generowanych przez suwak zdarzeń change. Wszystkie zmiany są prezentowane w standardowym polu tekstowym, utworzonym przy użyciu elementu input.

OkreĈlanie wyglñdu suwaka W porównaniu z innymi komponentami jQuery UI widżet slider generuje kod HTML o stosunkowo prostej strukturze. Poniższy fragment kodu pokazuje, że do oryginalnego elementu div zostały dodane pewne klasy, by nadać mu charakterystyczny wygląd suwaka, oraz element odnośnika pełniący rolę uchwytu suwaka.

Receptura: Pobieranie liczb przy wykorzystaniu suwaka

OkreĈlanie opcji suwaków Widżet slider udostępnia kilka opcji, których wartości można zmieniać. Tabela 7.5 zawiera fragmenty kodu przedstawiające sposoby określania dostępnych opcji oraz ich opisy. Tabela 7.5. Opcje widĔetu slider

Opcja

Opis

$('#my-slider'). slider({disabled: true});

Tworzy suwak, który bezpoĈrednio po utworzeniu bödzie wyäñczony. DomyĈlnñ wartoĈciñ tej opcji jest false.

$('#my-slider').slider ({animate: 'slow'});

Odtwarza animacjö, gdy uĔytkownik kliknie suwak, zamiast przeciñgaè jego uchwyt. Opcja ta moĔe przyjmowaè nastöpujñce wartoĈci: slow, normal, fast bñdĒ teĔ liczbö okreĈlajñcñ czas trwania animacji wyraĔony w milisekundach.

$('#my-slider').slider ({min: 25, max: 250});

OkreĈla zakres wybieranych wartoĈci. DomyĈlnym zakresem jest: 0 – 100. DomyĈlnñ wartoĈciñ minimalnñ jest 0, a maksymalnñ 100.

$('#my-slider').slider ({orientation: 'vertical'});

Zmienia suwak poziomy na pionowy.

$('#my-slider').slider ({ range: true,

UmoĔliwia wyĈwietlenie dwóch uchwytów pozwalajñcych na wybranie zakresu wartoĈci. Innymi moĔliwymi wartoĈciami tej opcji sñ äaþcuchy znaków min i max. DomyĈlnñ wartoĈciñ tej opcji jest false.

values: [25, 50]}); $('#my-slider'). slider({step: 10});

Ogranicza wartoĈci suwaka do: 0, 10, 20 i tak dalej.

$('#my-slider'). slider({value: 10});

OkreĈla poczñtkowñ wartoĈè suwaka. W przypadku gdy suwak pozwala na wybór zakresu wartoĈci, wartoĈciñ tej opcji powinna byè tablica zawierajñca dwie liczby. DomyĈlnñ wartoĈciñ tej opcji jest 0.

Obsäuga zdarzeþ suwaka Suwaki udostępniają kilka zdarzeń, które można obsługiwać. Przykłady sposobów określania procedur obsługi tych zdarzeń zostały przedstawione na poniższych fragmentach kodu. Obsługa zdarzenia generowanego podczas inicjalizacji widżetu slider: $('#my-slider').slider({create: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-slider') .on('slidecreate', function(event, ui) { // obs§uga zdarzenia

}) .slider();

189

190

Rozdziaä 7. Interakcja z widĔetami

Obsługa zdarzenia generowanego, kiedy użytkownik zacznie przeciągać uchwyt suwaka: $('#my-slider').slider({start: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-slider').slider() .on('slidestart', function(event, ui) { // obs§uga zdarzenia

});

Obsługa zdarzenia generowanego, kiedy użytkownik kontynuuje przeciąganie uchwytu suwaka: $('#my-slider').slider({slide: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-slider').slider() .on('slide', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane w momencie zmiany wartości suwaka: $('#my-slider').slider({change: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-slider').slider() .on('slidechange', function(event, ui) { // obs§uga zdarzenia

});

Poniższe zdarzenie jest generowane, kiedy użytkownik skończy przeciągać uchwyt suwaka: $('#my-slider').slider({stop: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-slider').slider() .on('slidestop', function(event, ui) { // obs§uga zdarzenia

});

Wywoäywanie metod suwaków Widżet slider używa tych samych metod co komponenty draggable, opisane w rozdziale 6., oraz przedstawione wcześniej w tym rozdziale widżety dialog i accordion. W ich opisach można znaleźć informacje o metodach destroy, disable, enable, option oraz widget. Oto w jaki sposób można przypisać suwakowi wartość 10: $('#my-slider').slider('value', 10);

Receptura: Nawigowanie po stronie przy wykorzystaniu kart

Poniższe wywołanie ustawia suwak w taki sposób, że wybrany będzie zakres 10 – 20: $('#my-slider').slider('values', [10, 20]);

Receptura: Nawigowanie po stronie przy wykorzystaniu kart Wcześniej w tym rozdziale został przedstawiony widżet accordion, służący do grupowania zawartości i wyświetlania tylko jednej z tych grup w danej chwili. Widżet kart prezentowany w tej recepturze pełni podobną funkcję, choć pod niektórymi względami nieznacznie różni się od akordeonu. Zazwyczaj, choć nie zawsze, widżet accordion najlepiej nadaje się jako dodatkowy komponent umieszczony gdzieś z boku głównej strony, natomiast widżet kart najlepiej zastosować jako główną zawartość strony. Przykład przedstawiony na listingu 7.9 przekształca stosunkowo prostą strukturę elementów HTML w zestaw kart. Jedna z różnic pomiędzy widżetami kart i akordeonu polega na tym, że lista zakładek kart jest oddzielona od samej zawartości kart; w przypadku akordeonu nagłówek grupy bezpośrednio poprzedza w kodzie HTML zawartość danej grupy. Listing 7.9. Przeksztaäcanie listy wypunktowanej w zestaw kart 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

• Pierwsza
• Druga
• Trzecia

Oto treĂÊ pierwszej karty.

191

192

Rozdziaä 7. Interakcja z widĔetami 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

Jak widaÊ, wyĂwietliïeĂ teraz drugÈ kartÚ.

I w koñcu dotarïeĂ do ostatniej, trzeciej karty.

W przykładzie przedstawionym na listingu 7.9 zawartość poszczególnych kart została umieszczona w odrębnych elementach div, zapisanych w wierszach 27. – 35. Bez trudu można zmodyfikować ten przykład w taki sposób, by zawartość zakładek była pobierana z serwera przy użyciu technologii AJAX. W tym przypadku należy zastąpić atrybut href odwołaniem do zasobu na serwerze stanowiącego zawartość, którą należy wyświetlić na danej karcie. Zawartość ta musi się znajdować na tym samym serwerze, z którego została pobrana bieżąca strona WWW. W razie podania takiego odwołania widżet automatycznie, w niewidoczny dla nas sposób, użyje funkcji load() jQuery, by wczytać i wyświetlić zawartość karty. Funkcja load() została dokładniej opisana w rozdziale 5., „Komunikacja z serwerem”.

OkreĈlanie wyglñdu kart Widżet tabs nie wprowadza wielu zmian w kodzie HTML strony. Dodaje jednak wiele klas, przy użyciu których można określać wygląd kart; można przy tym skorzystać z gotowych tematów graficznych, własnych tematów tworzonych przy użyciu narzędzia ThemeRoller bądź z własnych stylów.

• Pierwsza
• 
  
  Receptura: Nawigowanie po stronie przy wykorzystaniu kart Druga
• Trzecia

Oto treĂÊ pierwszej karty.

Jak widaÊ, wyĂwietliïeĂ teraz drugÈ kartÚ.

I w koñcu dotarïeĂ do ostatniej, trzeciej karty.

Kod wyróżniony pogrubioną czcionką został dodany przez widżet tabs. Wartości wyróżnione szarym tłem zależą od tego, która karta będzie aktualnie wyświetlona. W tym przykładzie widoczna jest zawartość pierwszej karty.

OkreĈlanie opcji widĔetu kart Podobnie jak wszystkie inne widżety i komponenty jQuery UI, także widżet tabs udostępnia kilka opcji, których wartości można określać w celu modyfikacji jego domyślnego sposobu działania. Tabela 7.6 zawiera fragmenty kodu przedstawiające wszystkie dostępne opcje widżetu, sposoby ich ustawiania oraz opisy. Tabela 7.6. Opcje widĔetu tabs

Opcja

Opis

$('#my-tabs').tabs ( {ajaxOptions:{timeout:2000}});

Dodatkowe opcje stosowane podczas korzystania z Ĕñdaþ asynchronicznych. Zostaäy one dokäadniej opisane w rozdziale 5.

$('#my-tabs').tabs({cache: true});

Ta opcja wäñcza przechowywanie Ĕñdaþ w pamiöci podröcznej. Jej domyĈlñ wartoĈciñ jest false.

$('#my-tabs').tabs({collapsible: true});

UmoĔliwia zamkniöcie bieĔñcej karty poprzez jej ponowne klikniöcie. DomyĈlñ wartoĈciñ tej opcji jest false.

$('#my-tabs').tabs({cookie: {

Zapisuje informacje o aktualnie otwartej karcie w cookie.

expires: 7, path: '/', secure: true, name: 'my-cookie' }});

193

194

Rozdziaä 7. Interakcja z widĔetami Tabela 7.6. Opcje widĔetu tabs (ciñg dalszy)

Opcja

Opis

$('#my-tabs').tabs({disabled: [0, 1]});

Wyäñcza konkretne karty, okreĈlone jako indeksy w tablicy kart.

$('#my-tabs').tabs ({event:'mouseover'});

Pozwala zmieniè zdarzenie powodujñce przeäñczanie kart. Dostöpnymi wartoĈciami tej opcji sñ click oraz mouseover, przy czym domyĈlnñ wartoĈciñ jest click.

$('#my-tabs').tabs({fx:

OkreĈla efekt stosowany podczas ukrywania dotychczasowej karty oraz wyĈwietlania nowej, jak równieĔ szybkoĈè odtwarzania tego efektu.

[{opacity:'toggle', duration:'normal'}, {opacity:'toggle', duration:'fast'} ]}); $('#my-tabs').tabs ({idPrefix: 'id-fix-'});

OkreĈla prefiks identyfikatorów generowanych dla zdalnych kart. DomyĈlnñ wartoĈciñ tej opcji jest ui-tabs-.

$('#my-tabs').tabs({panelTemplate:

Zmienia szablon paneli z domyĈlnego

na element akapitu.

'

'}); $('#my-tabs').tabs({selected: 2});

Zmienia kartö, która zostanie wyĈwietlona po zainicjowaniu widĔetu. Karty sñ numerowane od zera, zatem w tym przykäadzie zostanie wyĈwietlona trzecia karta. DomyĈlnñ wartoĈciñ tej opcji jest 0. Aby Ĕadna karta nie byäa wyĈwietlona, naleĔy przypisaè tej opcji wartoĈè –1.

$('#my-tabs').tabs({spinner: '
Ta opcja zmienia element podczas wczytywania zdalnej treĈci zakäadek. MoĔna wykorzystaè CSS, by stworzyè swojñ wäasnñ kröcñcñ siö ikonkö. DomyĈlnñ wartoĈciñ tej opcji jest: Loading#8230;.

class='my-spinner'>ProszÚ czekaÊ'});

href="#{href}">#{label}

Zmienia szablon kodu HTML uĔywany podczas dodawania nowych kart. DomyĈlnñ wartoĈciñ tej opcji jest:

#

'});

{label}.

$('#my-tabs').tabs({tabTemplate: '

Obsäuga zdarzeþ widĔetu tabs Widżet tabs udostępnia wiele zdarzeń, które można przechwytywać i obsługiwać. Poniższe fragmenty kodu przedstawiają dostępne zdarzenia oraz sposoby definiowania procedur ich obsługi. To zdarzenie jest generowane podczas inicjalizacji widżetu tabs: $('#my-tabs').tabs({create: function(event, ui) { // obs§uga zdarzenia

}});

Receptura: Nawigowanie po stronie przy wykorzystaniu kart // lub

$('#my-tabs') .on('tabscreate', function(event, ui) { // obs§uga zdarzenia

}) .tabs();

Obsługa zdarzenia generowanego w momencie kliknięcia innej karty: $('#my-tabs').tabs({select: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs() .on('tabsselect', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane w momencie wczytania zdalnej zawartości karty: $('#my-tabs').tabs({load: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs() .on('tabsload', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane po wyświetleniu innej karty: $('#my-tabs').tabs({show: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs() .on('tabsshow', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane po dodaniu nowej karty: $('#my-tabs').tabs({add: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs() .on('tabsadd', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane po usunięciu karty: $('#my-tabs').tabs({remove: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs()

195

196

Rozdziaä 7. Interakcja z widĔetami .on('tabsremove', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane, kiedy wcześniej wyłączona karta zostanie włączona: $('#my-tabs').tabs({enable: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs() .on('tabsenable', function(event, ui) { // obs§uga zdarzenia

});

To zdarzenie jest generowane, kiedy włączona karta zostanie wyłączona: $('#my-tabs').tabs({disable: function(event, ui) { // obs§uga zdarzenia

}}); // lub

$('#my-tabs').tabs() .on('tabsdisable', function(event, ui) { // obs§uga zdarzenia

});

Wywoäywanie metod widĔetu tabs Widżet slider używa tych samych metod co komponenty draggable, opisane w rozdziale 6., oraz przedstawione wcześniej w tym rozdziale widżety dialog i accordion. W ich opisach można znaleźć informacje o metodach destroy, disable, enable, option oraz widget. Poniższe wywołanie dodaje nową kartę, umieszczając ją we wskazanym miejscu tablicy kart; zawartość karty jest określona w postaci adresu URL i zostanie wczytana z serwera, a jej tytuł jest podany w formie łańcucha znaków: $('#my-tabs').tabs('add', '/my-url', 'To jest tytuï karty', 1);

Poniższe wywołanie usuwa kartę o podanym indeksie: $('#my-tabs').tabs('remove', 1);

To wywołanie włącza kartę o podanym indeksie: $('#my-tabs').tabs('enable', 1);

Poniższe wywołanie wyłącza kartę o podanym indeksie: $('#my-tabs').tabs('disable', 1);

To wywołanie wyświetla kartę o podanym indeksie: $('#my-tabs').tabs('select', 1);

Podsumowanie

Poniższa metoda pozwala odświeżyć zawartość karty o podanym indeksie: $('#my-tabs').tabs('load', 1);

Ta metoda wczytuje treść o podanym adresie URL i wyświetla ją na karcie o podanym indeksie: $('#my-tabs').tabs('url', 1, '/my-url');

Poniższe wywołanie zwraca liczbę kart w widżecie: $('#my-tabs').tabs('length');

Ta metoda pozwala przerwać aktualnie wykonywane żądanie przy użyciu technologii AJAX: $('#my-tabs').tabs('abort');

Poniższe wywołanie sprawia, że aktualnie wyświetlona karta będzie automatycznie zmieniana co 2000 milisekund. Ponieważ ostatni argument wywołania (continuing) ma wartość false, jeśli użytkownik wybierze jakąś kartę, automatyczne zmienianie kart zostanie przerwane: $('#my-tabs').tabs('rotate', 2000, false);

Podsumowanie W tym rozdziale zostały przedstawione komponenty widżetów dostępne w jQuery UI. Wspomagają one twórców stron, ułatwiając wykonywanie często powtarzanych zadań, takich jak grupowanie zawartości na kartach, w akordeonach, tworzenie suwaków, pasków postępu oraz ułatwianie interakcji z użytkownikami przy użyciu mechanizmu automatycznego uzupełniania, kalendarzy, okien dialogowych i przycisków. W rozdziale zostało także zamieszczonych wiele przykładów pokazujących, jak należy implementować widżety oraz jak korzystać z dostępnych opcji, by modyfikować sposób działania widżetów.

197

198

Rozdziaä 7. Interakcja z widĔetami

III Strony na urządzenia przenośne Rozdziaä 8. Zmiany wyglñdu Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

200

Rozdziaä 1. Python dla Django

8 Zmiany wyglądu T

en rozdział rozpoczyna się od krótkiego przedstawienia możliwości współpracy jQuery z niestandardowymi arkuszami stylów. W dalszej części zostały natomiast przedstawione funkcje związane z obsługą animacji, dostępne w bibliotece jQuery oraz jQuery UI. Niektóre z receptur koncentrują się na przedstawieniu wszystkich argumentów funkcji, natomiast pozostałe na samych funkcjach. Można ich używać jako źródła wiedzy podczas tworzenia stron przy wykorzystaniu jQuery UI.

Zmiana stylów uĔywanych w komponentach jQuery UI Wygląd komponentów jQuery UI można zmieniać na wiele sposobów. Jednym z nich jest wybór jednego z kilkunastu różnych standardowych tematów graficznych. O tych tematach wspominaliśmy już w rozdziale 6., „Interakcja z użytkownikiem”. Tematy są definiowane jako pliki CSS, które następnie dołącza się do strony przy użyciu poniższego elementu:

Aby zastosować inny temat, wystarczy zmienić słowo base na jedną z przedstawionych poniżej nazw predefiniowanych tematów: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader

Kolejnym sposobem zmiany wyglądu komponentów jQuery UI jest wyszukanie w internecie niestandardowych tematów graficznych. Można wśród nich znaleźć wiele utworzonych przez naprawdę zdolnych projektantów.

202

Rozdziaä 8. Zmiany wyglñdu

Aby stworzyć własny temat, można skorzystać z narzędzia ThemeRoller. Pozwala ono na modyfikowanie pewnej liczby domyślnych właściwości, takich jak kolory, odległości oraz wielkości zaokrąglonych wierzchołków. Narzędzie to można znaleźć na stronie http://jqueryui.com/themeroller/. Tym, którzy uważają, że ThemeRoller nie daje im dostatecznie dużej swobody, i którzy chcą mieć większy wpływ na wygląd komponentów interfejsu użytkownika, pozostaje stworzenie własnych arkuszy stylów CSS. Można to zrobić, bazując na istniejących plikach, choć osoby wyjątkowo pracowite mogą tworzyć takie arkusze od podstaw. Postać generowanego kodu HTML oraz używane w nim klasy CSS można znaleźć w rozdziale 6., w podrozdziałach poświęconych poszczególnym komponentom. Niektóre z tych komponentów generują naprawdę rozbudowany kod HTML, inne natomiast dodają do oryginalnego kodu jedynie kilka nazw klas. Wiele dodawanych nazw klas jest charakterystycznych dla konkretnego komponentu. Przyjrzyjmy się na przykład klasie ui-resizable. Jeśli gdzieś w kodzie innych wtyczek zauważymy taką nazwę, to śmiało możemy założyć, że po kryjomu taka wtyczka korzysta z komponentu resizable. Kilka ogólnych klas jest używanych w wielu komponentach. Ich nazwy zaczynają się od ui-widget, ui-helper, ui-state, ui-corner oraz ui-priority. Te ogólne klasy mają naprawdę ogólny charakter i są stosowane w wielu miejscach, dlatego też najlepiej jest unikać wprowadzania w nich większych zmian niż te, na które pozwala narzędzie ThemeRoller. Jeśli natomiast chodzi o kod HTML i CSS charakterystyczny dla konkretnych komponentów, to nic nie stoi na przeszkodzie, by samodzielnie pisać style CSS dla konkretnego komponentu i testować je we wszystkich przeglądarkach.

Tworzenie animacji z wykorzystaniem moĔliwoĈci biblioteki jQuery Core Wcale nie trzeba korzystać z biblioteki jQuery UI, by tworzyć na swoich stronach animacje i specjalne efekty graficzne. Podstawowa biblioteka jQuery — jQuery Core — udostępnia takie możliwości, i to bez konieczności korzystania z jQuery UI. Zostały one opisane w rozdziale poświęconym jQuery UI, gdyż najlepiej pasują do pozostałych zagadnień opisywanych w tym rozdziale. Listing 8.1 pokazuje, w jaki sposób można modyfikować wysokość, szerokość oraz położenie elementu div, a konkretnie: zmieniać je stopniowo przy użyciu animacji. Listing 8.1. Animacja operujñca na rozmiarze i poäoĔeniu prostokñta 00 01 02 03 04

Tworzenie animacji z wykorzystaniem moĔliwoĈci biblioteki jQuery Core 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

Kliknij

Umieszczone w wierszu 31. wyrażenie +=50 oznacza, że wysokość należy powiększyć o 50 pikseli. Jeśli zostanie podana konkretna wartość bez operatora +=, będzie to oznaczało, że wskazanej właściwości należy przypisać podaną wartość. Wartości 500 oraz 1000 oznaczają czas trwania danej animacji. Zamiast konkretnych wartości liczbowych można by także użyć łańcuchów znaków, takich jak slow oraz fast, odpowiadających odpowiednio czasom 600 oraz 200 milisekund. W wierszu 32. została podjęta próba zmiany koloru tła przy użyciu animacji. W tym przykładzie zmiana koloru tła nie powiedzie się. Aby móc to robić, konieczne jest użycie jQuery UI.

203

204

Rozdziaä 8. Zmiany wyglñdu

Receptura: Animacja kolorów przy uĔyciu jQuery UI Kiedy do strony zostaną dodane biblioteki jQuery UI, to funkcja animate uzyska dodatkowe możliwości. W niezauważalny sposób zostaje ona bowiem rozbudowana, dzięki czemu bez zmiany sposobu korzystania z niej będzie można znacznie więcej zrobić przy jej pomocy. Listing 8.2 pokazuje, w jaki sposób można jej użyć, by stopniowo zmieniać kolory elementów wyświetlonych na stronie. Listing 8.2. Zmiany kolorów w ramach animacji 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

Kliknij

Receptura: Ukrywanie elementów przy uĔyciu wygaszania i przesuwania jQuery Core

W wierszach 35. oraz 36. widać, w jaki sposób w ramach jednej animacji można jednocześnie zmieniać zarówno położenie, jak i kolor tła elementu. Wszystkie pozostałe animacje rozpoczną się dopiero po zakończeniu wcześniej wykonywanej animacji. Funkcja animate dodaje animacje do kolejki o nazwie fx. (Więcej informacji na jej temat zostanie podanych w dalszej części rozdziału). Receptura: Ukrywanie elementów przy uĔyciu wygaszania i przesuwania jQuery Core

Receptura: Ukrywanie elementów przy uĔyciu funkcji wygaszania i przesuwania jQuery Core Oprócz tworzenia animacji biblioteka jQuery Core pozwala także na ukrywanie i wyświetlanie elementów, przy czym nie jest do tego celu potrzebna biblioteka jQuery UI. Jednak także te funkcje warto prezentować w kontekście tej drugiej biblioteki, gdyż rozszerza ona ich możliwości o stosowanie funkcji przejścia (ang. easing function). Listing 8.3 przedstawia przykład pokazujący, w jaki sposób można wyświetlić i ukryć element, przesunąć go w górę i w dół, a następnie odroczyć wykonanie kolejnych animacji. Listing 8.3. Wygaszanie i przesuwanie elementów 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

Kliknij

Wywołania zapisane w wierszach 33. oraz 35. używają funkcji przejścia o nazwie swing. Biblioteka jQuery UI definiuje 32 takie funkcje, których nazwy zostały przedstawione na poniższej liście: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine

easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce

Zespół programistów pracujących nad rozwojem jQuery UI przygotował doskonałą stronę demonstracyjną, przedstawiającą wszystkie dostępne efekty przejścia. Warto ją wypróbować; oto jej adres: http://jqueryui.com/effect/#easing. Bez dodatkowych możliwości biblioteki jQuery UI będzie można korzystać wyłącznie z efektów przejść linear oraz swing. W dalszej części rozdziału została przedstawiona receptura rysująca wszystkie funkcje przejścia dostępne w bibliotece jQuery UI. W razie zastosowania w powyższym przykładzie biblioteki jQuery UI będzie w nim można wykorzystać zdefiniowane w niej funkcje przejścia.

Receptura: Dodawanie efektów graficznych przy uĔyciu jQuery UI Proste funkcje animacji są dostępne w podstawowej wersji biblioteki jQuery — jQuery Core — i rozszerzane przez jQuery UI. Jednak funkcja effect jest dostępna wyłącznie w bibliotece jQuery UI. Można jej używać, by przyciągnąć uwagę użytkownika do nowo dodanego lub usuniętego elementu strony. Strona przedstawiona na listingu 8.4

Receptura: Dodawanie efektów graficznych przy uĔyciu jQuery UI

demonstruje wszystkie dostępne efekty, dzięki czemu będziemy mogli wybrać ten, który nam najbardziej odpowiada. Listing 8.4. Rekurencyjne odtwarzania wszystkich dostöpnych efektów 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

Kliknij

207

208

Rozdziaä 8. Zmiany wyglñdu

Sposób działania tego przykładu jest nieco inny niż wszystkich, które zostały przedstawione do tej pory. Już wcześniej można było znaleźć sparametryzowane przykłady, w których używane wartości parametrów pochodziły z podzielenia jednego długiego łańcucha znaków na fragmenty zapisywane w tablicy. Do przetworzenia wszystkich elementów tablicy używaliśmy wcześniej funkcji $.each. Jednak w tym przykładzie do przetworzenia wszystkich elementów tablicy używana jest funkcja rekurencyjna. Na początku tej funkcji z tablicy jest pobierany i usuwany jej ostatni element. Zostaje on użyty zarówno jako tekst wyświetlany w animowanym elemencie strony, jak i jako nazwa efektu podawanego w wywołaniu funkcji effect. Ostatnim argumentem funkcji effect jest funkcja zwrotna. To właśnie ona służy nam do rekurencyjnego wywołania bieżącej funkcji. Ta funkcja będzie wywoływana aż do opróżnienia całej tablicy; kiedy to nastąpi, warunek if(eff) nie zostanie spełniony, a wywołanie funkcji się zakończy.

Receptura: Animacja dodawania i usuwania klas CSS przy uĔyciu jQuery UI Do tej pory we wszystkich przykładach animacji zmiany, jakie należy wprowadzać w stylach CSS, były podawane jawnie, jako argumenty funkcji obsługujących animacje. Choć z technicznego punktu widzenia takie rozwiązanie działa dobrze, to jednak ma ono jedną ogromną wadę — style CSS zostają wymieszane z kodem JavaScript. Lepszym rozwiązaniem, które jednocześnie ułatwia utrzymanie i pielęgnację kodu, jest pozostawienie wszystkiego, co ma związek z określaniem wyglądu strony, w arkuszach stylów CSS i użycie kodu JavaScript wyłącznie do zmiany klas używanych w elementach HTML. Doskonale wiemy, że takie możliwości zapewnia biblioteka jQuery Core; zostały one zademonstrowane w rozdziale 3., „Modyfikowanie stron”. Jednak w takim przypadku nie dysponujemy możliwością stosowania animacji. jQuery UI pozwala na animowanie zmian polegających na zmianie klasy CSS elementu, o ile zmienione właściwości mają wartości liczbowe lub określają kolory. Listing 8.5 przedstawia możliwości dodawania i usuwania klas CSS, jakie daje biblioteka jQuery UI. Listing 8.5. Wäñczanie, wyäñczanie, dodawanie, usuwanie i przeäñczanie klas CSS 00 01 02 03 04 05 06 07 08 09 10 11

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

PrzeïÈcz fx

Kliknij

Pierwsze kliknięcie przycisku wyłącza wszystkie animacje. Kolejne kliknięcie ponownie włącza animacje, lecz jednocześnie sprawia, że odstępy pomiędzy nimi będą długie. Domyślny odstęp pomiędzy kolejnymi animacjami wynosi 13 milisekund. Aby przedstawić ograniczenia, jakim podlega animowanie przełączania klas CSS, klasa my-toggle definiuje obramowanie o postaci linii przerywanej, a nie ciągłej.

209

210

Rozdziaä 8. Zmiany wyglñdu

Po uruchomieniu przykładu można się przekonać, że najpierw jest uruchamiana animacja, a dopiero na samym jej końcu jest zmieniana klasa elementu. Wiersze 53. oraz 54. pokazują, w jaki sposób można wyłączyć animacje lub zmienić odstępy czasu pomiędzy nimi.

Receptura: WyĈwietlanie wszystkich funkcji przejĈcia definiowanych przez jQuery UI Wcześniej w tym rozdziale pokazane zostały funkcje pozwalające na ukrywanie oraz wygaszanie elementu, umożliwiające przekazanie argumentu określającego funkcję przejścia, której należy używać. W rozdziale 6. funkcję przejścia można było określać jako parametr przekazywany do komponentu resizable. Idea działania funkcji przejścia polega na stopniowym przejściu od y=0 do y=1 w odpowiedzi na zmiany wartości x, która także zmienia się od 0 do 1. Domyślnie zmiany te są wykonywane w sposób liniowy, według funkcji y=x. Wszystkie pozostałe funkcje przejścia nie są funkcjami liniowymi i zapewniają wrażenia innych animacji. Być może czytelnik spotkał się już z takimi animacjami, imitującymi drgania, odbicia, ruch coraz szybszy lub coraz wolniejszy, bądź też z innymi rodzajami animacji. Listing 8.6 nie przedstawia samych animacji. Zamiast tego rysuje on na ekranie same funkcje przejścia, przedstawiając je w formie uproszczonych wykresów punktowych. Wykresy są tworzone poprzez wyświetlenie dużej liczby elementów div, których położenie w pionie zależy od wartości funkcji przejścia. Trzeba zaznaczyć, że nie jest to właściwy sposób wykorzystania elementów div oraz obramowań, jednak do celów demonstracyjnych nadaje się on całkiem dobrze. Listing 8.6. Rysowanie funkcji przejĈcia 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

Graficzne przedstawienie wszystkich funkcji przejĂcia

Kod umieszczony w wierszu 43. pobiera kolejne funkcje przejścia bezpośrednio z biblioteki. Instrukcja podana w wierszu 44. pomija funkcję domyślną, liniową oraz funkcję swing. Następnie obszar wykresu dzielony jest na 100 kolumn, a w każdej z nich zostaje wyświetlony jeden mały element div, którego położenie w pionie odpowiada wartości zwróconej przez funkcję przejścia.

Receptura: WyĈwietlanie wszystkich ikon definiowanych przez jQuery UI W rozdziale 7., „Interakcja z widżetami”, zostały przedstawione przykłady wykorzystania ikon dostępnych w jQuery UI. Na przykład, można je wyświetlać w rogach elementów o zmiennej wielkości oraz okien dialogowych. Można je także dodawać do przycisków,

211

212

Rozdziaä 8. Zmiany wyglñdu

akordeonów, zakładek i kalendarzy. Oprócz tego, można ich używać, gdzie tylko zechcemy, zupełnie niezależnie od innych komponentów jQuery UI. Listing 8.7 wyświetla listę wszystkich dostępnych ikon oraz ich nazw, jako swoisty katalog, z którego będzie można wybrać interesującą nas ikonę. Po zmianie tematu graficznego można także błyskawicznie zauważyć zmiany wyglądu listy ikon. Listing 8.7. DuĔa lista ikon wraz z ich nazwami 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

Lista wszystkich ikon

Ta długa lista ikon nie jest zapewne najbardziej eleganckim fragmentem kodu, jaki został zamieszczony w tej książce. Niestety, nazw ikon nie można pobrać w taki sam sposób, w jaki wcześniej pobrane zostały nazwy wszystkich funkcji przejścia.

Receptura: UĔycie obietnic do wykonania kodu po zakoþczeniu animacji Pojęcie obiektów obserwowalnych (ang. observable) zostało przedstawione w rozdziale 5., „Komunikacja z serwerem”. Takich obiektów można użyć, by zażądać wykonania funkcji po zakończeniu realizacji innej operacji. Rozwiązania te działają doskonale w przypadku obsługi odpowiedzi na żądania przesyłane przy użyciu technologii AJAX. Można ich także używać do wykonywania kodu po zakończeniu odtwarzania wszystkich animacji. Gdybyśmy do tego celu wykorzystali zwyczajne funkcje zwrotne przekazywane do efektów lub animacji, to istniałoby niebezpieczeństwo, że w przypadku

213

214

Rozdziaä 8. Zmiany wyglñdu

dodania do kolejki nowej animacji nasza funkcja zwrotna mogłaby zostać wykonana zbyt wcześnie. Wykorzystanie obiektów Deffered pozwala uniknąć tego zagrożenia. Obiekt Deffered udostępnia funkcję promise(), która pozwala na dostęp wyłącznie do tych funkcji, które są istotne z punktu widzenia kodu zewnętrznego. Dzięki temu taki zewnętrzny kod nie będzie w stanie manipulować wewnętrznymi szczegółami działania obiektu Deffered. Listing 8.8 pokazuje, w jaki sposób można dodać funkcję zwrotną do funkcji done interfejsu obiektu Deffered. Przedstawia także przykład użycia funkcji stop biblioteki jQuery Core oraz możliwości jej współdziałania z interfejsem obiektu Deffered. Listing 8.8. Implementacja obietnicy 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

Kliknij

Stop

Kliknięcie przycisku Stop powoduje natychmiastowe wyświetlenie informacyjnego okienka dialogowego. Jeśli jednak przycisk ten nie zostanie kliknięty, to na wyświetlenie okienka trzeba będzie poczekać pięć sekund. Receptura: Wykonywanie kodu podczas animacji przy wykorzystaniu queue i dequeue

Receptura: Wykonywanie kodu podczas animacji przy wykorzystaniu funkcji queue i dequeue W większości przypadków umieszczenie kilku animacji w kolejce w zupełności wystarczy, by zapewnić odpowiednią atrakcyjność tworzonej strony WWW. Wykorzystanie zbyt wielu animacji lub umieszczenie na stronie zbyt wielu poruszających się elementów może doprowadzić użytkowników do szału. Jednak w kilku wyjątkowych przypadkach można zdecydować się na wykorzystanie nie tylko animacji graficznych, lecz dodatkowo na wykonywanie kodu w czasie pomiędzy zakończeniem jednej animacji i rozpoczęciem kolejnej. Obietnice są wykonywane po zakończeniu wszystkich animacji. A zatem wykorzystanie obietnic w tym konkretnym przypadku można by uznać za naginanie ich przeznaczenia. Można skorzystać z funkcji zwrotnych. Jednak w tym przypadku problem polega na tym, że w razie wykorzystania większej liczby takich funkcji nasz kod zacząłby wyglądać jak choinka. Rozwiązaniem jest skorzystanie z mechanizmów kolejkowania, z których w niewidoczny dla nas sposób korzystają same animacje. Listing 8.9 pokazuje, jak można dodawać własne funkcje do kolejki animacji. Listing 8.9. Zmiana kodu HTML pomiödzy animacjami 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14



215

216

Rozdziaä 8. Zmiany wyglñdu 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Kliknij poniĝej, by rozpoczÈÊ animacjÚ.

Kliknij

Do funkcji queue można przekazywać dodatkowy parametr — łańcuch znaków określający nazwę kolejki. Domyślnie kolejka ta nosi nazwę fx. W przypadku wykonywania kodu wewnątrz kolejki animacje nie będą kontynuowane aż do momentu wywołania funkcji dequeue. Kod umieszczony w wierszach 37. oraz 43. pokazuje, jakie efekty daje wywołanie funkcji dequeue oraz pominięcie jej wywołania.

Podsumowanie

Podsumowanie Ten rozdział zaczął się od przedstawienia możliwości, jakie daje tworzenie własnych stylów dla komponentów jQuery UI. Najprostszym rozwiązaniem jest wykorzystanie jednego ze standardowych tematów graficznych zdefiniowanych w formie arkuszy stylów CSS. Przy nieco większym nakładzie pracy można stworzyć swoje własne style, korzystając przy tym z narzędzia ThemeRoller. Jeśli jednak chcemy mieć większą swobodę, to jQuery UI pozwala także na tworzenie własnych stylów od podstaw bądź użycie tematów graficznych znalezionych w internecie. Wyczerpująco zostały w tym rozdziale przedstawione funkcje animacji, udostępniane przez biblioteki jQuery Core oraz jQuery UI. Niektóre z przedstawionych w nim receptur mogą posłużyć jako materiał informacyjny, pozwalający na testowanie, jak wyglądają poszczególne rodzaje animacji, funkcje przejść oraz ikony jQuery UI.

217

218

Rozdziaä 8. Zmiany wyglñdu

9 Nawigacja przy użyciu jQuery Mobile T

en rozdział zawiera podstawowe informacje na temat biblioteki jQuery Mobile. Opisuje on platformę służącą do przygotowywania stron, przechodzenia pomiędzy stronami, wczytywania zawartości przy użyciu technologii AJAX oraz tworzenia płynnych animacji przejść. W ramach samych stron można wyróżnić podstawowe elementy, takie jak nagłówki i stopki, które mogą zachowywać się różnie, w zależności od wybranych opcji konfiguracyjnych. Te podstawowe ustawienia strony, w połączeniu z takimi podstawowymi elementami jak kolumny, zdarzenia oraz prosty kod JavaScript, stanowią właśnie podstawy stosowania biblioteki jQuery Mobile.

Receptura: Przygotowywanie podstawowych elementów jQuery Mobile jQuery Mobile to odrębna biblioteka, niezależna do jQuery Core oraz jQuery UI. Przeważającej większości jej możliwości można używać bez konieczności pisania choćby jednego wiersza kodu JavaScript. Zamiast tego dodaje się do elementów HTML odpowiednie atrybuty. Wszystkie te atrybuty rozpoczynają się od prefiksu data-, podobnie jak niestandardowe atrybuty przedstawione w rozdziale 1., „Rozpoczynanie pracy z jQuery”, przy okazji prezentacji funkcji data(). Biblioteka jQuery Mobile używa w tym celu innej funkcji: jqmData(). Zasady korzystania z niej zostały przedstawione w dalszej części tego rozdziału. jQuery Mobile wymaga, by tworzone strony WWW były przygotowywane w specyficzny sposób. Listing 9.1 przedstawia podstawową strukturę strony korzystającej z biblioteki jQuery Mobile, posiadającej nagłówek oraz bardzo prostą zawartość.

220

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile Listing 9.1. WyĈwietlanie prostej strony z nagäówkiem 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Tytuï strony

Witaj, Ăwiecie!

W powyższym kodzie HTML można zwrócić uwagę na kilka rzeczy. Po pierwsze, w wierszach 4. i 5. jest określany metaznacznik viewport. Znacznik ten prosi urządzenie o ustawienie odpowiedniego poziomu powiększenia oraz wielkości strony i dostosowanie ich do aktualnie wyświetlanej zawartości. Ma to ogromnie duże znaczenie podczas tworzenia stron przeznaczonych dla urządzeń mobilnych. Domyślna wartość tego metaznacznika zależy od przeglądarki, lecz zazwyczaj wynosi około 980 pikseli. Jeśli rozdzielczość urządzenia jest mniejsza lub większa od domyślnej, to układ strony może zostać zaburzony. W takich przypadkach strona może się wydawać zbyt mała lub poziom powiększenia zostanie ustawiony w taki sposób, że tekst będzie zbyt mały do wygodnego czytania i trzeba go będzie powiększyć, aby móc korzystać ze strony. Jednak dzięki określeniu szerokości strony (width) oraz jej początkowej skali (initial-scale) można dostosować wielkość zawartości do rozmiarów ekranu urządzenia. W wierszach 6. i 7. jest określany używany arkusz stylów CSS. Przy jego użyciu można zmieniać kolory. Jeśli ktoś jest naprawdę odważny, to może go użyć do całkowitej zmiany wyglądu strony. W takich przypadkach należy jednak zastanowić się na liczbą urządzeń, na jakich strona zostanie przetestowana. Domyślnie działanie biblioteki jQuery Mobile jest testowane na bardzo dużej liczbie urządzeń.

Receptura: Udostöpnianie wielu stron przy uĔyciu jednego pliku HTML

W wierszach 8. – 13. znajdują się znaczniki pobierające zarówno bibliotekę jQuery Core, jak i jQuery Mobile. W kolejnych przykładach przedstawionych w dalszej części książki, ze względu na wydajność działania, kod JavaScript jest umieszczany na końcu strony. W przypadku korzystania z biblioteki jQuery Mobile zaleca się, by kod HTML był wczytywany na początku. Odnośniki tworzone przy użyciu jQuery Mobile wczytują zawartość stron docelowych za pomocą żądań asynchronicznych wykonywanych przy użyciu technologii AJAX (będzie o tym mowa w dalszej części rozdziału). Po wczytaniu takiej strony skrypty umieszczone w jej nagłówku zostaną zignorowane. Wszystkie skrypty, które mają zostać wykonane, gdyż są ważne dla danej strony, muszą zostać umieszczone w jej ciele. Sama zawartość strony została umieszczona w wierszach 17. – 27. W przeważającej części jest to zwyczajny kod HTML. Jednak każdy użyty element div zawiera atrybut data-role, zawierający wartość: page, header lub content. Znaczniki te oraz określane przez nie role są używane przez jQuery Mobile do przypisania poszczególnym elementom strony odpowiednich stylów, tematów i działania. Wyniki można obejrzeć po wyświetleniu tej strony w przeglądarce — a najlepiej przeglądarce mobilnej.

Receptura: Udostöpnianie wielu stron przy uĔyciu jednego pliku HTML W jednym pliku HTML można umieścić wiele stron. Nie ma wtedy potrzeby przesyłania żądań na serwer, dzięki czemu interfejs aplikacji może reagować na poczynania użytkownika bardzo szybko i płynnie. Co więcej, aplikacja zachowuje zdolność przechodzenia pomiędzy poszczególnymi stronami, nawet gdy urządzenie nie będzie podłączone do internetu. Listing 9.2 pokazuje, w jaki sposób można stworzyć odnośnik do drugiej strony. Takie rozwiązanie spisuje się bardzo dobrze w przypadkach, gdy aplikacja składa się z niewielkiej liczby stron. Jednak w pewnym momencie, zależnym od grupy urządzeń docelowych, problemem stanie się pojemność pamięci. Tworzenie odnośników do stron zewnętrznych zostało opisane w dalszej części rozdziału. Listing 9.2. Przechodzenie na innñ stronö 00 01 02 03 04 06 08 11

Pierwsza

Witaj, Ăwiecie i przejdě na innÈ stronÚ.

Lub... pokaĝ tÚ samÈ stronÚ jako okno dialogowe!

-->

Druga

¿egnaj, Ăwiecie!

Zacznijmy od końca strony. W wierszach 38. – 45. został umieszczony element div określający zawartość drugiej strony. Ta strona ma swój własny nagłówek i swoją własną zawartość. Co ważniejsze, jej element div zawiera atrybut id. W wierszach 22. – 24. została umieszczona zawartość pierwszej strony. W jej skład wchodzi także odnośnik do drugiej strony. Atrybut id służy jako kotwica, do której można się odwołać, umieszczając przed jej nazwą znak #. Warto zwrócić uwagę na wygląd adresu URL wyświetlanego na pasku adresu przeglądarki, po kliknięciu odnośnika do drugiej strony. Ten adres URL można zapisać na liście zakładek, by później przejść bezpośrednio do drugiej strony. W końcu, wiersze 26. – 35. przedstawiają alternatywną wersję opisanej wcześniej zawartości strony. Aktualnie nie jest ona używana, gdyż została umieszczona pomiędzy znacznikami . Jeśli opisane wcześniej wersje 22. – 24. zostaną zastąpione tą

Receptura: Zmiana tytuäu elementu

zawartością, to druga strona zostanie wyświetlona jako okno dialogowe, a nie nowa strona. Jak można zobaczyć, to element odnośnika określa, czy strona docelowa zostanie wyświetlona jako normalna strona, czy też jako okno dialogowe. Zaleca się, by nie mieszać sposobów wyświetlania pojedynczej strony. Należy ją wyświetlać jako stronę lub jako okno dialogowe. Zmiana sposobu wyświetlania stron w ramach jednego dokumentu HTML może prowadzić do nieoczekiwanego zachowania aplikacji.

Receptura: Zmiana tytuäu elementu Jeden dokument HTML zawiera tylko jeden element title. Umieszczając wiele stron w jednym dokumencie HTML, można doprowadzić do ich nieodpowiedniego działania. Może się okazać, że strony umieszczone w jednym dokumencie HTML będą musiały zostać rozdzielone i zapisane w odrębnych dokumentach. Listing 9.3 pokazuje, w jaki sposób można określać tytuły poszczególnych stron umieszczonych w tym samym dokumencie HTML. Listing 9.3. OkreĈlanie odröbnych tytuäów dla poszczególnych stron 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Pierwsza

i przejĂcie na drugÈ stronÚ

223

224

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 31 32 33 34 35 36 37 38 39 40 41 42 43 44

Druga

i powrót na pierwszÈ stronÚ

W 3. wierszu kodu został umieszczony domyślny element title. To właśnie on jest wczytywany i wyświetlany domyślnie. W wierszach 17. i 32. definiowane są natomiast tytuły konkretnych stron. Gdy tylko przejdziemy na drugą stronę, tytuł wyświetlany przez przeglądarkę zmieni się — zostanie zastąpiony zawartością atrybutu data-title, podaną w wierszu 32. Po kliknięciu przycisku Wstecz tytuł zostanie ponownie zmieniony i zastąpiony domyślnym, podanym w wierszu 3. Aby wyświetlić tytuł odpowiadający pierwszej stronie, czyli ten podany w wierszu 17., należy utworzyć odnośnik odwołujący się do pierwszej strony. Właśnie taki odnośnik można znaleźć w 39. wierszu kodu. Wystarczy przetestować przykład, by przekonać się, jak on działa.

Receptura: Wczytywanie zewnötrznych stron przy uĔyciu technologii AJAX Aż do tej receptury wszystkie inne przykłady wyświetlały strony, które były już dostępne w kodzie dokumentu HTML. Wszystkie one działały, korzystając z etykiet odwołujących się do identyfikatorów elementów, które już istniały w drzewie DOM. Jednak wraz z powiększaniem się witryny umieszczanie wszystkich stron w jednym dokumencie HTML stanie się niemożliwe. Dzięki jQuery Mobile tworzenie odnośników do innych stron HTML jest równie łatwe jak w zwyczajnych aplikacjach internetowych. Listing 9.4 przedstawia odnośniki, które wyglądają dokładnie tak samo. Listing 9.4. OdnoĈniki do zewnötrznych stron 00 01 02 03 04 06

Receptura: Wczytywanie zewnötrznych stron przy uĔyciu technologii AJAX 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

OdnoĂniki - wykorzystanie technologii AJAX

OdnoĂnik do zewnÚtrznego pliku

WstÚpne wczytanie zewnÚtrznego pliku

Różnica polega na sposobie, w jaki jQuery Mobile obsługuje odnośniki. Kiedy odnośnik wskazuje stronę należącą do tej samej domeny, to domyślnie strona ta jest pobierana przy użyciu odwołania wykonywanego z wykorzystaniem technologii AJAX. Ten domyślny sposób działania można zmienić za pomocą odpowiedniego ustawienia, co pokazano w dalszej części rozdziału. Oprócz tego, jeśli odnośnik odwołuje się do strony należącej do innej domeny, to może zostać potraktowany jako odnośnik do normalnej witryny WWW. Zaletą wczytywania treści przy użyciu technologii AJAX jest możliwość stosowania płynnych animacji przejść pomiędzy stronami. Oprócz tego, poszczególne strony są przechowywane w drzewie DOM. Pozwala to na szybkie cofanie się do poprzedniej strony, bez konieczności odwoływania się do serwera. Jednak wadą takiego rozwiązania jest zwiększone zużycie pamięci. Może się ono zatem okazać problemem na urządzeniach dysponujących ograniczonymi zasobami.

Uwaga Podczas tworzenia aplikacji na wäasnym komputerze naleĔy uĔywaè serwera WWW. W razie tworzenia stron z uĔyciem jQuery Mobile bez korzystania z serwera Ĕñdania wykonywane przy uĔyciu technologii AJAX nie bödñ dziaäaäy, a na ekranie bñdĒ w konsoli bödñ wyĈwietlane bäödy. Choè niektóre przeglñdarki pozwalajñ na wczytywanie zasobów lokalnych nawet za poĈrednictwem Ĕñdaþ wykonywanych przy uĔyciu technologii AJAX, to jednak zawsze warto, o ile to tylko moĔliwe, odtwarzaè Ĉrodowisko produkcyjne.

225

226

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile

Wiersze 24. oraz 25. zawierają dwie różne wersje odnośnika do pliku zewnętrznego. Część twórców woli unikać stosowania atrybutu data-prefetch we wszystkich odnośnikach, gdyż powoduje on generację dodatkowego żądania HTTP, co może pociągnąć za sobą spowolnienie wyświetlania i wczytywania witryny. Można zdecydować się na stosowanie ich wyłącznie w odnośnikach do stron, które na pewno zostaną odwiedzone. Pierwszy z przedstawionych odnośników wczyta stronę, gdy zostanie kliknięty; natomiast drugi wczyta ją możliwie jak najszybciej — nawet bez klikania — by przyspieszyć poruszanie się po witrynie. Listing 9.5 przedstawia kod wczytywanej zewnętrznej strony. Listing 9.5. Wczytywana zewnötrzna strona 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

DoïÈczona strona

OdnoĂnik do poczÈtkowej strony

Warto zwrócić uwagę, że w sekcji nagłówka tego pliku nie ma żadnego kodu CSS ani JavaScript. W tym przykładzie ma to służyć pokazaniu, że strona faktycznie jest wczytywana przy użyciu technologii AJAX oraz że skrypty i arkusze CSS ze strony początkowej wciąż będą dostępne i używane. W produkcyjnej wersji aplikacji warto pomimo to umieścić w tej zewnętrznej stronie arkusze stylów i skrypty, gdyż istnieje prawdopodobieństwo, że ktoś odwoła się do niej bezpośrednio. Można spróbować to zrobić, lecz w takim przypadku strona nie będzie mieć charakterystycznego wyglądu nadawanego przez jQuery Mobile. Szczególną uwagę należy zwrócić na zawartość paska adresu URL przeglądarki. Choć strony są wczytywane przy użyciu technologii AJAX, to adres URL zmienia się zgodnie z aktualnie prezentowaną zawartością. Daje to możliwość zapamiętywania adresów stron i ułatwia poruszanie się po witrynie.

Receptura: WyĈwietlanie komunikatów o wczytywaniu stron

Receptura: WyĈwietlanie komunikatów o wczytywaniu stron Kiedy serwer, z którego korzystamy, jest wolny bądź jeśli dysponujemy wolnym połączeniem z internetem, co w przypadku urządzeń mobilnych jest znacznie bardziej prawdopodobne, to podczas wczytywania stron tworzonych przy użyciu jQuery Mobile są zazwyczaj wyświetlane komunikaty. Informacje te mogą być używane także w innych celach, a nie tylko podczas klikania odnośników (na przykład, kiedy używany kod JavaScript będzie pobierał zawartość z serwera przy użyciu technologii AJAX bądź gdy sam będzie wykonywał złożone i czasochłonne obliczenia). Listing 9.6 pokazuje, w jaki sposób można wyświetlać komunikaty wczytywania strony. Listing 9.6. Wäñczanie i wyäñczanie komunikatów 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

Pokaĝ/ukryj komunikaty o wczytywaniu

Pokaĝ komunikaty o wczytywaniu Ukryj komunikaty o wczytywaniu

227

228

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 38

39 40

41 42 43

W wierszach 34. – 37. zostały umieszczone dwa przyciski służące do włączania i wyłączania wyświetlania komunikatów. Przyciski te zostały powiązane z napisanym przez nas kodem JavaScript. Choć zazwyczaj jQuery Mobile nie wymaga pisania takiego kodu, to jednak istnieje kilka wyjątków od tej reguły. Za włączanie i wyłączanie wyświetlania komunikatów o wczytywaniu odpowiadają wywołania umieszczone odpowiednio w wierszach 17. i 20. Korzystając z tych przycisków, można zauważyć, że właściwie nie ma żadnego powiązania pomiędzy komunikatami a operacjami, które są faktycznie wykonywane. Choć komunikaty można włączać i wyłączać w dowolnej chwili, to jednak stosowanie ich należy ograniczać do tych przypadków, kiedy faktycznie aplikacja wykonuje jakieś operacje w tle lub wczytuje zasoby. Warto zauważyć, że wywołania o postaci $(document).ready(function() {}) można użyć tylko raz — kod umieszczony w wewnętrznej funkcji zostanie wykonany wyłącznie po zakończeniu wczytywania kodu HTML dokumentu. Podczas wczytywania nowych stron przy użyciu technologii AJAX powyższe zdarzenie nie będzie już zgłaszane. Jeśli zależy nam na wykonywaniu jakiegoś kodu podczas wyświetlania każdej ze stron, to należy w tym celu użyć wywołania o postaci $(document).on('pageinit', function() {}).

Receptura: Odwoäania do zewnötrznych stron bez korzystania z technologii AJAX Biblioteka jQuery Mobile domyślnie przekształca wszystkie odnośniki na żądania asynchroniczne wykonywane przy użyciu technologii AJAX, o ile tylko odwołują się one do stron należących do tej samej domeny. Niemniej jednak mogą się zdarzyć sytuacje, w których będziemy chcieli uniknąć takiego sposobu działania biblioteki. Może tak być na przykład w sytuacji, gdy niektóre fragmenty witryny zostaną napisane z wykorzystaniem innej platformy, która nie działa prawidłowo w przypadku wczytywania stron przy użyciu technologii AJAX. Listing 9.7 pokazuje kilka sposobów na wyłączenie wczytywania stron przy wykorzystaniu tej technologii. Listing 9.7. OdnoĈniki do zewnötrznych stron, które majñ byè pobierane bez uĔycia technologii AJAX 00 01 02 03 04 06
Receptura: OkreĈlanie animacji przejĈcia 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

"http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">

OdnoĂniki, które nie korzystajÈ z technologii AJAX

OdnoĂnik do zewnÚtrznego pliku

W wierszu 24. został umieszczony atrybut data-ajax, określający, czy należy korzystać z technologii AJAX czy nie. Domyślną wartością tego atrybutu jest true. Jeśli jednak zostanie mu przypisana wartość false, to asynchroniczne żądania wykonywane przy użyciu technologii AJAX nie będą stosowane. W wierszu 27. został umieszczony atrybut rel="external". Jego zastosowanie daje takie same efekty — jQuery Mobile nie będzie pobierać zasobów przy użyciu technologii AJAX. Ten zapis jest zgodny z zaleceniami języka HTML. Korzystanie z niego może jednak powodować efekty uboczne. Niektórzy projektanci mogą bowiem określać inny wygląd odnośników prowadzących do zasobów zewnętrznych. Na przykład do takich odnośników może być dodawana ikona.

Receptura: OkreĈlanie animacji przejĈcia W przypadku kliknięcia odnośnika wewnętrznego, którego element docelowy jest pobierany przy użyciu technologii AJAX, jQuery Mobile będzie odtwarzać animację przejścia. Domyślnie zawartość strony będzie przesuwana w lewo. Biblioteka jQuery Mobile udostępnia niewielką liczbę takich domyślnych animacji. Noszą one następujące nazwy: pop, slidefade, slide, slideup, slidedown, fade oraz flip.

229

230

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile

Listing 9.8 pokazuje, w jaki sposób można zmienić używaną animację przejścia. Listing 9.8. PrzejĈcie na innñ stronö z wykorzystaniem animacji 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Pierwsza

Witaj, Ăwiecie , razem przejděmy na drugÈ stronÚ.

Druga

Witam ponownie!

W wierszu 24. został umieszczony atrybut data-transition. Można go także zastosować w elemencie form. Platforma jQuery Mobile sama obsługuje efekty przejścia.

Receptura: Stosowanie niestandardowych efektów przejĈè

Receptura: Stosowanie niestandardowych efektów przejĈè Jeżeli będziemy chcieli zastosować inną animację niż te, które są dostępne domyślnie, można ją stworzyć samemu. Można skorzystać z efektów przejść CSS3 (ang. CSS3 transitions), by tworzyć płynne, obsługiwane sprzętowo animacje, i to zarówno płaskie (2D), jak i przestrzenne (3D). Listing 9.9 przedstawia przykład animacji, która powoduje obrócenie stron w momencie wczytywania nowej. Listing 9.9. Przeäñczanie stron przy uĔyciu niestandardowych efektów przejĈè CSS3 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Pierwsza

231

232

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

Witaj, Ăwiecie , przejděmy razem na drugÈ stronÚ

Druga

Witaj ponownie!

Także w powyższym listingu 9.9 nie znajdziemy żadnego kodu JavaScript. W wierszu 43. użyto natomiast atrybutu data-transition, któremu przypisana została wartość mine. jQuery Mobile używa tej wartości, aby dodawać atrybuty class, kiedy jest potrzebna animacja przejścia. W arkuszu stylów umieszczonym w wierszach 9. – 15. podane zostały dwie definicje stylów: klasa .mine połączona z klasą .in oraz klasa .mine połączona z klasą .out. Obie te definicje odwołują się do animacji CSS3 zdefiniowanych w wierszach 17. – 24. W wierszach 17. – 24. zapisane zostały definicje animacji CSS, które powodują, że podczas przejścia strona będzie obracana. Ze względu na użycie prefiksu -webkit- animacje te będą działać wyłącznie w systemie iOS oraz w przeglądarkach Safari i Chrome. Aby działały one także w innych przeglądarkach, trzeba by je powielić i użyć prefiksów -moz-, -ms-, a w przyszłości, kiedy standardy staną się odpowiednio popularne i powszechnie obsługiwane, całkowicie usunąć te prefiksy. Przykład przedstawiony na tym listingu jest przeznaczony dla telefonów iPhone oraz iPadów. Aby zdobyć więcej informacji na temat CSS3 oraz animacji, można zajrzeć na stronę http://www.html5rocks.com/en/features/presentation. W razie korzystania z jQuery Mobile w przeglądarce, która nie obsługuje przestrzennych efektów przejść, efekt zostanie ograniczony do zwyczajnego wygaszenia. Można także przesłonić domyślnie używany efekt przejścia i zamiast niego zastosować jakiś inny. W tym celu należy zmodyfikować globalne ustawienia biblioteki w następujący sposób: $.mobile.transitionFallbacks.slideout = "none";

Inną sytuacją, która może skłonić do zmiany domyślnego efektu przejścia, jest korzystanie z dużych ekranów, na których animacje mogą nie być płynne. W takim przypadku można zmienić wartość właściwości maxTransitionWidth, co pokazuje poniższy przykład: $.mobile.maxTransitionWidth = 640;

Receptura: Obsäuga zdarzeþ generowanych przez urzñdzenia przenoĈne

Powyższa instrukcja sprawia, że jeśli szerokość ekranu będzie większa od 640 pikseli, żaden efekt przejścia nie będzie używany (zostanie mu przypisana wartość none).

Receptura: Obsäuga zdarzeþ generowanych przez urzñdzenia przenoĈne W rozdziale 4., „Odbieranie zdarzeń i odpowiadanie na nie”, zostały podane informacje o tym, w jaki sposób można przechwytywać standardowe zdarzenia generowane przez przeglądarki WWW. Jednak urządzenia przenośne są obsługiwane raczej przy użyciu gestów niż myszki. Oprócz tego, sposoby obsługi zdarzeń na różnych urządzeniach przenośnych mogą być odmienne. Biblioteka jQuery Mobile ukrywa przed nami wszystkie te rozbieżności. Listing 9.10 pokazuje, w jaki sposób można obsługiwać kilka podstawowych typów zdarzeń mobilnych, takich jak: dotknięcie, przeciągnięcie, zmiana orientacji oraz zmiana strony. Pozostałe rodzaje zdarzeń typowych dla urządzeń przenośnych zostały opisane w dalszej części rozdziału. Listing 9.10. Obsäuga zdarzeþ przeciñgniöcia, zmiany orientacji i innych 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31



233

234

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

Zdarzenia

OdnoĂnik do zewnÚtrznego pliku.

WstÚpne wczytanie zewnÚtrznego pliku

Wyświetlając w przeglądarce tę przykładową stronę, można się przekonać, w jaki sposób działają zdarzenia oraz procedury ich obsługi. Warto spróbować obrócić urządzenie, dotknąć wybranego miejsca strony, przeciągnąć palcem po ekranie w różnych kierunkach i przekonać się, jakie efekty powoduje każda z tych czynności. Tabela 9.1 zawiera listę wszystkich zdarzeń, które można obsługiwać przy wykorzystaniu jQuery Mobile. Tabela 9.1. Zdarzenia charakterystyczne dla jQuery Mobile

Typ zdarzenia

Opis

tap

UĔytkownik szybko dotknñä ekranu urzñdzenia w jednym miejscu.

taphold

UĔytkownik dotknñä ekranu urzñdzenia i przytrzymaä palec przez pewien czas.

swipe

UĔytkownik przeciñgnñä palcem po ekranie urzñdzenia.

swipeleft

UĔytkownik przesuwa palec po ekranie w lewo.

swiperight

UĔytkownik przesuwa palec po ekranie w prawo.

orientationchange

Orientacja urzñdzenia zostaäa zmieniona z pionowej na poziomñ lub odwrotnie.

scrollstart

UĔytkownik zaczñä przewijaè zawartoĈè ekranu.

scrollstop

UĔytkownik skoþczyä przewijaè zawartoĈè ekranu.

pageshow

Zostaäa wyĈwietlona nowa strona.

pagehide

WczeĈniej wyĈwietlana strona zostaäa ukryta.

vmouseover

Emulacja zdarzenia mouseover säuĔñca normalizacji zdarzeþ zwiñzanych z dotykiem.

vmousedown

Emulacja zdarzenia mousedown säuĔñca normalizacji zdarzeþ zwiñzanych z dotykiem.

Receptura: Obsäuga zdarzeþ generowanych przez urzñdzenia przenoĈne Tabela 9.1. Zdarzenia charakterystyczne dla jQuery Mobile (ciñg dalszy)

Typ zdarzenia

Opis

vmousemove

Emulacja zdarzenia mousemove säuĔñca normalizacji zdarzeþ zwiñzanych z dotykiem.

vmouseup

Emulacja zdarzenia mouseup säuĔñca normalizacji zdarzeþ zwiñzanych z dotykiem.

vclick

Emulacja zdarzenia click säuĔñca normalizacji zdarzeþ zwiñzanych z dotykiem.

vmousecancel

To zdarzenie jest generowane w przypadku, gdy zgäoszone wczeĈniej zdarzenie säuĔñce do normalizacji operacji zwiñzanych z myszkñ okazuje siö byè innym zdarzeniem, takim jak swipe.

pagebeforeload

To zdarzenie jest zgäaszane przed wczytaniem strony. Do procedury jego obsäugi, oprócz samego obiektu zdarzenia, przekazywany jest takĔe drugi parametr, bödñcy obiektem o nastöpujñcych wäaĈciwoĈciach: url, absUrl, dataUrl, deferred, options. Sñ to kolejno: trzy róĔne rodzaje adresów URL okreĈlajñce wczytywany zasób, obiekt deferred, przy uĔyciu którego moĔna zmieniè uĔywany mechanizm wczytywania zasobu, oraz obiekt options, zawierajñcy parametry przekazywane do funkcji loadPage().

pageload

To zdarzenie jest zgäaszane po udanym wczytaniu strony i przetworzeniu jej do postaci drzewa DOM. W jego przypadku drugi argument procedury obsäugi jest podobny do obiektu przekazywanego podczas obsäugi zdarzenia pagebeforeload; jednak zamiast obiektu deferred posiada on wäaĈciwoĈci xhr oraz textStatus. Sñ to odwoäania do obiektu XmlHttpRequest oraz informacji o wyniku Ĕñdania zapisanej w formie äaþcucha znaków.

pageloadfailed

To zdarzenie jest zgäaszane, kiedy nie uda siö wczytaè Ĕñdanej strony. W tym przypadku obiekt przekazywany jako drugi parametr zawiera wszystkie wäaĈciwoĈci dostöpne podczas obsäugi zdarzeþ pagebeforeload oraz pageload, a dodatkowo zawiera takĔe wäaĈciwoĈè errorThrown.

pagebeforechange

To zdarzenie jest zgäaszane moĔliwie jak najwczeĈniej przed zmianñ strony. A zatem jest ono zgäaszane przed wczytaniem nowej strony. Obsäugujñc zdarzenie pagebeforechange, moĔna zapobiec zmianie strony przy uĔyciu wywoäania event.preventDefault(). Drugim parametrem przekazywanym do tej funkcji jest obiekt zawierajñcy dwie wäaĈciwoĈci: toPage oraz options.

pagechange

To zdarzenie jest wywoäywane po zmianie strony. TakĔe w tym przypadku drugim parametrem przekazywanym do procedury obsäugi zdarzenia jest obiekt zawierajñcy dwie wäaĈciwoĈci: toPage oraz options.

pagechangefailed

To zdarzenie jest zgäaszane, kiedy nie uda siö zmieniè strony. TakĔe w tym przypadku drugim parametrem przekazywanym do procedury obsäugi zdarzenia jest obiekt zawierajñcy dwie wäaĈciwoĈci: toPage oraz options.

235

236

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile Tabela 9.1. Zdarzenia charakterystyczne dla jQuery Mobile (ciñg dalszy)

Typ zdarzenia

Opis

pagebeforeshow

To zdarzenie jest zgäaszane bezpoĈrednio przed wyĈwietleniem nowej strony. W momencie zgäaszania tego zdarzenia animacja przejĈcia jeszcze nie zostaäa uruchomiona. Drugim parametrem procedury obsäugi jest obiekt zawierajñcy wäaĈciwoĈè prevPage.

pagebeforehide

To zdarzenie jest zgäaszane bezpoĈrednio przed ukryciem aktualnie wyĈwietlanej strony. W momencie zgäaszania tego zdarzenia animacja przejĈcia jeszcze nie zostaäa uruchomiona. Drugim parametrem procedury obsäugi jest obiekt zawierajñcy wäaĈciwoĈè nextPage.

pageshow

To zdarzenie jest przekazywane do nowej strony, bezpoĈrednio po zakoþczeniu efektu przejĈcia. Pod innymi wzglödami przypomina ono zdarzenie pagebeforeshow.

pagehide

To zdarzenie jest przekazywane do starej strony tuĔ po zakoþczeniu efektu przejĈcia. Pod innymi wzglödami przypomina ono zdarzenie pagebeforehide.

pagebeforecreate

To zdarzenie jest zgäaszane w momencie tworzenia nowej strony, zanim jQuery Mobile przetworzy jej kod HTML i zainicjuje widĔety. Wskazówka: warto go uĔywaè, by uproĈciè kod HTML strony i okreĈlaè wartoĈci takich atrybutów jak data-role z poziomu kodu JavaScript.

pagecreate

To zdarzenie jest zgäaszane po utworzeniu strony, lecz jeszcze zanim widĔety zmodyfikujñ jej kod HTML. MoĔna go uĔywaè do doäñczania do biblioteki wäasnych wtyczek.

pageinit

To zdarzenie jest zgäaszane po wczytaniu strony. SäuĔy ono bibliotece jQuery Mobile jako zamiennik zdarzenia ready, w przypadkach gdy na stronach wczytywanych przy uĔyciu technologii AJAX jest jakiĈ kod, który powinien byè wykonywany po ich wczytaniu. Zaleca siö kojarzenie tego zdarzenia z elementami div reprezentujñcymi strony, a nie z caäymi dokumentami HTML.

pageremove

To zdarzenie jest generowane bezpoĈrednio przed usuniöciem strony.

updatelayout

To zdarzenie jest generowane w momencie wyĈwietlania lub ukrywania komponentu. Stanowi ono sygnaä dla innych komponentów, Ĕe powinny przeliczyè swój rozmiar i poäoĔenie.

W wierszach 16. – 19. wymienionych zostało jedynie kilka spośród wszystkich dostępnych zdarzeń. Zdarzenia te są standardowo używane podczas interakcji z użytkownikami urządzeń przenośnych. Można je zastąpić innymi zdarzeniami z tabeli 9.1, by przestudiować działanie innych elementów mechanizmu obsługi zdarzeń biblioteki jQuery Mobile (na przykład: cykl wczytywania stron). Dzięki wykorzystaniu wirtualnych zdarzeń związanych z myszką można zapewnić odpowiednie działanie aplikacji zarówno na urządzeniach obsługiwanych przy użyciu dotyku, jak i komputerach wyposażonych w myszkę. W przypadku korzystania z komputera wyposażonego w myszkę jQuery Mobile automatycznie skorzysta z odpowiednich procedur, by prawidłowo obsługiwać

Receptura: Generacja przycisku Wstecz

to urządzenie. Z kolei w razie korzystania z urządzenia obsługiwanego przy użyciu dotyku zdarzenia są zamieniane na odpowiednie zdarzenia związane z dotykiem, zgłaszane i obsługiwane w takiej samej kolejności co odpowiadające im zdarzenia związane z myszką. Standaryzowane są także informacje przekazywane do procedur obsługi zdarzeń związanych z obsługą myszy i z dotykiem, dzięki czemu wszystkie zwracane współrzędne będą takie same. Podczas korzystania z wirtualnych zdarzeń myszy można zrezygnować ze stosowania zdarzenia vclick. W przeglądarkach mobilnych bazujących na silniku WebKit może ono bowiem powodować 300-milisekundowe opóźnienie, które nie tylko sprawi, że animacje nie będą płynne, lecz co gorsza może doprowadzić do pojawiania się niepożądanych zdarzeń dwukrotnego kliknięcia.

Receptura: Generacja przycisku Wstecz Podczas poruszania się po witrynie czasami może się przydać wyświetlanie na jej stronach przycisku pozwalającego na cofnięcie się na poprzednią stronę. Oczywiście, przeglądarki WWW udostępniają standardowy przycisk, który służy właśnie do tego celu. Jednak można wskazać ważkie powody przemawiające za umieszczeniem takiego przycisku bezpośrednio w aplikacji. Jednym z nich jest to, że kiedy aplikacja działa w trybie pełnoekranowym, przyciski przeglądarki nie są widoczne. Ważniejsze jest jednak to, że internetowe aplikacje tworzone przy użyciu biblioteki jQuery Mobile udają rodzime aplikacje komputerowe. A w nich przycisk Wstecz (ang. Back) jest umieszczany w lewym górnym wierzchołku ekranu. Listing 9.11 pokazuje, w jaki sposób jQuery Mobile ułatwia wyświetlanie przycisku Wstecz, kiedy aplikacja będzie go potrzebować. Listing 9.11. Przechodzenie na drugñ stronö, gdy dostöpny jest przycisk Wstecz 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

237

238

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

Pierwsza

Przejdě na drugÈ stronÚ, aby zobaczyÊ przycisk "Wstecz".

Druga

TreĂÊ drugiej strony.

Pierwszą rzeczą, jaką można zauważyć po wyświetleniu tej strony w przeglądarce, jest brak przycisku Wstecz. Jest to całkiem słuszne, gdyż ciągle przebywamy na pierwszej stronie, więc nie ma się gdzie cofnąć. Kolejnym powodem przemawiającym za takim rozwiązaniem jest to, że na pierwszej stronie nie został zdefiniowany atrybut data-addback-button="true"1. Można spróbować, co się stanie, jeśli atrybut ten zostanie dodany także do pierwszej strony aplikacji. Po przejściu na drugą stronę przycisk Wstecz zostanie wyświetlony w lewym górnym wierzchołku strony. Warto zwrócić uwagę, że wiersze 34. – 36. nie zawierają jednak żadnego kodu związanego z tym przyciskiem. Oprócz tego można także dodać atrybut data-rel="back" do odnośnika, co sprawi, że jego kliknięcie spowoduje wyświetlenie poprzedniej strony. W razie stosowania takiego rozwiązania w atrybucie href należy podać faktyczny adres URL, tak by starsze przeglądarki i urządzenia były w stanie wyświetlić odpowiednią stronę.

Receptura: Dodawanie stopek u doäu strony W przykładach przedstawionych do tej pory używane były jedynie nagłówki oraz elementy div zawierające treść strony. Jednak w bardzo podobny sposób można także tworzyć elementy div, które będą wyświetlane jako stopki. Korzystając ze stopek, należy 1

Atrybut data-back-btn-text pozwala na określenie tekstu wyświetlanego na przycisku; domyślnie jest to słowo Back — przyp. tłum.

Receptura: Dodawanie stopek u doäu strony

pamiętać o dwóch zagadnieniach: jakie jest ich położenie na ekranie oraz co chcemy w nich wyświetlać. Listing 9.12 przedstawia przykład strony ze stopką, w której zostało umieszczonych kilka przycisków. Listing 9.12. WyĈwietlanie u doäu strony stopki z kilkoma przyciskami 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Stopka

ZawartoĂÊ strony

Stopka

Przycisk? Usuń Dodaj

Pierwszy przycisk został zdefiniowany w wierszu 30. Jak widać, by stworzyć przycisk, wystarczy użyć zwyczajnego elementu odnośnika. Odnośniki w stopkach są domyślnie wyświetlane w formie przycisków. Wiersze 31. – 36. zawierają dwa przyciski zdefiniowane

239

240

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile

w standardowy sposób, przy czym do każdego z nich została dodana ikona. Listę wszystkich aktualnie dostępnych ikon można znaleźć na stronie: http://api.jquerymobile.com/mobileicons/. Element div zawierający treść strony jest w tym przykładzie niemal pusty. Można dodać do niego nieco więcej treści i przekonać się, jak to wpłynie na położenie stopki podczas przewijania strony w górę i w dół. Stopka zostanie wyświetlona poniżej dodanej treści i będzie umieszczona u dołu strony. Zamiast niezależnych przycisków można także stworzyć ich grupę. Domyślnie przyciski wchodzące w skład grupy przycisków są rozmieszczane w pionie. Dzięki zastosowaniu atrybutu data-type="horizontal" można jednak wyświetlić wszystkie przyciski w formie jednego poziomego prostokąta, którego lewa i prawa krawędź będzie zaokrąglona. Przykład takiego układu grupy przycisków został przedstawiony na listingu 9.13. Listing 9.13. WyĈwietlanie grupy przycisków w stopce 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

Grupa przycisków w stopce

ZawartoĂÊ strony

Pierwszy Drugi Trzeci Czwarty

Receptura: Ta sama stopka na wielu stronach 36

37 38

39 40 41 42

W wierszach 30. – 35. umieszczony został element div z atrybutami datarole="controlgroup" oraz data-type="horizontal", a wewnątrz niego grupa niezależnych przycisków.

Receptura: Ta sama stopka na wielu stronach Kliknięcie odnośnika powoduje uruchomienie animacji podczas zmiany wyświetlanej strony. Może się jednak zdarzyć, że nie będziemy chcieli, by stopka była objęta tą animacją. Listing 9.14 pokazuje, w jaki sposób sprawić, by stopka cały czas była widoczna podczas przechodzenia na inną stronę. Listing 9.14. WyĈwietlanie stopki podczas zmiany strony 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Pierwsza

Przejdě na drugÈ stronÚ.

Pierwsza strona

241

242

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

Druga strona

ZawartoĂÊ drugiej strony.

WiÚcej treĂci.

Druga strona

Elementy div umieszczone w wierszach 27. i 44. zawierają atrybut data-position="fixed". Po kliknięciu odnośnika można się przekonać, że animowany jest nagłówek oraz treść strony, lecz nie jej stopka. Oczywiście, widać także, że zmieniła się zawartość stopki.

Receptura: WyĈwietlanie stopki w ustalonym miejscu W wersjach jQuery Mobile wcześniejszych od 1.1 podczas przewijania strony stopka chwilowo znikała i pojawiała się ponownie po zakończeniu przewijania. Jednak po wprowadzeniu wersji 1.1 stopka i nagłówek pozostają u dołu i u góry strony. Jednak byłoby znacznie bardziej elegancko, gdyby nagłówek i stopka pozostawały w tym samym położeniu, a jedynie treść strony była przewijana. I właśnie taką możliwość dają ustalone paski narzędzi. Listing 9.15 przedstawia, w jaki sposób można je tworzyć i stosować. Listing 9.15. Przewijanie tekstu bez modyfikacji poäoĔenia stopki 00 01 02 03 04 06 08 11

Staïe poïoĝenie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus tellus, iaculis vestibulum ornare sit amet, semper ac nisi. Suspendisse convallis, libero ut sodales interdum, turpis ligula lacinia justo, a accumsan tellus est at lacus. Morbi ultricies posuere enim, sit amet luctus massa faucibus ut. Maecenas vel mi quis massa volutpat consequat ac non mi. Nam et ornare sapien. Donec vitae magna sed neque lacinia imperdiet. Vivamus tellus velit, molestie in interdum vel, gravida vel mauris. Vivamus justo augue, ultrices ut viverra ut, sollicitudin id lacus. Integer ornare massa ut risus tempus lobortis. Donec ac nisi eu nunc volutpat posuere dapibus ut nisi. Nam sit amet mauris a ante vehicula mattis. Phasellus rutrum rutrum enim, at convallis neque convallis eu. Duis dictum justo venenatis mauris feugiat quis aliquam enim egestas. Integer et ante metus, ut faucibus libero.

Sed lobortis nunc nec ligula dictum dignissim pellentesque lorem semper. Vivamus dui felis, pulvinar non accumsan ac, facilisis a lectus. In blandit aliquet sapien sed eleifend. Mauris ut arcu nisl. Morbi eget sapien vulputate lectus dapibus congue. Cras id odio nulla, quis viverra massa. Mauris tortor nisl, tincidunt et vestibulum nec, blandit ut purus. In vel massa a erat tristique lacinia. Vestibulum malesuada tristique nunc, in dictum quam faucibus a. Etiam sed enim ante, et aliquam quam. Donec velit velit, cursus at sodales id, accumsan at sapien.

Druga strona

243

244

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile

Kod umieszczony w wierszach 15. – 16. zapewnia, że nagłówki i stopki będą cały czas wyświetlane u góry i u dołu ekranu, a nie na początku i na końcu zawartości strony. W wierszu 17. właściwości touchOverflowEnabled przypisywana jest wartość true; powoduje ona, że obszar przewijany przy użyciu pasków przewijania zostaje ograniczony do zawartości strony.

Receptura: WyĈwietlanie i ukrywanie stopki W przypadku korzystania z normalnych stopek, które są wyświetlane i ukrywane, gdy użytkownik przewija zawartość strony, istnieje także możliwość ich wyświetlania i ukrywania z poziomu kodu JavaScript. Listing 9.16 pokazuje, jak można to zrobić. Listing 9.16. Dodawanie przycisków ukrywajñcych i wyĈwietlajñcych stopkö 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

Receptura: WyĈwietlanie i ukrywanie stopki 34

35

Ustalona stopka

36

37 38

39

Przejdě na drugÈ stornÚ.

40 Pokaĝ stopkÚ 41 Ukryj stopkÚ 42 43

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 44 Cras metus tellus, iaculis vestibulum ornare sit amet, 45 semper ac nisi. Suspendisse convallis, libero ut sodales 46 interdum, turpis ligula lacinia justo, a accumsan tellus est 47 at lacus. Morbi ultricies posuere enim, sit amet luctus 48 massa faucibus ut. Maecenas vel mi quis massa volutpat 49 consequat ac non mi. Nam et ornare sapien. Donec vitae magna 50 sed neque lacinia imperdiet. Vivamus tellus velit, molestie 51 in interdum vel, gravida vel mauris. Vivamus justo augue, 52 ultrices ut viverra ut, sollicitudin id lacus. Integer 53 ornare massa ut risus tempus lobortis. Donec ac nisi eu nunc 54 volutpat posuere dapibus ut nisi. Nam sit amet mauris a ante 55 vehicula mattis. Phasellus rutrum rutrum enim, at convallis 56 neque convallis eu. Duis dictum justo venenatis mauris 57 feugiat quis aliquam enim egestas. Integer et ante metus, ut 58 faucibus libero.

59 60

Sed lobortis nunc nec ligula dictum dignissim 61 pellentesque lorem semper. Vivamus dui felis, pulvinar non 62 accumsan ac, facilisis a lectus. In blandit aliquet sapien 63 sed eleifend. Mauris ut arcu nisl. Morbi eget sapien 64 vulputate lectus dapibus congue. Cras id odio nulla, quis 65 viverra massa. Mauris tortor nisl, tincidunt et vestibulum 66 nec, blandit ut purus. In vel massa a erat tristique 67 lacinia. Vestibulum malesuada tristique nunc, in dictum quam 68 faucibus a. Etiam sed enim ante, et aliquam quam. Donec 69 velit velit, cursus at sodales id, accumsan at sapien.

70 71

72

73

Druga strona

74

75 76

77 78 79 80

Wiersze od 16. – 26. zawierają kod umożliwiający wyświetlanie i chowanie nagłówków i stopek. Kiedy stopka jest „ukryta”, to wciąż jest widoczna u dołu strony — nie jest natomiast wyświetlana u dołu ekranu. To samo dotyczy nagłówków.

245

246

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile

Receptura: Optymalizacja nagäówków i stopek pod kñtem prezentacji peänoekranowych jQuery Mobile udostępnia możliwość określaną jako tryb pełnoekranowy. W tym trybie nagłówek i stopka domyślnie przesłaniają treść strony, lecz kiedy użytkownik kliknie tę treść, nagłówek i stopka znikają. Jeśli zainstalujemy aplikację internetową na telefonie w formie ikony wyświetlanej wraz ze wszystkimi innymi aplikacjami bądź też jeśli zintegrujemy ją z jakąś rodzimą platformą do tworzenia aplikacji internetowych, taką jak Phonegap, to nasza aplikacja może być wyświetlana w trybie pełnoekranowym, bez widocznego paska adresu, paska statusu oraz pasków przewijania przeglądarki. Aby móc optymalnie korzystać z tego trybu pełnoekranowego, warto mieć możliwość całkowitego ukrywania nagłówków i stopek — inaczej niż w poprzednim przykładzie, w którym ukrycie stopki oznaczało jedynie wyświetlenie jej u dołu strony. Listing 9.17 pokazuje, jak umożliwić korzystanie z trybu pełnoekranowego. Listing 9.17. WyĈwietlanie nagäówków i stopek ponad zawartoĈciñ w ramach trybu peänoekranowego 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

Nagïówek jest wyĂwietlany nad sekcjÈ zawartoĂci

Nagïówek

Kliknij, aby ukryÊ nagïówek i stopkÚ.

Drugie klikniÚcie pozwoli je ponownie wyĂwietliÊ.

JeĂli zawartoĂÊ strony bÚdzie odpowiednio duĝa, to takĝe stopka zostanie wyĂwietlona nad zawartoĂciÈ.

Receptura: Zmiana schematu kolorów przy uĔyciu tematów 34

35 36 37

Wiersz 17. zawiera atrybut pozwalający na uruchomienie trybu pełnoekranowego. Aby optymalnie wykorzystać możliwości, jakie daje ten sposób prezentacji treści strony, warto określić jej wygląd przy użyciu niestandardowych arkuszy stylów.

Receptura: Zmiana schematu kolorów przy uĔyciu tematów W rozdziale 8., „Zmiany wyglądu”, przedstawione zostało narzędzie ThemeRoller, służące do zmiany wyglądu interfejsu użytkownika tworzonego przy użyciu biblioteki jQuery UI. Podobne narzędzie udostępnia także biblioteka jQuery Mobile; jest ono dostępne na stronie http://jquerymobile.com/themeroller/. Po zdefiniowaniu swojego własnego schematu kolorów można go stosować, określając w kodzie HTML, który temat (ang. theme) ma być używany. Nawet jeśli nie zdefiniujemy własnego zestawu kolorów, to wciąż możemy korzystać z kilku domyślnych, przedstawionych na listingu 9.18. Listing 9.18. Stosowanie kilku tematów na jednej stronie 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Tematy - 1

Pierwszy Drugi

247

248

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 26

27

28

TreĂÊ

29 Trzeci 31 Czwarty 33 PiÈty 35

36 37

38

39 Pierwszy 40 Drugi 41 Trzeci 42 Czwarty 43 PiÈty 44

45

46

47 48 49 50

W wierszu 20. zmieniany jest temat używany w nagłówku strony. Jednak wewnątrz tego nagłówka przycisk umieszczony w wierszu 24. został wyświetlony przy użyciu innego tematu. Podobnie jest w przypadku sekcji treści strony, która używa tematu domyślnego, oprócz przycisków umieszczonych w wierszach 29. – 34., które są wyświetlane w inny sposób. Nawet zgrupowane przyciski mogą być prezentowane w odmienny sposób, co pokazuje kod zapisany w wierszach 39. – 43. Zamiast stosować różne tematy w poszczególnych elementach, można także wybrać jeden, który będzie używany na całej stronie. Sposób zmiany używanego tematu został przedstawiony na listingu 9.19. Listing 9.19. Zmiana tematu uĔywanego na caäej stronie 00 01 02 03 04 06 08 11 14

Receptura: Tworzenie wielu kolumn 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

Tematy - 2

Nagïówek

Moĝna takĝe wybieraÊ temat okreĂlajÈcy wyglÈd zawartoĂci strony.

• Oto test.

W tym przykładzie temat stosowany w obrębie całej strony został określony w wierszu 18. Wyświetlając stronę, można się przekonać, że nawet tło jej treści jest ciemne, a czcionka jasna.

Receptura: Tworzenie wielu kolumn Do tej pory przedstawione zostały sposoby tworzenia całych stron, nagłówków i stopek oraz stosowanie tematów. Jednak może się czasami zdarzyć, że na stronie będziemy potrzebowali utworzyć większą liczbę kolumn. Zwłaszcza w przypadku stosowania tabletów może się okazać, że w celu bardziej optymalnego wykorzystania przestrzeni warto podzielić stronę na kolumny. jQuery Mobile udostępnia domyślne klasy reprezentujące odrębne kolumny. Listing 9.20 korzysta z nich, by wyświetlić wiersze z kilkoma przyciskami. Listing 9.20. Przedstawienie kolumn na przykäadzie rozmieszczania przycisków 00 01 02 03 04 06 08

Ukïady

Z lewej

Z prawej

Z lewej

Po Ărodku

Z prawej

Z lewej

Nieco z lewej

Nieco z prawej

Z prawej

Receptura: Zmiana stron przy wykorzystaniu skryptów

W pierwszej kolejności warto zwrócić uwagę na wiersze 26., 35. oraz 47. Są w nich umieszczone elementy div z atrybutami class o wartościach: ui-grid-a, ui-grid-b i ui-grid-c. Te klasy przekształcają elementy div w pojemniki zawierające wiele kolumn. Oznaczają one odpowiednio: dwie, trzy oraz cztery kolumny. Wewnątrz tych elementów div umieszczone zostały zagnieżdżone elementy div, w których użyto klas: ui-block-a, ui-block-b, ui-block-c oraz ui-block-d. Reprezentują one poszczególne kolumny. Nazwy kolumn mogą być stosowane niezależnie od pojemnika, w którym dana kolumna została umieszczona. Oczywiście, lepiej unikać stosowania klasy ui-block-c wewnątrz pojemnika ui-grid-a, gdyż reprezentuje element zawierający jedynie dwie kolumny.

Receptura: Zmiana stron przy wykorzystaniu skryptów Na początku tego rozdziału przedstawione zostały receptury, które tworzyły odwołania pomiędzy stronami przy użyciu zwyczajnych odnośników HTML (). Jednak jQuery Mobile jest platformą stworzoną przy użyciu języka JavaScript. I chociaż w aplikacjach jQuery Mobile trzeba stosować bardzo niewiele kodu JavaScript, to jednak i tak może się zdarzyć, że będziemy potrzebowali możliwości zmiany strony z poziomu kodu JavaScript. Listing 9.21 pokazuje, jak można to robić. Listing 9.21. Zmiana stron z poziomu kodu JavaScript 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25



251

252

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 26 27

28 29

30

Zmienianie stron

31

32 33

34 Zmieñ stronÚ 35

36 37 38

W wierszach 18. i 19. zostało umieszczone wywołanie funkcji changePage. Oprócz podania adresu URL strony, którą chcemy wyświetlić, wywołanie to określa także, że strona ma być zmieniona przy użyciu efektu przejścia fade, a nie domyślnego. Oprócz efektu przejścia w ten sam sposób można określać także inne parametry działania jQuery Mobile. Opcje, które można przekazywać do funkcji changePage(), zostały przedstawione w tabeli 9.2. Tabela 9.2. Dodatkowe opcje funkcji changePage()

Nazwa opcji

Opis

allowSamePageTransition

Przypisanie wartoĈci true tej opcji sprawi, Ĕe efekt przejĈcia zostanie odtworzony nawet w przypadku wyĈwietlenia tej samej strony.

changeHash

W razie przypisania tej opcji wartoĈci false nie bödzie moĔliwa zmiana wartoĈci podanej w pasku adresu za znakiem #.

Data

Ta wäaĈciwoĈè pozwala okreĈlaè dodatkowe parametry, które zostanñ dodane do adresu URL podczas pobierania strony przy uĔyciu technologii AJAX.

dataUrl

OkreĈla adres URL, który po zmianie strony zostanie przypisany wäaĈciwoĈci location przeglñdarki.

pageContainer

Ta opcja pozwala zmieniè miejsce, w którym nowa strona zostanie umieszczona w drzewie DOM.

reloadPage

Przypisanie tej opcji wartoĈci true powoduje, Ĕe po zmianie strony zostanie ona ponownie wczytana.

reverse

Przypisanie tej opcji wartoĈci true powoduje, Ĕe efekt przejĈcia zostanie odtworzony w przeciwnym kierunku.

showLoadMsg

Przypisanie tej opcji wartoĈci false sprawi, Ĕe podczas zmiany strony nie bödñ wyĈwietlane komunikaty wczytywania.

role

Ta opcja pozwala zmieniè uĔywanñ rolö. Odpowiada ona uĔyciu atrybutu data-role w elemencie odnoĈnika. MoĔna jej uĔyè na przykäad do wyĈwietlenia okna dialogowego.

transition

Ta opcja pozwala zmieniè uĔywany efekt przejĈcia (zostaäa ona uĔyta w ostatnim przykäadzie).

type

Zmienia uĔywanñ metodö HTTP na get lub post.

Receptura: Wczytywanie stron przy uĔyciu skryptów

Listing 9.22 przedstawia zawartość, która ma zostać wczytana i wyświetlona. Listing 9.22. ZawartoĈè wczytywana przy uĔyciu wywoäania metody JavaScript 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

Druga strona

Przejdě na poprzedniÈ stronÚ.

Podobnie jak w poprzednich przykładach, także w tym celowo pominięto wszystkie skrypty i style, by pokazać, że strona zostaje wczytana przy użyciu technologii AJAX. W rzeczywistych aplikacjach te style i skrypty zostałyby zapewne określone, gdyż stronę można by wyświetlać bezpośrednio poprzez podanie jej adresu URL. W przypadku wczytywania stron przy użyciu jQuery Mobile wszelkie skrypty umieszczone w sekcji nagłówka strony zostają pominięte.

Receptura: Wczytywanie stron przy uĔyciu skryptów W przypadku zmiany wyświetlanej strony najpierw zostanie ona dodana do drzewa DOM, a dopiero potem przeglądarka mobilna ją wyświetli. Dodanie do elementu odnośnika atrybutu data-prefatch spowoduje, że jQuery Mobile wczyta stronę z wyprzedzeniem, jeszcze zanim użytkownik kliknie odnośnik. Podobny sposób działania jQuery Mobile można uzyskać nawet bez tworzenia odnośników w kodzie HTML. Listing 9.23 pokazuje, w jaki sposób wczytywać dane z wyprzedzeniem, z poziomu kodu JavaScript. Listing 9.23. UĔycie kodu JavaScript do wczytania strony 00 01

253

254

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Wczytywanie strony

Zmieñ stronÚ

Aby obejrzeć wyniki operacji wczytywania, konieczne będzie odpowiednie narzędzie, takie jak Firebug w przeglądarce Firefox lub podobne narzędzie programistyczne w innej przeglądarce. W drzewie DOM dokumentu nowa strona pojawi się po kliknięciu przycisku, z którym został skojarzony kod JavaScript. Kod umieszczony w wierszach 20. – 22. pokazuje, w jaki sposób metoda loadPage pozwala na korzystanie z obiektu obietnicy. Przedstawione wywołanie loadPage() najpierw określa adres strony, którą należy wczytać, a następnie określa także efekt przejścia, którego należy użyć podczas wyświetlania nowej strony. Pełne informacje o opcjach i argumentach tej metody można znaleźć w dokumentacji jQuery Mobile, na stronie http://api.jquerymobile.com/jQuery.mobile.loadPage/. Podobnie jak w przypadku funkcji opisanych w rozdziale 5., „Komunikacja z serwerem”, także i tutaj po wczytaniu strony jest wykonywana funkcja done().

Receptura: Doäñczanie danych do wözäów DOM przy uĔyciu jQuery Mobile

Receptura: Doäñczanie danych do wözäów DOM przy uĔyciu jQuery Mobile W rozdziale 1. została przedstawiona funkcja data(). Pozwala ona na wydajne zapisywanie danych skojarzonych z konkretnymi węzłami drzewa DOM. W tym przypadku słowo „wydajne” oznacza, że w trakcie wykonywania tych operacji nie są wprowadzane żadne zmiany w drzewie DOM. Biblioteka jQuery Mobile udostępnia inną wersję tej funkcji: jqmData(). Listing 9.24 pokazuje, w jaki sposób można jej używać tak samo jak funkcji data(). Jedyna różnica pomiędzy nimi polega na tym, że w nazwie funkcji jqmData() została umieszczona przestrzeń nazw. W bibliotece jQuery Mobile przestrzenie nazw mają duże znaczenie, gdyż zabezpieczają jej kod przed wtyczkami oraz innymi bibliotekami, z których możemy korzystać oprócz jQuery Mobile. Zespół zajmujący się rozwojem biblioteki zaleca, by w przypadku korzystania z nich stosować właśnie funkcję jqmData(), a nie data(). Listing 9.24. Dodawanie, pobieranie oraz usuwanie danych skojarzonych z wözäami DOM przy uĔyciu jQuery Mobile 00 01 02 03 04 06 08 11 14 33

255

256

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

Funkcje obsïugi danych biblioteki jQuery Mobile

Ten akapit sïuĝy jako pojemnik na dane.

Zapis danych Pobranie danych UsuniÚcie danych Wybór

Wiersze 18., 21. oraz 24. pokazują, jak zapisywać, pobierać oraz usuwać dane, korzystając z funkcji jqmData(). Porównując je z analogicznymi przykładami zamieszczonymi w rozdziale 1., łatwo zauważyć, że jest pomiędzy nimi więcej podobieństw niż różnic. Podobnie jak data() także funkcja jqmData() odczytuje atrybuty data- z kodu HTML. Jest to bardzo użyteczne, gdyż pozwala na wybieranie elementów z drzewa DOM. Kod umieszczony w wierszu 28. pokazuje, w jaki sposób można używać funkcji jqmData() w selektorze CSS. Jak widać, wymaga to użycia nieco dłuższego kodu niż w przypadku użycia zwyczajnego selektora: $('a[data-role="button"]'). Jednak takie wywołanie zapewnia odpowiednie użycie przestrzeni nazw. Przestrzeń nazw można zmienić przy użyciu opcji konfiguracyjnej $.mobile.ns. Jeśli użyjemy przestrzeni nazw myns, to musimy także odpowiednio zmienić role przycisków, używając w tym celu atrybutów data-myns-role.

Receptura: Korzystanie z funkcji pomocniczych jQuery Mobile Do realizacji żądań asynchronicznych jQuery Mobile używa kilku funkcji pomocniczych, jednak fakt korzystania z nich zazwyczaj nie jest widoczny dla użytkownika biblioteki. Dla wygody programistów z funkcji tych można także korzystać we własnym kodzie JavaScript. Listing 9.25 pokazuje, w jaki sposób można korzystać z funkcji pomocniczych służących do operowania na adresach URL. Listing 9.25. Odczyt adresów URL przy uĔyciu funkcji parseUrl() 00 01 02 03

Receptura: Korzystanie z funkcji pomocniczych jQuery Mobile 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

75 76 77 78

79 80

81

Funkcje pomocnicze do przetwarzania adresów URL

82

83 84

85 Przetworzenie 86 adresu URL 87 ¥cieĝka 88 bezwzglÚdna 89 BezwzglÚdny 90 adres URL 91 Czy adres jest 92 bezwzglÚdny? 93 Czy adres jest 94 wzglÚdny? 95 Czy to ta 96 sama domena? 97 98

Miejsce na wyniki

99

100 101

102 103 104

W powyższym przykładzie zostało wykorzystanych kilka różnych funkcji pomocniczych. Poniżej każda z nich została opisana nieco bardziej szczegółowo. W wierszu 25. zostało umieszczone wywołanie funkcji parseUrl(). Jej przeznaczeniem jest ułatwienie odczytu różnych elementów adresu URL. Funkcja ta zwraca obiekt. W tym przykładzie obiekt ten jest przekształcany do postaci łańcucha znaków zapisanego w formacie JSON, przy czym, w celu poprawienia przejrzystości wyników, po każdym przecinku jest dodawany znak nowego wiersza. Funkcja parseUrl() zwraca informacje przedstawione w tabeli 9.3.

Receptura: Korzystanie z funkcji pomocniczych jQuery Mobile Tabela 9.3. WäaĈciwoĈci obiektu zwracanego przez funkcjö parseUrl()

Nazwa wäaĈciwoĈci

Opis

hash

Fragment adresu URL poprzedzony znakiem #.

host

Nazwa hosta oraz numer portu podane w adresie URL.

hostname

Nazwa hosta podana w adresie URL, wraz z prefiksem i koþcówkñ.

href

Oryginalna wartoĈè przekazana do funkcji jako adres URL.

pathname

ćcieĔka do pliku lub katalogu przekazana jako adres URL.

port

Numer portu podany w adresie URL. JeĈli numer ten nie zostaä podany, to wäaĈciwoĈè bödzie pusta.

protocol

Protokóä okreĈlony w adresie URL.

search

ãaþcuch zapytania podany w adresie URL, zawiera poczñtkowy znak ?.

authority

Nazwa uĔytkownika, hasäo oraz nazwa hosta podane w adresie URL.

directory

Podobna do wäaĈciwoĈci pathname, lecz zawiera wyäñcznie katalogi podane w adresie URL.

domain

Te same informacje co wäaĈciwoĈè authority, uzupeänione o nazwö protokoäu oraz numer portu.

filename

Nazwa Ĕñdanego pliku podana w adresie URL.

hrefNoHash

Oryginalny adres URL bez fragmentu podanego po znaku #.

hrefNoSearch

Oryginalny adres URL bez fragmentu podanego po znaku ?.

password

Hasäo przekazane w adresie URL.

username

Nazwa uĔytkownika przekazana w adresie URL.

W wierszach 33. – 36. zostało umieszczone wywołanie funkcji makeAbsolutePath(). Jeśli dysponujemy względną ścieżką dostępu — samą nazwą pliku, katalogu bądź ich kombinacją, która ewentualnie może się także zaczynać od symbolu ../ — to ta funkcja pozwala połączyć je ze ścieżką bezwzględną w celu wygenerowania ścieżki bezwzględnej. Podobnie działa kod umieszczony w wierszach 42. – 45., choć umieszczone w nich wywołanie funkcji makeUrlAbsolute() generuje bezwzględny adres URL. Wywołanie funkcji isAbsoluteUrl() umieszczone w wierszach 51. – 53. pozwala sprawdzić, czy podany adres URL jest bezwzględny. Wiersze 59. – 61. zawierają wywołanie funkcji isRelativeUrl(), która sprawdza, czy podany adres jest względny. W wierszach 67. – 70. zostało umieszczone wywołanie funkcji isSameDomain(), która sprawdza, czy dwa podane adresy URL odwołują się do tej samej domeny. Funkcja ta jest bardzo przydatna, kiedy trzeba sprawdzić, czy można skorzystać z technologii AJAX, by odwołać się do danego zasobu. Funkcja ta porównuje protokoły oraz nazwy domen dwóch przekazanych adresów URL i na ich podstawie określa, czy odwołują się one do tej samej domeny. Funkcja sprawdza także nazwy domen podrzędnych. Oznacza to, że jeśli użyjemy jej do porównania adresów http://foo.bar.com/foo oraz http://www.bar.com/foo, to zwróci ona wartość false.

259

260

Rozdziaä 9. Nawigacja przy uĔyciu jQuery Mobile

Podsumowanie Ten rozdział rozpoczął się od prostego przedstawienia biblioteki jQuery Mobile. Ta część jQuery różni się od bibliotek jQuery Core oraz jQuery UI. Wymaga ona zmiany używanego kodu HTML i nadania mu takiej postaci, którą można łatwo przetwarzać przy użyciu platformy napisanej w języku JavaScript. Po wprowadzeniu przedstawione zostały podstawowe mechanizmy poruszania się po stronach, w tym także animacje przejść oraz niewidoczne dla programistów wykorzystanie żądań asynchronicznych wykonywanych przy użyciu technologii AJAX. Następnie zostały opisane podstawowe elementy stron, takie jak nagłówki i stopki. Przedstawiono także kilka opcji pozwalających na modyfikację sposobu działania tych nagłówków i stopek. Można je wyświetlać w określonym, niezmiennym miejscu, a nawet nie pozwalać na ich ukrywanie podczas przechodzenia na inne strony. W dowolnym momencie można także je ukryć. W końcowej części rozdziału przedstawione zostały sposoby pisania własnych skryptów JavaScript korzystających z możliwości jQuery Mobile i modyfikujących jej działanie.

10 Obsługa interakcji przy użyciu jQuery Mobile T

en rozdział bazuje na informacjach zamieszczonych w rozdziale 9., „Nawigacja przy użyciu jQuery Mobile”, i przedstawia komponenty służące do interakcji z użytkownikami, umieszczane na stronach WWW przeznaczonych dla urządzeń mobilnych. Na początku rozdziału zostaną przedstawione paski narzędzi, sygnały ostrzegawcze oraz paski nawigacyjne. W dalszej części zostaną natomiast opisane elementy zwijane służące do ukrywania całych fragmentów treści. Można tu także znaleźć obszerne informacje dotyczące wsparcia dla elementów formularzy języka HTML5, jakie zapewnia biblioteka jQuery Mobile. Na samym końcu rozdziału zostały opisane różne rodzaje elementów list.

Receptura: WyĈwietlanie pasków narzödzi w treĈci strony W poprzednim rozdziale zostały przedstawione podstawowe możliwości poruszania się po stronach, jakie udostępnia biblioteka jQuery Mobile. W jej skład wchodzą nagłówki, stopki oraz okna dialogowe. Oprócz nagłówków i stopek można także tworzyć elementy przypominające paski narzędzi, które są umieszczane bezpośrednio w zawartości strony. Paski narzędzi są zazwyczaj używane do określania układu oraz formatowania; doskonale nadają się do wprowadzania przerw w treści strony oraz do grupowania zawartości. Listing 10.1 przedstawia przykład paska narzędzi umieszczonego wewnątrz elementu div z zawartością strony. Listing 10.1. Dodawanie paska narzędzi w elemencie z zawartoĈciñ strony 00 01 02 03 04
262

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

content="width=device-width, initial-scale=1">

Ukïad poziomego paska

OdnoĂnik do zewnÚtrznego pliku

Jestem jedynie elementem div z odpowiednimi klasami oraz przyciskiem

Pasek został zdefiniowany w wierszach 26. – 29. Jak widać, tworzenie takiego paska nie wymaga użycia żadnego kodu JavaScript, odpowiadają za nie wyłącznie klasy CSS. Klasa ui-bar odpowiada za kształt paska oraz wielkość czcionki. Z kolei klasa ui-bar-b określa używany zestaw kolorów, który można zdefiniować przy użyciu narzędzia ThemeRoller, opisanego w rozdziale 8., „Zmiany wyglądu”. W przypadku gdy w pasku umieszczono więcej tekstu, niż może się zmieścić w jednym wierszu, przeglądarka przeniesie część tego tekstu oraz innych elementów do kolejnego wiersza bądź też pominie nadmiarową zawartość paska. (Miejmy nadzieję, że producent zabawek, firma Mattel, nie pozwie twórców jQuery za naruszenie znaku towarowego, za które można uznać użycie nazwy klasy kończącej się na bar-b1).

1

„Bar-b” wymawia się po angielsku jako „bar-bi” — przyp. tłum.

Receptura: WyĈwietlanie paska ostrzeĔenia

Receptura: WyĈwietlanie paska ostrzeĔenia Kolejnym sposobem wyświetlenia niestandardowego paska na stronie jest dodanie go na samej górze, powyżej nagłówka. Listing 10.2 wyświetla na stronie pasek ostrzeżenia prezentowany przy użyciu żółtego schematu kolorów i zawierający przycisk pozwalający na jego ukrycie. Listing 10.2. Dodawanie i usuwanie Ĕóätego paska narzödzi w celu ostrzeĔenia uĔytkownika 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Ostrzeĝenie: moĝna kliknÈÊ "x", by ukryÊ ostrzeĝenie.

Usuñ

Strona z ostrzeĝeniem.

ZawartoĂÊ strony.

263

264

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Wiersze 25. – 30. zawierają kod HTML, który dodaje dodatkowy nagłówek na samej górze strony. W wierszach 15. – 19. został natomiast umieszczony kod JavaScript, który pozwala ukryć pasek ostrzeżenia, gdy użytkownik kliknie wyświetlany na nim przycisk Usuń. Na urządzeniach wyposażonych w mniejszy ekran będzie można zauważyć, że tekst zostanie przycięty, a zamiast jego końcowej części zostaną wyświetlone trzy kropki. Pozwala to użytkownikowi zorientować się, że tekstu jest więcej, niż widać na stronie. Po obróceniu urządzenia tekst zostanie wyświetlony w dodatkowym, wolnym obszarze. Trzeba pamiętać, że zdarzenia document.ready() należy używać ostrożnie: jeśli przykładowa strona nie zostanie wyświetlona bezpośrednio, lecz wczytana przy użyciu technologii AJAX z poziomu innej strony, to przeglądarka nie wykona takiego kodu. W takich przypadkach lepszym rozwiązaniem będzie dodanie elementu script w ciele strony i skojarzenie procedury obsługi ze zdarzeniem pageinit.

Receptura: Dodawanie pasków menu do stopek Stopki w przykładach z rozdziału 9. były zazwyczaj pojemnikami na tekst, służącymi zwykle do umieszczania informacji o prawach autorskich. Jednak dzięki interaktywnym komponentom przedstawionym w tym rozdziale stopki mogą się stać znacznie bardziej użytecznymi elementami. Listing 10.3 pokazuje, w jaki sposób dodać do stopki menu. Listing 10.3. Dodawanie menu do stopki 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Menu w stopce

Receptura: Poruszanie siö po stronach przy uĔyciu paska nawigacyjnego 25

TreĂÊ strony

26

27 28

29 Wybierz 30 31 Jeden 32 Dwa 33 Trzy 34 35

36 37

38 39 40 41

Jak pokazuje kod umieszczony w wierszach 29. – 34., to w zasadzie nie jest menu, lecz element select. Można skorzystać ze zdarzenia change, by skojarzyć z tym menu kod, który będzie wykonywany, gdy użytkownik wybierze inną opcję.

Receptura: Poruszanie siö po stronach przy uĔyciu paska nawigacyjnego Zamiast walczyć z elementami formularzy oraz własnym kodem JavaScript, można także skorzystać z pasków nawigacyjnych, przeznaczonych do wykonywania konkretnych operacji. Listing 10.4 pokazuje, w jaki sposób można dodać taki pasek nawigacyjny bezpośrednio poniżej nagłówka strony. A w zasadzie, precyzyjnie rzecz ujmując, wewnątrz nagłówka. Listing 10.4. Dodawanie paska nawigacyjnego z trzema przyciskami 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16



265

266

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

Pasek nawigacyjny - przykïad 1.

• Pierwszy
• Drugi
• Trzeci

TreĂÊ strony.

Wiersze 23. – 29. zawierają element div, który zostanie przekształcony w pasek nawigacyjny. Wewnątrz niego umieszczona jest lista wypunktowana, której elementy staną się zawartością paska nawigacyjnego. W razie potrzeby pasek nawigacyjny może mieć kilka wierszy, co pokazuje przykład przedstawiony na listingu 10.5. Listing 10.5. WyĈwietlanie wielu wierszy w pasku nawigacyjnym 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

Pasek nawigacyjny - przykïad 2.

Receptura: Poruszanie siö po stronach przy uĔyciu paska nawigacyjnego 22

23

24

Wybierz jednÈ z poniĝszych opcji:

25

26

27

28
• Pierwsza
29
• Druga
30
• Trzecia
31
• Czwarta
32
• PiÈta
33
• Szósta
34

35

36 37 38

39 40 41 42

Na podstawie kodu umieszczonego w wierszach 28. – 33. można się przekonać, że pasek nawigacyjny zostanie wyświetlony w kilku wierszach. Jeśli jednak usuniemy choć jeden element listy i ponownie wyświetlimy stronę, to okaże się, że pasek menu będzie wyświetlony w jednym wierszu. Dodanie każdego kolejnego elementu sprawi, że jQuery Mobile będzie musiała dzielić zawartość paska na wiersze. Istnieje także możliwość dodawania ikon do przycisków wyświetlanych na pasku nawigacyjnym. Takie rozwiązanie przedstawia przykład z listingu 10.6. Listing 10.6. WyĈwietlanie ikon na pasku nawigacyjnym 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

267

268

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 21

Pasek nawigacyjny - przykïad 3.

22 23

24

25
• 26 Pierwszy
27
• 28 Drugi
29
• 30 Trzeci
31

32

33

34

35

TreĂÊ strony.

36

37 38

39 40 41 42

Widoczny w wierszu 23. atrybut data-iconpos określa, gdzie mają być umieszczane ikony. W tym przykładzie są one wyświetlane ponad tekstem. Równie dobrze można je jednak wyświetlać z lewej lub z prawej strony tekstu. Domyślnie ikony są wyświetlane z lewej strony, jednak ustawienie to można zmienić, korzystając z następujących atrybutów: data-iconpos="right", data-iconpos="top", data-iconpos="bottom" oraz data-iconpos="notext". Użycie wartości notext powoduje usunięcie tekstu z przycisków i wyświetlenie samych ikon. W wierszach 25., 27. oraz 29. zostały podane klasy ikon, należące do listy domyślnych ikon jQuery Mobile. Aby skorzystać z własnych ikon, należy zdefiniować odpowiednie klasy CSS, podobne do tych stosowanych przez jQuery Mobile.

Receptura: WyĈwietlanie i ukrywanie treĈci przy uĔyciu elementów zwijanych Biblioteka jQuery Mobile udostępnia komponent pozwalający na wyświetlanie i ukrywanie elementu div umieszczonego poniżej nagłówka. W swojej najprostszej postaci komponent ten działa niezależnie od innych komponentów umieszczonych na stronie. Jeśli informacja ta przypomniała czytelnikowi o akordeonach — komponentach accordion — opisanych w rozdziale 7., „Interakcja z widżetami”, to więcej informacji na ich temat można znaleźć w następnej recepturze. Listing 10.7 przedstawia niezależne komponenty collapsible.

Receptura: WyĈwietlanie i ukrywanie treĈci przy uĔyciu elementów zwijanych Listing 10.7. Ukrywanie i wyĈwietlanie wielu grup korzystajñcych z róĔnych schematów kolorystycznych 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Elementy zwijane

Dotknij, by zwinąć lub rozwinąć

Ukryta treść, umieszczona w elemencie zwijanym.

Dotknij, by zwinÈÊ lub rozwinÈÊ

Ukryta treĂÊ, umieszczona w elemencie zwijanym.

Dotknij, by zwinÈÊ lub rozwinÈÊ

Ukryta treĂÊ, umieszczona w elemencie zwijanym.

Pierwszy przykład komponentu collapsible został umieszczony w wierszach 26. – 29. Korzysta on z domyślnego schematu kolorów. Zawartość elementu h3 staje się tytułem komponentu. Dowolna zawartość umieszczona poniżej tego nagłówka zostanie ukryta po kliknięciu komponentu.

269

270

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Komponent collapsible umieszczony w wierszu 31. używa jednego ze schematów kolorów zdefiniowanych przy użyciu narzędzia ThemeRoller. W wierszach 36. oraz 37. zostały użyte dwa różne zestawy kolorów: jeden dla tytułu, a drugi dla zawartości komponentu.

Receptura: Symulacja akordeonu poprzez uĔycie zbioru elementów zwijanych O komponencie accordion wspomniano już w poprzedniej recepturze. Jeśli połączymy kilka elementów zwijanych w jedną grupę, to w efekcie uzyskamy komponent accordion. Różnica w stosunku do poprzedniego przykładu polega na tym, że poszczególne komponenty collapsible umieszczone w takiej grupie nie działają już niezależnie od siebie. Kiedy jeden z nich zostanie rozwinięty, to ten, który do tej pory był widoczny w całości, zostanie zwinięty. W takiej grupie w danej chwili może być rozwinięty tylko jeden komponent. Sposób takiego grupowania komponentów collapsible został przedstawiony na listingu 10.8. Listing 10.8. Grupowanie elementów zwijanych 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Grupowanie elementów zwijanych

Dotknij, by zwinÈÊ lub rozwinÈÊ

Receptura: Pobieranie prostych danych tekstowych przy wykorzystaniu pól formularzy 31

Ukryta treĂÊ, umieszczona w elemencie zwijanym.

32

33 34

35

Dotknij, by zwinÈÊ lub rozwinÈÊ

36

Ukryta treĂÊ, umieszczona w elemencie zwijanym.

37

38 39

41

Dotknij, by zwinÈÊ lub rozwinÈÊ

42

Ukryta treĂÊ, umieszczona w elemencie zwijanym.

43

44 45

46 47

48 49 50

Komponenty collapsible umieszczone w jednej grupie są niemal takie same jak niezależne komponenty przedstawione w poprzedniej recepturze. Podstawowa różnica pomiędzy nimi polega na tym, że w tym przykładzie zostały one umieszczone w elemencie div z atrybutem data-role o wartości collapsible-set. Kolejna różnica polega na tym, że w tym przypadku istnieje możliwość określenia tematu oraz tematu zawartości dla wszystkich komponentów collapsible w grupie, co zapobiega powielaniu tego samego kodu. Jak pokazuje kod umieszczony w wierszach 39. oraz 40., te grupowe ustawienia można przesłonić w poszczególnych komponentach.

Receptura: Pobieranie prostych danych tekstowych przy wykorzystaniu pól formularzy Język HTML udostępnia kilka rodzaju pól służących do wpisywania danych. Biblioteka jQuery Mobile potrafi odnajdywać te pola w kodzie strony i zmieniać ich wygląd. Modyfikacje te zapewniają, że przechodzenie do poszczególnych pól nie przysporzy problemów, a wyświetlany w nich tekst będzie dostatecznie duży, by można go było łatwo przeczytać na urządzeniu mobilnych. Listing 10.9. WyĈwietlanie pól do wprowadzania tekstu 00 01 02 03 04 06

271

272

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

Pola tekstowe

Podstawy

Pole tekstowe

Miejsce na tekst

Wielowierszowe pole tekstowe

Przykłady umieszczone w wierszach 29. – 32. oraz 33. – 38. przedstawiają zastosowanie pól tekstowych. Podstawowa różnica pomiędzy nimi polega na położeniu i widoczności etykiety. W pierwszym przykładzie etykieta jest umieszczona poza polem, a jej treść będzie widoczna nawet po jego wypełnieniu. W drugim przykładzie, z powodu użycia klasy ui-hidden-accessible oraz atrybutu placeholder, tekst etykiety jest ukrywany. Ten tekst zastępczy jest wyświetlany wewnątrz pola tekstowego, kiedy jest ono puste. Dzięki temu użytkownik może się zorientować, jakie jest przeznaczenie danego pola. Kiedy użytkownik zacznie wpisywać coś w polu, umieszczony w nim wcześniej tekst znika. W większości przypadków użytkownik i tak będzie wiedział, do czego służy dane pole, na podstawie wpisanych w nim informacji.

Receptura: Wprowadzanie dat

W przypadku pytań nieco trudniejszych niż standardowy adres lub numer telefonu warto jednak używać zwyczajnej etykiety zamiast tekstu zastępczego wyświetlanego w samym polu. Kod umieszczony w wierszach 39. – 42. pokazuje, w jaki sposób można utworzyć wielowierszowe pole tekstowe.

Uwaga KaĔda para skäadajñca siö z etykiety oraz elementu pola tekstowego jest umieszczana w odröbnym elemencie div z atrybutem data-role="fieldcontain". jQuery Mobile uĔywa tych elementów div do okreĈlania odpowiedniego wyrównania pól oraz etykiet.

Receptura: Wprowadzanie dat W rozdziale 7. został przedstawiony komponent kalendarza. W języku HTML 4 nie było dostępnych żadnych elementów formularzy umożliwiających użytkownikom wygodne wprowadzanie dat. Twórcy witryn zazwyczaj mogli udostępnić jedno pole tekstowe i narzucić odpowiedni format zapisu daty, udostępnić trzy pola (mogły to też być rozwijane listy) bądź też użyć komponentu kalendarza generowanego przy użyciu języka JavaScript. Język HTML5 wprowadza jednak nowe elementy formularzy, dzięki którym przeglądarki mogą udostępnić rodzime kontrolki ułatwiające użytkownikom wprowadzanie danych. Doskonałym przykładem takich nowych pól formularzy jest kontrolka do wyboru daty. Te nowe sposoby wprowadzania danych zostały szybciej zaimplementowane w przeglądarkach mobilnych niż w ich standardowych odpowiednikach. Wiele platform udostępnia już takie pola służące do wygodnego wyboru dat. Listing 10.10 przedstawia pola kalendarzy. Listing 10.10. Stosowanie pól kalendarzy 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

273

274

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 19 20

21

Pola kalendarzy

22

23 24

25 26

27 28

Kalendarz

29

30 Godzina 31 32

33

34 Data 35 36

37

38 MiesiÈc 39 40

41

42 Tydzieñ 43 44

45

46 Data i godzina 47 48

49

50 Lokalna data i godzina 51 52

53

54

55 56 57

Wiersze 29. – 32. zawierają pole służące do wpisywania godziny. Szczególną uwagę należy zwrócić na atrybut type="time" umieszczony w wierszu 31. Jest on elementem języka HTML5 — można go używać niezależnie od jQuery Mobile. W przypadku platform, które nie obsługują języka HTML5, jQuery Mobile może sprawić, że pola z atrybutami takimi jak: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url oraz week będą zastępowane zwyczajnymi polami tekstowymi (elementami input z atrybutem type="text") zmodyfikowanymi przy użyciu skryptów JavaScript. Zawsze gdy to tylko możliwe warto jednak stosować komponenty rodzime. Wiersze 33. – 52. zawierają pola tekstowe służące do wyboru daty (date), miesiąca (month), tygodnia (week), daty i godziny (datetime) oraz daty i godziny zapisywanej zgodnie z ustawieniami lokalnymi (datetime-local). Warto przetestować ten przykład na kilku urządzeniach mobilnych i sprawdzić, jakie wyniki uzyskamy na każdym z nich.

Receptura: WyĈwietlanie pól formularzy przy wykorzystaniu alternatywnych klawiatur

Na przykład, pola formularzy wyświetlane na iPhonach oraz iPadach będą wygodniejsze w użyciu niż te wyświetlane w przeglądarce Safari na komputerach mac.

Receptura: WyĈwietlanie pól formularzy przy wykorzystaniu alternatywnych klawiatur Pola kalendarzy wymagają całkowicie odrębnego komponentu do wprowadzania danych. Są jednak także pola, które wyglądają jak zwyczajne pola tekstowe, lecz mają inne wymagania. Urządzenia mobilne z klawiaturami ekranowymi dysponują ograniczoną przestrzenią ekranu, w której mogą wyświetlać klawiaturę. Dlatego też, w odróżnieniu od zwyczajnej klawiatury, wyświetlają one tylko zbiór wybranych klawiszy, a inne należy wybierać z podmenu. W przypadku wpisywania danych o specyficznej, konkretnej postaci, takich jak numery telefonów, adresy poczty elektronicznej lub adresy URL, wypełnienie całego pola może wymagać wielokrotnej zmiany wyglądu klawiatury. Na szczęście, urządzenia mobilne udostępniają kilka wyspecjalizowanych wariantów klawiatur, przeznaczonych do wpisywania numerów telefonów, adresów poczty elektronicznej lub adresów URL. Przykład przedstawiony na listingu 10.11 pozwala wyświetlać te różne klawiatury. Listing 10.11. Korzystanie z wyspecjalizowanych klawiatur 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Klawiatury

275

276

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 28

29 Liczba 30 31

32

33 Adres e-mail 34 35

36

37 Adres URL 38 39

40

41 Numer telefonu 42 43

44 45

46

47 48 49

Pole tekstowe umieszczone w wierszach 28. – 31. służy do wprowadzania liczb. Warto zwrócić uwagę, że to nie to samo co wpisywanie numeru telefonu. Sposób implementacji tego pola zależy od konkretnego urządzenia. W przypadku systemu iOS bezpośrednio wyświetlana jest klawiatura numeryczna, którą zazwyczaj można wyświetlić, naciskając odpowiedni przycisk na zwyczajnej klawiaturze. W wierszach 32. – 35. oraz 36. – 39. zostały umieszczone pola służące do podania adresów poczty elektronicznej oraz adresów URL. Klawiatury wyświetlane podczas wypełniania tych pól stanowią wersję zwyczajnej klawiatury „qwerty”, do której dodano wybrane znaki, takie jak @ lub /. Pole umieszczone w wierszach 40. – 43. służy do podawania numeru telefonu. W systemie iOS kliknięcie takiego pola spowoduje wyświetlenie tej samej klawiatury, która jest używana podczas wybierania numeru telefonu. Szczególną uwagę należy zwrócić na atrybuty type zastosowane w elementach input. Są to wszystko standardowe typy pól tekstowych języka HTML5, których jQuery Mobile inteligentnie używa do wyboru odpowiednich stylów i określania spójnego sposobu prezentacji na różnych urządzeniach.

Receptura: WyĈwietlanie wyspecjalizowanych rodzajów pól formularzy Oprócz wyspecjalizowanych pól skojarzonych z odrębnymi klawiaturami istnieją także pola posiadające charakterystyczny wygląd oraz sposób działania. Listing 10.12 przedstawia pola do wyszukiwania, wpisywania hasła oraz wyboru koloru.

Receptura: WyĈwietlanie wyspecjalizowanych rodzajów pól formularzy Listing 10.12. WyĈwietlanie pól do wyszukiwania, wpisywania hasäa oraz wyboru koloru 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

Inne rodzaje pól

Hasïo

Wyszukiwanie

Kolor

Pole służące do wprowadzania hasła, umieszczone w wierszach 28. – 31., nie wymaga stosowania żadnej specjalnej klawiatury. Ważne jest natomiast to, by hasło nie było widoczne na ekranie, dlatego też zmieniony został sposób jego prezentacji. W zależności od preferencji użytkownika ukrywane może być całe hasło bądź też widoczne będą jedynie pojedyncze wpisywane znaki.

277

278

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Pole tekstowe służące do wyszukiwania, umieszczone w wierszach 32. – 35., może wyglądać nieco inaczej niż zwyczajne pola tekstowe. W systemie iOS pole to ma zaokrąglone wierzchołki oraz ikonę szkła powiększającego z lewej strony. Oprócz odmiennego wyglądu, przeglądarka może także odnajdywać pola tego typu i integrować je ze swoim paskiem narzędzi. Jak na razie taki sposób działania nie jest jeszcze stosowany standardowo. I w końcu ostatnie z prezentowanych pól, pole do wyboru koloru umieszczone w wierszach 36. – 39., może pozwalać na wyświetlenie całkowicie odmiennego komponentu do wprowadzania danych. W systemie iOS pole tego typu niczym się nie różni od zwyczajnego pola tekstowego. Sytuacja ta może się jednak zmienić w przyszłości, kiedy pola do wyboru koloru staną się bardziej popularne.

Receptura: Wprowadzanie liczb caäkowitych przy uĔyciu suwaków Wpisywanie liczb całkowitych może wymagać zastosowania zupełnie innych elementów sterujących niż wprowadzanie tekstu. Na przykład, można w tym celu używać suwaków. Przykład takiego zastosowania suwaka został przedstawiony na listingu 10.13. Listing 10.13. UĔycie suwaka w celu wprowadzania liczb caäkowitych 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Zakres

Suwak

Receptura: Ustawianie wartoĈci binarnych przy uĔyciu przeäñczników 30 32

33 34

35

36 37 38

W wierszach 28. – 32. zostało umieszczone pole typu range. Za wyświetlanie tego pola w formie suwaka odpowiada sama przeglądarka bądź też biblioteka jQuery Mobile. Może się także zdarzyć, że będzie ono zaimplementowane w odmienny sposób. W przypadku suwaków bardzo ważne jest określenie wartości minimalnej i maksymalnej. W przypadku podawania wartości o nieskończonym zakresie znacznie lepszym rozwiązaniem będzie użycie zwyczajnego pola tekstowego. Użytkownicy jQuery Mobile 1.0 korzystający także z jQuery 1.7.1 mogą zauważyć, że suwaki nie działają, gdy są obsługiwane myszką w tradycyjnych przeglądarkach. Problem ten można rozwiązać poprzez wykorzystanie biblioteki jQuery Mobile 1.1 lub jQuery 1.6.4.

Receptura: Ustawianie wartoĈci binarnych przy uĔyciu przeäñczników Wiele formularzy zawiera pola służące do wyboru jednej z dwóch wartości. Czasami są to odpowiedzi typu „tak” lub „nie”, „włącz” lub „wyłącz”, „kobieta” lub „mężczyzna” i tak dalej. W takich przypadkach można zastosować dwa przyciski opcji, jedno pole wyboru lub rozwijaną listę z dwiema opcjami. Jednak w niektórych przypadkach znacznie wygodniejszym rozwiązaniem będzie wyświetlenie pola przypominającego przesuwany przełącznik, który może być włączony lub wyłączony. W systemie iOS pole to przypomina przełączniki dostępne w ustawieniach telefonu. Listing 10.14 pokazuje, w jaki sposób można je tworzyć przy użyciu biblioteki jQuery Mobile. Listing 10.14. WyĈwietlanie listy jako przeäñcznika 00 01 02 03 04 06 08 11

PrzeïÈcznik

PrzeïÈcznik wï. wyï.

Kod umieszczony w wierszach 28. – 34. pokazuje, że w celu utworzenia przełącznika należy zastosować zwyczajny element select języka HTML. Kiedy jQuery Mobile zainicjuje widżet, ze użytego elementu select nie pozostanie niemal nic. Jednak w przypadku gdy biblioteka jQuery Mobile nie będzie dostępna, zastosowanie rozwijanej listy umożliwi bezproblemowe korzystanie ze strony.

Receptura: Wybór jednego elementu przy uĔyciu przycisków opcji Prawdopodobnie każdy spotkał się z przyciskami opcji stosowanymi w formularzach na stronach WWW. Można ich także używać na urządzeniach mobilnych. Dzięki wykorzystaniu jQuery Mobile mogą one uzyskać atrakcyjny wygląd i zapewnić wygodę użytkowania. Listing 10.15 przedstawia grupę przycisków opcji wyświetloną w układzie pionowym i poziomym. Listing 10.15. WyĈwietlanie pionowych i poziomych grup przycisków opcji 00 01 02

Receptura: Wybór jednego elementu przy uĔyciu przycisków opcji 03 04 06 08 11 14 15 16 17 18

19 20

21

Przyciski opcji

22

23 24

25 26

27 28

29

30 31

Wybierz opcjÚ:

32 33 35 pierwszÈ 36 37 39 drugÈ 40 41 43 trzeciÈ 44 45

46 47

48 49

Opcje w poziomie:

50 51 53 pierwsza 54 55 57 druga 58 59

281

282

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 61 trzecia 62 63

64 65

66 67

68

69 70 71

Wiersze 29. – 45. zawierają grupę przycisków opcji wyświetloną w układzie pionowym. Wyglądają one podobnie do zwyczajnych przycisków opcji, których wygląd został trochę zmodyfikowany przy użyciu stylów. Wszystkie przyciski opcji należące do grupy są umieszczone wewnątrz elementu fieldset. To dobra praktyka związana z tworzeniem kodu HTML, którą warto stosować niezależnie od używania biblioteki jQuery Mobile. Dzięki dodaniu atrybutu data-role="controlgroup" przyciski opcji są wyświetlane jako jedna grupa z zaokrąglonymi wierzchołkami. W wierszu 47. rozpoczyna się druga grupa przycisków opcji, w której użyty został atrybut data-type="horizontal". W tym przypadku uzyskany efekt jest całkowicie odmienny. Po wyświetleniu te przyciski opcji przypominają zwyczajne przyciski. Jednak kiedy zaczniemy je klikać, zauważymy, że działają one jak przyciski opcji — w danej chwili będzie mógł być zaznaczony tylko jeden z nich.

Receptura: Wybieranie wielu elementów przy uĔyciu pól wyboru Poprzednia receptura pokazała, w jaki sposób można użyć jQuery Mobile do określenia postaci grupy przycisków opcji. Dokładnie w taki sam sposób można określać wygląd pól wyboru, co pokazuje przykład przedstawiony na listingu 10.16. Listing 10.16. WyĈwietlanie grupy pól wyboru w ukäadzie pionowym i poziomym 00 01 02 03 04 06 08 11 14

Receptura: Wybieranie wielu elementów przy uĔyciu pól wyboru 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

Pola wyboru

Zaznacz wybrane pola:

pierwsze drugie trzecie

Pola wyboru w ukïadzie poziomym:

pierwsze drugie trzecie

283

284

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Kod umieszczony w wierszach 29. – 45. przypomina pola z poprzedniej receptury, choć w tym przypadku są to pola wyboru, a nie przyciski opcji. Za wizualne zgrupowanie i określenie postaci pól wyboru odpowiada atrybut data-role="controlgroup". W wierszu 47. rozpoczyna się dokładnie taka sama struktura pól, przy czym dodano do niej atrybut data-type="horizontal". W efekcie pola wyboru wyświetlane na stronie wyglądają jak zwyczajne przyciski, choć zachowują się jak pola wyboru — można zaznaczyć dowolną ich kombinację.

Receptura: Wybieranie elementów z rozwijanej listy Ostatnim standardowym polem formularzy, któremu warto poświęcić nieco uwagi, jest element select. Wcześniej przedstawiony został przykład umieszczania takiego elementu w stopce w celu utworzenia rozwijanego menu. Oczywiście, elementy select można także umieszczać w treści stron. W przypadkach gdy nie jest dostępny rodzimy komponent listy, jQuery Mobile zapewni, że standardowa lista rozwijana uzyska atrakcyjny wygląd i będzie wygodna w obsłudze. Listing 10.17 przedstawia przykład jednego niezależnego elementu select oraz dwóch takich elementów umieszczonych w grupie. Listing 10.17. RóĔne rodzaje list rozwijanych 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Listy rozwijane

Receptura: Wybieranie elementów z rozwijanej listy 28

29 30 Lista 31 32 Opcja pierwsza 33 druga 34 i trzecia 35 36 37

38 39

40 41 42 jeden 43 dwa 44 trzy 45 46 47 jeden 48 dwa 49 trzy 50 51 52 jeden 53 dwa 54 trzy 55 56

57 58

59 60 61 jeden 62 dwa 63 trzy 64 65 66 jeden 67 dwa 68 trzy 69 70 71 jeden 72 dwa 73 trzy 74 75

76 77 78

79

80 81 82

285

286

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Niezależna lista umieszczona w wierszach 28. – 35. jest stosunkowo prosta. Jest to zwyczajny element select, do którego dodano etykietę i umieszczono w elemencie div z atrybutem data-role="fieldcontain". Atrybut ten umożliwia bibliotece jQuery Mobile określenie odpowiedniego położenia etykiet i pól na ekranie. W wierszu 39. rozpoczyna się grupa elementów select, umieszczonych wewnątrz elementu fieldset z atrybutem data-role="controlgroup". W efekcie na stronie wyświetlana jest grupa pól mająca zaokrąglone wierzchołki. Podobnie, w wierszu 58. tworzona jest grupa pól, która dzięki zastosowaniu atrybutu data-type="horizontal" jest wyświetlana w układzie poziomym. Jeśli czytelnik przetestował poprzednie receptury prezentujące grupy przycisków opcji i pól wyboru, to z pewnością rozpozna, że wyniki są bardzo podobne. Będzie to poziomy wiersz z trzema rozwijanymi listami, którego zewnętrzne wierzchołki będą zaokrąglone. W przypadku urządzeń z systemem iOS biblioteka jQuery Mobile w wersji 1.0 nie uwzględniała powiększania wykonywanego podczas wybierania opcji z list. Problem ten został rozwiązany w wersji 1.1 biblioteki, która wykonuje niewielkie powiększenie i usuwa je po wybraniu jednej z dostępnych opcji.

Receptura: WyĈwietlanie standardowych pól poprzez wyäñczenie jQuery Mobile Mogą się zdarzyć sytuacje, w których będziemy musieli użyć elementów formularzy o standardowej postaci, niezmienionej przez jQuery Mobile. W takich przypadkach bibliotekę można wyłączyć. Ewentualnie można także wyłączyć samo przetwarzanie elementów formularzy, gdyż pozostałe mechanizmy jQuery Mobile mogą się okazać przydatne. Listing 10.18 pokazuje, jak można wyłączyć przetwarzanie konkretnych elementów formularzy. Listing 10.18. Wyäñczanie jQuery Mobile 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16



Receptura: Wyświetlanie standardowych pól poprzez wyłączenie jQuery Mobile 17 18

19 20

21

Wyłączanie jQuery Mobile

22

23 24

25 26

27 28

Podstawy

29

30 Pole tekstowe 31 32

33

34 Lista 35 36 Opcja pierwsza 37 druga 38 i trzecia 39 40

41

42 43

Grupa pól wyboru:

44 45 47 Pierwsze 48 49 51 Drugie 52 53 55 Trzecie 56 57

58

59

60 61 62

W wierszach 31., 35., 46., 50. oraz 54. został umieszczony atrybut data-role="none". W efekcie pola wyświetlane w formularzu nie są modyfikowane przez jQuery Mobile i mają standardowy wygląd.

287

288

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Receptura: WyĈwietlanie list elementów jQuery zapewnia jednolity wygląd wszystkich elementów prezentowanych na stronach. Z punktu widzenia użytkownika zorientowanie się, czy prowadzimy interakcję z formularzem czy też z jakimś innym komponentem, może być trudne. jQuery Mobile udostępnia kilka różnych sposobów prezentacji list na urządzeniach mobilnych, które mają zapewnić, że korzystanie z nich będzie wygodne. Najprostsza postać listy została przedstawiona na listingu 10.19. Listing 10.19. WyĈwietlanie prostej listy 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Listy

Lista wypunktowana

• jeden
• dwa
• trzy

Lista uporzÈdkowana

1. jeden
2. dwa
3. trzy

Receptura: WyĈwietlanie list elementów

W wierszach 26. – 30. została zapisana lista wypunktowana, będąca najczęściej stosowanym rodzajem list. Jej zawartością jest jedynie tekst, więc ten komponent nie jest interaktywny. Oprócz tego, w wierszu 26. został użyty atrybut data-inset="true". Jego użycie sprawia, że wokół listy zostanie wyświetlony margines, a jej wierzchołki będą zaokrąglone. Warto ją porównać z listą uporządkowaną wyświetloną poniżej, by zobaczyć, na czym polegają różnice. W wierszach 33. – 37. została zapisana lista uporządkowana. Oprócz braku argumentu data-inset="true", poszczególnym elementom listy zostają przyporządkowane liczby. Ta numeracja elementów list uporządkowanych niczym się nie różni od standardowych list HTML. Język HTML pozwala na zagnieżdżanie list wypunktowanych i uporządkowanych w celu tworzenia struktur drzewiastych. Jednak w przypadku stosowania biblioteki jQuery Mobile sposób obsługi takich zagnieżdżonych list jest nieco inny; został on przedstawiony na listingu 10.20. Listing 10.20. Listy zagnieĔdĔone 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

Listy zagnieĝdĝone

• jeden
• dwa
• trzy
  1. jeden
  2. dwa
  3. trzy


289

290

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 35

36 37

38 39 40

W wierszach 25. – 35. została umieszczona lista wypunktowana oraz zagnieżdżona w niej lista uporządkowana. Oczywiście, nic nie stoi na przeszkodzie, by to lista wypunktowana została umieszczona wewnątrz listy uporządkowanej. Można by się spodziewać, że w efekcie na stronie zostanie wyświetlona struktura hierarchiczna składająca się z sześciu elementów. Jednak w rzeczywistości na stronie ujrzymy zwyczajną, trzyelementową listę wypunktowaną, przy czym jej trzeci element będzie zawierał strzałkę w prawo. Kliknięcie tego trzeciego elementu da efekt podobny do przejścia na nową stronę. Z technicznego punktu widzenia tak właśnie działa jQuery Mobile w przypadku korzystania z list zagnieżdżonych — są one prezentowane z wykorzystaniem nowej strony. Pojedyncze listy dają jednak jeszcze więcej możliwości, i to nawet bez korzystania z techniki zagnieżdżania lub wyświetlania nowych stron. Na przykład, aby w każdym elemencie listy wyświetlić dodatkowy przycisk, wystarczy skorzystać z rozwiązania przedstawionego na listingu 10.21. Listing 10.21. Podziaä listy na kolumny 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Podziaï listy na kolumny

Lista wypunktowana

• jedenPrzycisk
• dwaPrzycisk


Receptura: WyĈwietlanie list elementów 29
• trzyPrzycisk
30

31 32

33 34 35

Powyższy przykład różni się od listingu 10.20 pod dwoma względami. Przede wszystkim elementy listy nie są już statycznym tekstem, lecz przyciskami. Zaglądając do kodu HTML, można się przekonać, że w każdym elemencie listy zostały umieszczone dwa odnośniki. W celu przekształcenia drugiego odnośnika na ikonę, w elemencie ul (w wierszu 26.) został umieszczony atrybut data-split-icon="gear". Wartość gear można zastąpić nazwą dowolnej innej ikony należącej do standardowego zestawu ikon. Kiedy listy staną się nieco dłuższe, korzystanie z nich zacznie być nieco bardziej uciążliwe. W takich przypadkach, aby ułatwić użytkownikom korzystanie z list, można dodać do nich nagłówki umieszczane pomiędzy zwyczajnymi elementami. Samemu można zdecydować, co będą zawierały te nagłówki. Bezpiecznym domyślnym rozwiązaniem mogą być kolejne litery alfabetu, jednak równie dobrze mogą to być różne gatunki muzyki lub jeszcze inne grupy. Listing 10.22 przedstawia przykład alfabetycznego grupowania liczb. Listing 10.22. WyĈwietlanie nagäówków w listach 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Lista z nagïówkami

• C
• cztery


291

292

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 28
• czternaĂcie
29
• cztery tysiÈce
30
• D
31
• dwa
32
• dwadzieĂcia
33
• dwa miliony
34
• dziewiÚÊ
35
• dziewiÚÊdziesiÈt
36
• J
37
• jeden
38
• jedenaĂcie
39
• M
40
• milion
41
• O
42
• osiem
43
• osiemnaĂcie
44
• osiem milionów
45
• P
46
• piÚÊ
47
• piÚÊdziesiÈt piÚÊ
48
• S
49
• szeĂÊ
50
• T
51
• trzy
52
• trzydzieĂci
53
• trzy tysiÈce
54

55

56 57 58

Istnieje wiele powodów, które sprawiają, że ten przykład nie jest aż tak praktyczny, jak mógłby być w rzeczywistej aplikacji. Przede wszystkim, w tak krótkiej liście w ogóle można by nie używać żadnego grupowania. Ta lista miała jedynie przedstawić tę możliwość. W wierszu 26. został umieszczony specjalny element li z atrybutem data-role="listdivider". Atrybut ten powoduje użycie stylów, które sprawiają, że elementy nagłówka będą wyraźnie odróżniać się od pozostałych elementów listy. W wielu aplikacjach internetowych używane są drzewiaste struktury lub katalogi zawierające bardzo wiele elementów. Bardzo wygodne jest wyświetlanie w elementach nadrzędnych liczby umieszczonych w nich elementów podrzędnych; może to być na przykład liczba nieprzeczytanych wiadomości. Listing 10.23 pokazuje, w jaki sposób można dodawać do elementów list takie właśnie liczby. Listing 10.23. WyĈwietlanie liczby elementów 00 01 02 03 04

Receptura: WyĈwietlanie list elementów 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Listy z liczbami

• Jeden 238
• Dwa 23
• Trzy 38

W wierszach 26. – 28. zostały umieszczone elementy span z atrybutem class="ui-li-count". Jak widać, wyświetlanie takich liczb nie wymaga stosowania żadnego kodu JavaScript. Równie dobrze zamiast liczb można by tam umieścić jakiś tekst. Jednak lepiej unikać takich rozwiązań. Użytkownicy będą zazwyczaj oczekiwać, że w takich niewielkich elementach będą prezentowane liczby. W aplikacjach mobilnych o bardzo wizualnym charakterze można dodawać do elementów list niewielkie ikony. Są one nazywane miniaturkami (ang. thumbnail), a ich zastosowanie przedstawia listing 10.24. Listing 10.24. WyĈwietlanie miniaturek w elementach list 00 01 02 03 04 06 08 11 14

293

294

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

Listy z miniaturkami

• 

  Jeden

  Element pierwszy

• 

  Dwa

  Element drugi

• 

  Trzy

  Element trzeci

O ile tylko używane obrazki mają wymiary 80×80 pikseli, to wystarczy umieścić w elemencie listy zwyczajny element img. W wierszu 28. został przedstawiony zapis alternatywny, pozwalający na zastosowanie mniejszych obrazków, na przykład ikon o wymiarach 16×16 pikseli. Wystarczy dodać do elementu img klasę ui-li-icon. Jeśli nawet taka postać listy nie jest wystarczająca, to można dodawać do jej elementów jeszcze bardziej rozbudowany kod HTML. Taką listę przedstawia listing 10.25. Takie rozwiązanie jest szczególnie przydatne, jeśli chcemy umieścić w elemencie listy więcej informacji o treściach, do jakich można dotrzeć, wybierając dany element. Listing 10.25. Stosowanie sformatowanego tekstu w elementach list 00 01 02 03 04 06 08

Receptura: WyĈwietlanie list elementów 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

Stosowanie formatowania w elementach list

• Jeden

  Element pierwszy

  WiÚcej informacji na jego temat

  23 wyĂwietlenia

• Dwa

  Element drugi

  WiÚcej informacji na jego temat

  2 wyĂwietlenia

• Trzy

  Element trzeci

  WiÚcej informacji na jego temat

  3 wyĂwietlenia

Przykład rozbudowanego elementu listy został przedstawiony w wierszach 26. – 33. Element składa się z tytułu utworzonego przy użyciu elementu h3, podtytułu umieszczonego w elemencie strong oraz zwyczajnego akapitu. Oprócz nich w elemencie listy został umieszczony także element z atrybutem class o wartości ui-li-aside. Jego zawartość może być dowolna, pod warunkiem że będzie mała. W przedstawionym przykładzie jest to liczba, lecz równie dobrze może to być data, godzina lub informacja o statusie.

295

296

Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile

Receptura: Filtrowanie elementów list Wraz ze wzrostem liczby elementów listy coraz trudniejsze staje się odnalezienie na niej poszukiwanego elementu. W jednej z poprzednich receptur pokazany został sposób umieszczania nagłówków pomiędzy elementami listy. Takie rozwiązanie jest użyteczne jedynie do pewnej liczby elementów listy. Kiedy jednak lista stanie się zbyt duża, jQuery Mobile spieszy nam z pomocą, udostępniając element do filtrowania listy. Listing 10.26 pokazuje, jak łatwo można go stosować. Listing 10.26. Filtrowanie listy przy uĔyciu pola do wyszukiwania 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Filtrowanie zawartoĂci listy

• jeden
• dwa
• trzy
• cztery
• piÚÊ
• szeĂÊ
• siedem
• osiem
• dziewiÚÊ
• dziesiÚÊ

Receptura: Grupowanie elementów formularzy na listach

W wierszu 25. w elemencie ul został umieszczony dodatkowy atrybut data-filter="true". Powoduje on, że jQuery Mobile umieści na samym początku listy pole tekstowe. Kiedy zaczniemy wpisywać w nim tekst, zauważymy, że liczba elementów widocznych na liście szybko zacznie się zmniejszać.

Receptura: Grupowanie elementów formularzy na listach Do tej pory w rozdziale opisywane były elementy formularzy oraz elementy list. Istnieje także możliwość połączenia ich i wykorzystania list jako pojemników, w których są umieszczane elementy formularzy. Dzięki temu można łączyć elementy różnych typów w łatwo rozpoznawalne grupy o charakterystycznym wyglądzie. Listing 10.27 przedstawia prosty przykład takiego rozwiązania, zawierający trzy elementy formularzy. Listing 10.27. WyĈwietlanie elementów formularzy na listach 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

Listy i formularze

• Pole tekstowe
• Lista
  
  297
  
  298
  
  Rozdziaä 10. Obsäuga interakcji przy uĔyciu jQuery Mobile 35 Pierwszy 36 Drugi 37 Trzeci 38 39
40
• 41 Wielowierszowe pole tekstowe 42 43
44

45

46

47 48 49

Powyższy kod stanowi doskonałe połączenie wielu przykładów przedstawionych we wcześniejszych recepturach zamieszczonych w tym rozdziale. W podstawowych przykładach prezentujących elementy formularzy etykiety i pola były umieszczane w elementach div z atrybutem data-role="fieldcontain". W tym przykładzie atrybut ten został dodany do elementu listy. Jak widać, zarówno etykieta, jak i pole formularza zostały umieszczone wewnątrz elementu listy. Biblioteka jQuery Mobile zajmie się nadaniem odpowiedniego wyglądu wszystkich elementów. Na przykład, na urządzeniach z szerszym ekranem etykiety zostaną wyświetlone z lewej strony pól, natomiast na urządzeniach z mniejszym ekranem — nad tymi elementami.

Podsumowanie Zarówno HTML 4, jak i HTML5 udostępnia wiele możliwości prowadzenia interakcji z użytkownikami. Aby prowadzić taką interakcję na urządzeniach mobilnych, konieczny jest interfejs, którego będzie można łatwo używać na urządzeniach obsługiwanych dotykowo. jQuery Mobile ułatwia tworzenie kontrolek obsługiwanych dotykowo. Ten rozdział rozpoczął się od przedstawienia pasków narzędzi, pasków nawigacyjnych oraz elementów zwijanych. Następnie przedstawione zostały najczęściej stosowane elementy formularzy oraz sposoby korzystania z nich na urządzeniach dotykowych. W końcowej części rozdziału przedstawionych zostało wiele rodzajów elementów list, zarówno wypunktowanych, jak i uporządkowanych. Przedstawione zostały także listy zagnieżdżone, listy zawierające specjalny kod HTML oraz duże listy zawierające dodatkowe pole wyszukiwawcze pozwalające na filtrowanie zawartości listy.

IV Wtyczki Rozdziaä 11. Tworzenie wtyczek Rozdziaä 12. Korzystanie z gotowych wtyczek

300

Rozdziaä 1. Python dla Django

11 Tworzenie wtyczek W

tym rozdziale przedstawiono sposoby tworzenia własnych wtyczek do biblioteki jQuery. Na początku zamieszczone zostały bardzo proste receptury, prezentujące rozwiązania, których można używać podczas tworzenia niewielkich wtyczek. Te proste przykłady pokazują także podstawy tworzenia wtyczek. W kolejnych prostych krokach wtyczki zostaną wzbogacone o opcje, ustawienia domyślne oraz metody. Kiedy tworzone wtyczki staną się zbyt duże, a fragmenty ich kodu zaczną być powielane metodą „kopiuj-i-wklej”, nadejdzie czas na przedstawienie wtyczki Plugin. Ta ogólna wtyczka pomaga w tworzeniu własnych wtyczek bez konieczności powielania kodu. W drugiej połowie tego rozdziału zostaną przedstawione funkcje pomocnicze, ułatwiające implementację we własnych wtyczkach bardziej zaawansowanych rozwiązań i mechanizmów. Korzystają one z takich możliwości biblioteki jQuery jak obiekty Callback oraz Deferred. Biblioteka jQuery sama ich używa, na przykład do obsługi żądań asynchronicznych.

Receptura: Przygotowywanie prostej, statycznej wtyczki Kiedy spróbujemy przejrzeć informacje dotyczące tworzenia wtyczek jQuery dostępne w internecie, może się wydawać, że jest to zadanie dosyć skomplikowane. Przykłady, które zazwyczaj można znaleźć, zawierają wiele powtarzającego się kodu, ułatwiającego rozwiązywanie problemów, z którymi zazwyczaj nigdy się nie spotkamy, zwłaszcza jeśli zależy nam jedynie na udostępnieniu prostych możliwości funkcjonalnych. Okazuje się jednak, że dodawanie wtyczek do jQuery jest całkiem proste, a konkretnie rzecz biorąc: zwodniczo proste. Listing 11.1 pokazuje sposób dodawania do biblioteki jQuery własnej funkcji w taki sposób, że będzie można jej używać w dowolnym innym miejscu kodu. Trzeba przy tym zauważyć, że ta prostota ma swoją cenę. W następnych recepturach do tej prostej wtyczki będą dodawane kolejne możliwości funkcjonalne.

302

Rozdziaä 11. Tworzenie wtyczek Listing 11.1. Doäñczanie funkcji do obiektu jQuery 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Bardzo prosta statyczna wtyczka

ProszÚ kliknÈÊ

Przykładowa wtyczka została zdefiniowana w wierszach 19. – 26. Warto zwrócić uwagę na konstrukcję rozpoczynającą się w wierszu 19. i kończącą w wierszu 26. Jest to funkcja, której parametrem jest $. Funkcja ta jest od razu wywoływana, przy czym zostaje do niej przekazany obiekt jQuery. Dzięki temu wewnątrz funkcji można bezpiecznie używać symbolu $. W konsekwencji tworzonej wtyczki będzie można bezpiecznie używać wraz z innymi bibliotekami lub wtyczkami, które zmieniają znaczenie symbolu $.

Receptura: Tworzenie prostych wtyczek kontekstowych

Kolejnym, niezwykle ważnym fragmentem tego przykładu jest wiersz 21. To w nim do obiektu jQuery zostaje dodana funkcja doSomething(). Funkcja ta będzie w nim dostępna, dopóki będzie istniał sam obiekt jQuery. Kod umieszczony w wierszu 34. pokazuje, jak można używać wtyczki. W przedstawionym przykładzie wtyczka operuje bezpośrednio na obiekcie jQuery, jako funkcja statyczna. Nie dysponuje ona żadnymi informacjami o kontekście wywołania, nawet jeśli użyjemy w tym celu wyrażenia takiego jak $('costam').

Receptura: Tworzenie prostych wtyczek kontekstowych Podstawowe sposoby tworzenia wtyczek dysponujących wiedzą o kontekście wywołania wciąż są stosunkowo proste. W przypadku zwyczajnych obiektów JavaScript uzyskanie dostępu do kontekstu wiąże się z koniecznością dodania funkcji do prototypu — Object.prototype. jQuery udostępnia skrócony zapis tego wyrażenia: $.fn. Listing 11.2 pokazuje, w jaki sposób można użyć tej techniki do stworzenia wtyczki, która ma dostęp do informacji o kontekście wywołania. Listing 11.2. Doäñczanie wtyczki do prototypu obiektu jQuery 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Spójrz na niebieski akapit poniĝej

Ten jest niebieski.

Ten tekst nie jest niebieski.

A ten akapit znowu jest niebieski.

Najważniejszy fragment kodu w tym przykładzie znajduje się w wierszu 26. Podobnie jak w poprzednim przykładzie, także tutaj do obiektu jQuery dodawana jest funkcja, jednak w tym przypadku jest ona dodawana do wyrażenia $.fn, które jest skrótowym sposobem zapisu odpowiadającym jQuery.prototype. Wiersz 37. pokazuje, jak można użyć tej wtyczki wraz z selektorem jQuery. Wybrany element strony stanie się kontekstem wtyczki jQuery. Innymi słowy, wszelkie operacje wykonywane na rzecz obiektu this będą wykonywane na rzecz elementów strony wybranych przy użyciu funkcji jQuery wykonanej bezpośrednio przed wywołaniem wtyczki.

Receptura: ãñczenie wtyczek i funkcji jQuery w äaþcuch wywoäaþ W poprzednich rozdziałach pokazano, w jaki sposób można łączyć funkcje jQuery w łańcuch wywołań, poprawiając w ten sposób przejrzystość i łatwość pielęgnacji kodu. Większość funkcji jQuery operujących na wybranych elementach zwraca zbiór elementów, na których mogą operować kolejne funkcje (umieszczone w łańcuchu wywołań). Jedynym wyjątkiem są funkcje, które same pełnią rolę selektorów; takie funkcje zwracają bowiem wybrane elementy strony. Listing 11.3 pokazuje prosty przykład tworzenia łańcucha wywołań z użyciem funkcji zdefiniowanej we wtyczce. Listing 11.3. Zwracanie kontekstu w celu zapewnienia moĔliwoĈci tworzenia äaþcucha wywoäaþ 00 01 02 03 04 05 06 07 08

Spójrz na niebieski akapit poniĝej

Receptura: ãñczenie wtyczek i funkcji jQuery w äaþcuch wywoäaþ 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Ten jest niebieski.

Ten tekst nie jest niebieski.

A ten akapit znowu jest niebieski.

Zapewnienie możliwości łączenia funkcji w łańcuch wywołań jest stosunkowo proste. W zasadzie jedyną znaczącą zmianą, wprowadzoną w wierszu 28. powyższego przykładu, jest dodanie słowa kluczowego return. Jeśli w kodzie tworzonej wtyczki wywoływane są inne funkcje pomocnicze, to ważne jest, by także i one zwracały zbiór wybranych elementów. W przypadkach gdy używane są domyślne funkcje pomocnicze jQuery, nie trzeba w tym celu robić niczego szczególnego. Na przykład, wystarczy użyć następującej instrukcji: return this.each(function(index) { /* ... */});

Kod umieszczony w wierszu 37. udowadnia, że tworzona wtyczka zapewnia możliwość tworzenia łańcucha wywołań — do wywołania zdefiniowanej w niej funkcji zostało dodane wywołanie funkcji css(). Dysponując tą wiedzą, nietrudno sobie wyobrazić, jak łatwo można zdefiniować wtyczkę implementującą własny selektor.

305

306

Rozdziaä 11. Tworzenie wtyczek

Receptura: Parametryzacja wtyczek Wtyczka działająca w domyślny sposób, wykonująca zawsze te same operacje, może być użyteczna jedynie w ograniczonej liczbie sytuacji. Jednak w rozdziale 6., „Interakcja z użytkownikiem”, przekonaliśmy się, że można podawać wiele opcji modyfikujących działanie wtyczek. Listing 11.4 przedstawia pierwszą, bardzo prostą implementację możliwości przekazywania parametrów do wtyczki. Listing 11.4. Przekazywanie obiektu opcji jako parametru 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Spójrz na zielony akapit poniĝej

Ten jest zielony.

Ten tekst nie jest zielony.

A ten akapit znowu jest zielony.

Receptura: Tworzenie parametrów domyĈlnych

W poprzednich przykładach wtyczka nosiła nazwę makeItBlue(). Aby nieco uogólnić jej działanie, w tym przykładzie jej nazwa została zmieniona na makeIt() (co widać w wierszu 26.), a do samej wtyczki można przekazać obiekt opcji określający, jakiego koloru należy użyć. Kod umieszczony w wierszu 28. używa koloru przekazanego w obiekcie opcji. Kolor ten zostaje określony w wierszu 37. Ta wtyczka jest bardziej elastyczna od tych przedstawionych w poprzednich recepturach. Jej jedyną wadą jest to, że korzystanie z niej wymaga znajomości sposobu wywołania i określania kolorów. Nie ma już żadnego rozsądnego sposobu określenia domyślnej wartości koloru.

Receptura: Tworzenie parametrów domyĈlnych W rozdziale 1., „Rozpoczynanie pracy z jQuery”, przedstawiona została funkcja pomocnicza extend(). Dzięki inteligentnemu wykorzystaniu tej funkcji — przekazaniu w jej wywołaniu odpowiednich dwóch obiektów — można sprawić, że skopiuje ona właściwości z drugiego obiektu do pierwszego. Listing 11.5 pokazuje, w jaki sposób można użyć funkcji extend(), by scalić podany obiekt opcji z opcjami domyślnymi. Listing 11.5. Rozszerzanie domyĈlnych parametrów przez parametry opcjonalne 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Spójrz na czerwony akapit poniĝej

Ten jest czerwony.

Ten tekst jest zielony.

A ten akapit znowu jest czerwony.

W tym przykładzie wywołanie umieszczone w wierszach 28. – 31. scala domyślne wartości opcji z opcjami podanymi w wywołaniu funkcji. Wartości domyślne zostały podane w kodzie wtyczki, w wierszu 29. W przypadku dużych wtyczek takie opcje domyślne można zdefiniować jako odrębną zmienną umieszczoną gdzieś wcześniej w kodzie wtyczki. Dzięki takiemu rozwiązaniu można by nawet udostępniać te ustawienia domyślne przy użyciu funkcji publicznych (lub zmiennych), by pozwolić użytkownikowi wtyczki na ich modyfikowanie. W tej wtyczce ustawienia domyślne są modyfikowane, kiedy w wywołaniu funkcji zostaną podane opcje; pokazuje to, że zapewnianie możliwości odczytu i zmiany ustawień domyślnych ma sens wyłącznie w tych przypadkach, gdy wyczka jest wywoływana w wielu różnych miejscach.

Receptura: Sterowanie dziaäaniem wtyczki przy uĔyciu metod Zaśmiecanie obiektu jQuery zbyt dużą liczbą funkcji nie jest dobrym rozwiązaniem. Dokumentacja biblioteki zaleca, by każda wtyczka dodawała do obiektu jQuery tylko jedną funkcję. W ten sposób zmniejsza się prawdopodobieństwo wystąpienia konfliktów nazw pomiędzy wtyczkami. Jednak w przypadku większych wtyczek najprawdopodobniej konieczne będzie dodawanie większej liczby funkcji. Można to robić na kilka sposobów. W internecie można znaleźć wiele artykułów prezentujących stosowne przykłady. Problem jednak polega na tym, że przykłady te nie są ze sobą spójne. W niektórych materiałach można znaleźć kilka wersji wtyczki, które nawet nie są zgodne ze sobą.

Receptura: Sterowanie dziaäaniem wtyczki przy uĔyciu metod

Prowadzi to do dwóch wniosków. Pierwszym z nich jest to, że sugestia podana na witrynie jQuery nie cieszy się powszechną akceptacją społeczności programistów, a drugim, że nie ma ogólnej zgody co do tego, które rozwiązanie jest lepsze. Przykłady zamieszczone w tej książce starają się zachować zgodność z zaleceniami twórców jQuery. Niemniej jednak starają się one zaspokajać potrzebę kopiowania i wklejania kodu poprzez zastosowanie wtyczki Plugin, która zostanie przedstawiona w następnej recepturze. W pierwszej kolejności zostaną jednak przedstawione podstawowe sposoby wywoływania funkcji na rzecz wtyczek. Demonstruje je przykład z listingu 11.6. Listing 11.6. Wywoäywanie metod na podstawie parametrów 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Zmieñ kolor tïa tego nagïówka

id="blue">Niebieski id="green">Zielony id="light">Jasny id="dark">Ciemny



Zanim zajmiemy się szczegółami, należy zaznaczyć, że metody przedstawione w tym przykładzie można by także zaimplementować w formie parametrów opcji. W rzeczywistej aplikacji najlepszym rozwiązaniem jest stosowanie metod do implementacji kodu, który można określić jako czynności wykonywane na wtyczce, takie jak: enable (włącz), disable (wyłącz), collapse (zwiń), expand (rozwiń), submit (wyślij) itd. W tej wtyczce opcje pozwalające na użycie koloru jasnego (light) oraz ciemnego (dark) zostały zaimplementowane jako metody, aby zapewnić możliwość przełączania ich przy użyciu przycisków bez znajomości aktualnie wybranego koloru; o ile oczywiście do nazwy tego koloru można dodać przedrostek light lub dark.

Receptura: Tworzenie wtyczki, która tworzy wtyczki

W tym przykładzie użycie koloru jasnego oraz ciemnego zostało zaimplementowane przy wykorzystaniu akcji. Ustawienia wtyczki są zapisywane w sposób niezauważalny dla użytkownika, przy użyciu metody data(). Jak widać, funkcja extend może scalać więcej niż dwa obiekty. Jeśli w wywołaniu funkcji nie zostały podane żadne opcje oraz jeśli wcześniej nie zostały zmienione żadne ustawienia, to zostaną użyte domyślne wartości opcji. Jeśli są dostępne jakieś wcześniejsze ustawienia, a nie ma opcji, to zostaną użyte wcześniejsze ustawienia. Jeśli natomiast zostały przekazane opcje, a jednocześnie są także dostępne wcześniejsze ustawienia, to wtyczka użyje opcji. Kod umieszczony w wierszach 36. – 44. korzysta z funkcji helper(), zdefiniowanej w wierszach 24. – 34. Funkcja ta zapobiega powielaniu tego samego kodu. Zostaje ona wywołana przy użyciu funkcji apply(), co pozwala na przekazanie kontekstu wywołania. Kod umieszczony w wierszach 48. – 56. odczytuje nazwę funkcji przekazaną do wtyczki i wywołuje odpowiednią metodę, przekazując do niej podane argumenty. Jeśli nazwa metody nie zostanie podana, to wtyczka domyślnie wywoła metodę init.

Receptura: Tworzenie wtyczki, która tworzy wtyczki Tworzenie większej wtyczki, która będzie korzystać z metod i przekazywać do nich opcje, wymaga powielania identycznych fragmentów kodu. A jak wiadomo, powielanie kodu jest złe. Ogólnym sposobem uniknięcia takiego powielania jest odseparowanie kodu, który pozostaje taki sam, od kodu, który zmienia się za każdym razem. Najistotniejszymi fragmentami kodu, który pozostaje niezmienny, jest logika odczytu argumentów metod oraz wywoływania odpowiedniej metody. A co by się stało, gdybyśmy mogli napisać wtyczkę implementującą tę logikę, dzięki czemu moglibyśmy się skoncentrować na kodzie odpowiadającym za to, co chcemy zrobić? Czy można sobie wyobrazić wtyczkę do tworzenia wtyczek? Listing 11.7 przedstawia przykład wtyczki służącej do tworzenia wtyczek, która pozwala na wyizolowanie logiki obsługi metod i daje możliwość skoncentrowania się na tworzonym kodzie. Wtyczka ta będzie nosić nazwę Plugin. Listing 11.7. Umieszczenie powtarzajñcego siö kodu w statycznej wtyczce Plugin 00 01 02 03 04 05 06 07 08

Zmieñ kolor tïa tego nagïówka

311

312

Rozdziaä 11. Tworzenie wtyczek 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65


id="blue">Niebieski id="green">Zielony id="light">Jasny id="dark">Ciemny



Wtyczka Plugin została zdefiniowana w wierszach 22. – 37. Jej kod można umieścić w zewnętrznym pliku .js i używać go za każdym razem, gdy trzeba będzie zdefiniować nową wtyczkę. Takie rozwiązanie jest szczególnie użyteczne w przypadkach, gdy na jednej witrynie tworzonych i używanych jest kilka niestandardowych wtyczek. Wtyczka Plugin została zdefiniowana jako statyczna metoda obiektu jQuery. Nie korzysta ona z żadnego kontekstu. Metoda ta wymaga przekazania jednego parametru, będącego słownikiem metod. Optymalnym rozwiązaniem jest umieszczenie w słowniku przynajmniej jednej metody skojarzonej z kluczem init. Posłuży ona za metodę domyślną. Można się obawiać, że takie rozwiązanie uniemożliwi stosowanie metod prywatnych bądź też że ich zakres będzie większy, niżbyśmy sobie tego życzyli. Jednak istnieje kilka sposobów rozwiązania tych problemów. Przede wszystkim, zewnętrzna funkcja rozpoczynająca się w wierszu 41. powinna zapobiegać takim sytuacjom. Gdyby jednak konieczne było wykorzystanie jakichś lokalnych funkcji pomocniczych, to warto zwrócić uwagę na konstrukcję umieszczoną w wierszach 43. – 65. Ten kod tworzy funkcję, która zwraca słownik funkcji i od razu ją wykonuje. W efekcie słownik funkcji zostaje przekazany do wtyczki Plugin, a zdefiniowana w nim funkcja pomocnicza nie będzie dostępna w żadnych innych miejscach kodu. W razie konieczności takie rozwiązanie można zastosować rekurencyjnie w zwracanej tablicy metod. W końcu, kod umieszczony w wierszach 73. – 84. pokazuje, że wtyczka Plugin działa zgodnie z założeniami. Porównajmy teraz ten przykład z kodem z poprzedniego listingu. Cały kod wtyczki został zdefiniowany w wierszach 41. – 67. Jak widać, cały powtarzający się kod został wyeliminowany.

313

314

Rozdziaä 11. Tworzenie wtyczek

Osoby, które mają doświadczenia z językiem programowania Scala, mogą uznać, że funkcje dark oraz light są zbyt podobne. W języku Scala można by je zaimplementować w jeszcze bardziej elegancki sposób. Witamy w świecie programowania funkcyjnego.

Receptura: Rejestracja i wywoäywanie funkcji zwrotnych Podczas tworzenia bardziej wyrafinowanych wtyczek niektóre z wewnętrznych mechanizmów działania biblioteki jQuery pozwalają uzyskiwać zamierzone efekty. Przykładem takiego mechanizmu może być obiekt Callbacks. jQuery używa go w celu implementacji obiektu Deferred, który zostanie przedstawiony w dalszej części tego rozdziału. Idea działania wywołania zwrotnego (ang. callback) polega na tym, że użytkownik wtyczki przekazuje do niej funkcje, które będą wywoływane w późniejszym czasie. Na przykład, mogą one być wywoływane po zgłoszeniu określonego zdarzenia, po zmianie stanu lub po upłynięciu określonego czasu. Listing 11.8 pokazuje, w jaki sposób można dodawać funkcje zwrotne i ustawiać licznik czasu tak, by wywołał je po trzech sekundach. Listing 11.8. Zastosowanie obiektu Callbacks jQuery do przygotowania zbioru funkcji zwrotnych 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Wywoïania zwrotne dodadzÈ poniĝej nowe treĂci

To jest pierwszy punkt dodawania treĂci.

Ten element zostanie zignorowany.

To jest pierwszy punkt dodawania treĂci.

W pierwszej kolejności przyjrzymy się samym funkcjom zwrotnym, hello oraz bye. Warto zwrócić uwagę na ich pierwszy parametr — reprezentuje on element HTML, na którym mają być wykonywane operacje. Następnie w kodzie funkcji hello należy zwrócić uwagę na wiersze zawierające wywołania lock() oraz disable(). Warto usunąć komentarze umieszczone na początku tych wierszy kodu i sprawdzić, co się stanie. Obie te funkcje zostały wprowadzone w jQuery 1.7 i powodują, że kolejne funkcje zwrotne nie będą wywoływane. Funkcja lock() blokuje funkcję zwrotną w jej aktualnym stanie, natomiast funkcja disable() sprawia, że żadna z pozostałych funkcji zwrotnych umieszczonych na liście nie zostanie wywołana. W wierszach 42. oraz 43. zostały umieszczone dwa kolejne komentarze; zawierają one wywołania pozwalające na usunięcie funkcji zwrotnej oraz wyczyszczenie całego stosu funkcji zwrotnych. Warto także spróbować dodać więcej funkcji zwrotnych lub wywołać te same funkcje kilkukrotnie. Dzięki obiektowi Callbacks te same funkcje można zarejestrować kilka razy. Obiekt Callbacks może zaoszczędzić nam wiele pracy związanej z zarządzaniem zbiorami wywoływanych funkcji zwrotnych.

315

316

Rozdziaä 11. Tworzenie wtyczek

Receptura: Przekazywanie kontekstu do funkcji zwrotnych W poprzednim przykładzie przekazywany parametr określa element, na którym funkcja ma operować. Rozwiązanie takie można uznać za nieco dziwne i niepotrzebne i w rzeczywistości takie właśnie jest. Jeśli do funkcji zwrotnej przekazany zostanie kontekst, to będzie ona wymagała przekazywania tylko jednego argumentu albo w niektórych przypadkach żadnego. Taki efekt można uzyskać, wywołując zamiast funkcji fire() funkcję fireWith(). Listing 11.9 pokazuje zmiany, jakie należy wprowadzić w kodzie, by takie rozwiązanie zadziałało. Listing 11.9. Zastosowanie funkcji fireWith() w celu przekazania kontekstu do funkcji zwrotnej 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Wywoïania zwrotne zmodyfikujÈ treĂÊ poniĝej

To jest pierwszy punkt dodawania treĂci.

Ten element zostanie zignorowany.

To jest drugi punkt dodawania treĂci.

W powyższym listingu należy zwrócić uwagę na wiersze 27. oraz 30. Funkcje hello oraz bye pobierają tylko jeden argument. Zamiast przekazywania elementów jest do nich przekazywany kontekst, dzięki czemu mogą korzystać z obiektu this. Kolejnym interesującym fragmentem kodu jest wiersz 36. W porównaniu z poprzednim przykładem w tym wierszu kodu wprowadzone zostały dwie zmiany. Przede wszystkim zmieniła się nazwa wywoływanej funkcji, z fire zmieniono ją na fireWith. Oprócz tego, przekazywane jako parametr słowo "Ăwiecie" zostało umieszczone wewnątrz tablicy. Zmiana ta jest spowodowana tym, że funkcja fireWith oczekuje tablicy argumentów, a nie zmiennej liczby argumentów, a to z kolei wynika z faktu, że funkcja fireWith w niewidoczny sposób korzysta z funkcji apply. Receptura: Zwracanie obiektu Deferred

Receptura: Zwracanie obiektu Deferred w celu wywoäywania odröbnych funkcji zwrotnych w razie powodzenia i poraĔki Biblioteka jQuery wykorzystuje obiekt Callbacks, by udostępniać obiekt o nazwie Deferred. W rzeczywistości obiekt Deferred był dostępny jeszcze przed wprowadzeniem obiektu Callbacks. Wygląda na to, że twórcy jQuery stworzyli obiekt Callbacks, porządkując wewnętrzną implementację obiektu Deferred. Aby szybko zrozumieć, czym jest i jak działa obiekt Deferred, warto sobie uświadomić, że najprawdopodobniej już go używaliśmy. Świadomie bądź nie, ale używaliśmy tych obiektów, obsługując żądania asynchroniczne wykonywane przy użyciu technologii AJAX. Jeśli tworzona wtyczka wykonuje operacje, które po pewnym okresie mogą się zakończyć powodzeniem lub porażką, to zastosowanie obiektu Deferred ułatwi nam zaimplementowanie jej w taki sposób, że użytkownicy będą mogli jej używać w sposób przypominający obsługę żądań asynchronicznych w bibliotece jQuery. Listing 11.10 pokazuje, jak można utworzyć własny obiekt Deferred, zarejestrować funkcje zwrotne i wywołać wszystkie zarejestrowane funkcje. Koniecznie należy pamiętać, że przedstawiony w tej recepturze sposób użycia obiektu Deferred nie jest prawidłowy, a wszelkie problemy zostaną rozwiązane w następnej recepturze.

317

318

Rozdziaä 11. Tworzenie wtyczek Listing 11.10. BezpoĈrednie zwracanie obiektu Deferred 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Poczekaj 5 sekund na wyĂwietlenie okienka

Wiersze 19. – 22. przedstawiają wtyczkę, która bezpośrednio zwraca obiekt Deferred. Wtyczka zostaje utworzona w wierszu 28., a bezpośrednio poniżej jest rejestrowana funkcja zwrotna done. Aby pokazać, w jaki sposób obiekty Deferred wykonują zarejestrowane funkcje zwrotne, kod umieszczony w wierszach 32. – 36. wywołuje wszystkie zarejestrowane funkcje zwrotne po upłynięciu pięciu sekund. Niemniej jednak nieco problematyczne jest umiejscowienie tego kodu. Jak widać, został on umieszczony poza wtyczką. Oznacza to, że ujawniony został wewnętrzny sposób jej implementacji. To z kolei sprawia, że inny kod JavaScript mógłby zmodyfikować wtyczkę i sprawić, że będzie ona działała w sposób niezgodny z naszymi zamierzeniami.

Receptura: Zwracanie obiektu Promise w celu ukrycia szczegóäów dziaäania

Receptura: Zwracanie obiektu Promise w celu ukrycia szczegóäów dziaäania Obiekt Deferred udostępnia dla kodu zewnętrznego odrębny niewielki interfejs. Jest on określany mianem obiektu Promise albo obiektu obietnicy. Zwrócony obiekt udostępnia tylko te metody, które zewnętrzny kod może bezpiecznie wywoływać, przy czym zazwyczaj są to metody używane do zarejestrowania dodatkowych funkcji zwrotnych. Listing 11.11 zwraca obiekt Promise, a kod, który z niego korzysta, implementuje w formie wtyczki. Listing 11.11. UĔycie funkcji promise() w celu uzyskania zabezpieczonej wersji obiektu Deferred 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Poczekaj 5 sekund na wyĂwietlenie okienka

' + msg);

319

320

Rozdziaä 11. Tworzenie wtyczek

Warto zwrócić uwagę na wiersze 19. – 21. Tworzony jest w nich taki sam obiekt Deferred i w identyczny sposób wykonywana funkcja setTimeout, która z kolei poprzez wywołanie funkcji resolve wywołuje wszystkie zarejestrowane funkcje zwrotne. Różnica w stosunku do poprzedniej receptury polega na tym, że tym razem wywołanie funkcji setTimeout zostało umieszczone wewnątrz wtyczki, a na jej końcu jest wywoływana metoda promise(). Z punktu widzenia użytkownika wtyczki wygląda na to, że nic się nie zmieniło. Kod służący do rejestracji funkcji zwrotnej, umieszczony w wierszach 35. – 37., pozostał taki sam.

Receptura: Przedstawienie zabezpieczenia obiektu obietnicy Aby zauważyć różnice pomiędzy niezabezpieczonym obiektem Deferred a obiektem Promise, spróbujmy naruszyć ograniczenia. Listing 11.12 celowo zawiera błąd, by pokazać, że wewnętrznych mechanizmów działania obiektu Deferred nie można modyfikować wyłącznie w przypadku zwracania obiektu Promise. Listing 11.12. Doprowadzanie do wewnötrznego bäödu JavaScript w celu pokazania, Ĕe obiekt Promise nie daje dostöpu do wewnötrznych mechanizmów dziaäania obiektu Deferred 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Celowy bïÈd, by zademonstrowaÊ dziaïanie funkcji promise()

Ten przykład stanowi połączenie dwóch poprzednich. Wewnątrz wtyczki nie jest wywoływana funkcja resolve(). Wywoływana jest natomiast funkcja promise(). Kod, który wywołuje funkcję resolve(), ponownie został umieszczony na zewnątrz wtyczki. Można wypróbować ten przykład, by sprawdzić, jak działa. Należy w tym celu wyświetlić konsolę błędów przeglądarki i sprawdzić w niej, jakie błędy są generowane.

Receptura: Stosowanie obiektów Promise do kontroli sterowania realizacjñ kodu Jak do tej pory interfejs Promise używany był jedynie w połączeniu z funkcją done(). W razie niepowodzenia operacji wykonywanych przez wtyczkę żadna funkcja nie zostałaby wywołana. Jednak obiekt Promise udostępnia także inne funkcje, takie jak: fail(), always() oraz then(). Listing 11.13 przedstawia przykład demonstrujący subtelne różnice pomiędzy sposobami ich działania. Listing 11.13. Stosowanie funkcji fail(), then() oraz always() 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

ProszÚ poczekaÊ 5 sekund na wyĂwietlenie okienka

W podanym przykładzie widać, że w wierszach 23. – 25. można wybrać, czy wywołanie wtyczki ma się zakończyć powodzeniem czy też porażką. Wywołanie funkcji resolve() reprezentuje powodzenie, a wywołanie funkcji reject() oznacza porażkę. W wierszach 37. – 53. są rejestrowane funkcje obsługujące wszystkie możliwe rezultaty wykonania wtyczki. W rzeczywistości mogą być tylko dwa rezultaty: powodzenie (done) oraz porażka (fail). Funkcja then() zapewnia możliwość jednoczesnego określenia funkcji obsługującej pomyślne zakończenie operacji, jak i funkcji obsługującej niepowodzenie, a przy tym jest zgodna ze specyfikacją CommonJS Promises/A. Funkcja always() służy do zarejestrowania funkcji zwrotnej, która będzie wywoływana niezależnie od wyniku wykonania operacji.

Receptura: Wizualizacja postöpów przed wywoäaniem koþcowej funkcji zwrotnej

Receptura: Wizualizacja postöpów przed wywoäaniem koþcowej funkcji zwrotnej Kiedy już zostanie wywołana funkcja resolve() lub reject() obiektu Deferred, to obiekt ten nie będzie już mógł być dłużej używany. Funkcje zwrotne są rejestrowane w celu jednokrotnego użycia. W innym przypadku nie byłby to obiekt Deferred, a Observer. Jednak w przypadku długotrwałych operacji może się zdarzyć, że będziemy chcieli wizualizować postęp, zanim zostanie wywołana końcowa funkcja zwrotna. Obiekt Deferred udostępnia mechanizm, który zapewnia takie możliwości. Listing 11.14 przedstawia, jak można korzystać z powiadomień o przebiegu realizacji operacji. Listing 11.14. Dodawanie funkcji zwrotnych przy uĔyciu funkcji progress() i wywoäywanie ich przy uĔyciu funkcji notify() 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

ProszÚ poczekaÊ 2,5 sek. na aktualizacjÚ i 5 sek. na zakoñczenie.

Sposób rejestracji funkcji zwrotnej obsługującej końcowy wynik działania wtyczki pozostał taki sam jak w poprzednich przykładach. Wiersze 46. – 48. zawierają wywołanie funkcji always(), określającej funkcję, która zostanie wykonana po zakończeniu operacji. Z kolei w wierszach 43. – 45. została zarejestrowana funkcja, która będzie informować o postępach wykonywanych operacji. W celu przedstawienia jej działania w wierszach 28. – 32. został uruchomiony dodatkowy licznik czasu, który po upłynięciu 2,5 sekundy zasygnalizuje, że operacja została wykonana w 50 procentach. Informacja ta jest przekazywana przy użyciu funkcji notify(). Choć w powyższym przykładzie funkcja notify() zostaje wywołana tylko raz, to jednak można ją wywoływać dowolnie wiele razy.

Receptura: Przekazywanie kontekstu do funkcji zwrotnych We wszystkich przykładach przedstawionych do tej pory funkcje zwrotne nie dysponowały żadnymi informacjami o kontekście wywołania. Jednak wiele wtyczek wymaga tego kontekstu, aby mogły zrobić w funkcji zwrotnej coś użytecznego. Właśnie w tym celu obiekt Deferred udostępnia alternatywne wersje funkcji resolve() oraz reject(): resolveWith() oraz rejectWith(). Listing 11.15 korzysta z funkcji resolveWith() i przedstawia jednocześnie subtelne różnice w sposobie przekazywania parametrów funkcji. Listing 11.15. Zastosowanie funkcji resolveWith() w celu przekazania kontekstu do funkcji zwrotnej 00 01 02 03 04 05 06 07



Receptura: Przekazywanie kontekstu do funkcji zwrotnych 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

Poczekaj 5 sek. na wyĂwietlenie okienka i zmianÚ tïa

W pierwszej kolejności należy zwrócić uwagę na wiersz 23. Jak widać, różni się on od poprzednich receptur nie tylko zmianą użytej funkcji — zamiast resolve() została użyta funkcja resolveWith() — lecz oprócz tego parametr "gotowy!" został teraz umieszczony w tablicy: ['gotowy!']. Być może czytelnik pamięta tę zmianę już z jednego z poprzednich przykładów. Podobna zmiana została wprowadzona, gdy zamiast funkcji fire() obiektu Callbacks chcieliśmy skorzystać z funkcji fireWith(). Funkcje takie jak resolveWith() oraz rejectWith() przekazują kontekst. Za kulisami używają w tym celu ogólnej funkcji apply(), która wymaga, by parametry funkcji zostały przekazane w formie tablicy.

325

326

Rozdziaä 11. Tworzenie wtyczek

Receptura: Przekazywanie kontekstu do funkcji informujñcych o postöpach operacji Nie tylko funkcje resolveWith() oraz rejectWith() pozwalają na przekazywanie kontekstu; w podobny sposób można go przekazywać do funkcji informujących o postępach wykonywanych operacji. Listing 11.16 pokazuje, w jaki sposób należy używać funkcji notifyWith(), by określić kontekst, który będzie używany podczas informowania o postępach wykonywanych operacji. Listing 11.16. UĔycie funkcji notifyWith() w celu przekazania kontekstu do funkcji zwrotnej informujñcej o postöpach 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

ZwróÊ uwagÚ na zmiany koloru tïa z czerwonego na pomarañczowy, a nastÚpnie zielony

Można się zastanawiać, kiedy możemy potrzebować kontekstu w funkcjach zwrotnych informujących o postępach wykonywanych operacji. W tym przykładzie kontekst został wykorzystany do wyświetlenia wyników. Można jednak uznać, że wyniki to coś, co nie powinno być kontrolowane przez wtyczkę. Jednak to już zależy do konkretnego przypadku użycia. Oczywistym przypadkiem, kiedy kontekst w funkcjach zwrotnych będzie potrzebny, jest sytuacja, gdy na jednej stronie jednocześnie działa więcej egzemplarzy tej samej wtyczki. W przypadku powiadamiania o postępach będziemy chcieli wiedzieć, który egzemplarz wtyczki wywołał funkcję zwrotną. Przedstawiony przykład używa kontekstu do wyświetlania wyników. W zależności od postępów zmieniany jest kolor tła elementu przekazanego jako kontekst.

Podsumowanie Jeśli spróbujemy wyszukać w internecie informacje dotyczące tworzenia wtyczek dla biblioteki jQuery, to możemy odnieść wrażenie, że jest to trudne zadanie. Większość prezentowanych przykładów ma bowiem ułatwiać tworzenie stosunkowo dużych wtyczek. Gdybyśmy na podstawie tych informacji mieli wybrać sposób implementacji wtyczki, to podjęcie właściwej decyzji byłoby trudne. Jednak, jak pokazały przykłady zamieszczone w tym rozdziale, implementacja prostej wtyczki nie przysparza żadnych problemów. Później, wraz z rozbudową wtyczki, można dodawać bardziej wyszukane mechanizmy jej działania. W rozdziale została przedstawiona wtyczka Plugin, która pozwala uniknąć niepotrzebnego powielania kodu. Jest to wtyczka ogólnego przeznaczenia, ułatwiająca tworzenie bardziej złożonych wtyczek. Dobrze się ona nadaje do wykorzystania w bardziej złożonych przypadkach. Wraz z rozwojem biblioteki jQuery jej twórcy wyodrębnili w kodzie pewne wzorce projektowe i przekształcili je do postaci ogólnej biblioteki, z której mogą korzystać także użytkownicy jQuery. Na przykład, żądanie asynchroniczne wykonywane przy użyciu technologii AJAX może zostać wykonane prawidłowo lub zakończyć się niepowodzeniem, a każdej z tych akcji odpowiada funkcja zwrotna, którą można zarejestrować i wywołać.

327

328

Rozdziaä 11. Tworzenie wtyczek

W tym celu został stworzony obiekt Callbacks; ma o pomagać w rejestrowaniu i wywoływaniu funkcji zwrotnych. Z kolei obiekt Deferred pomaga rejestrować i wywoływać funkcje zwrotne, w zależności od wyniku wykonania operacji, która może się zakończyć powodzeniem lub porażką. Oprócz prezentacji samych funkcji zwrotnych przykłady zamieszczone w tym rozdziale pokazały także, jak można przekazywać do nich kontekst i jak wizualizować postępy wykonywanych operacji jeszcze przed wywołaniem końcowej funkcji zwrotnej.

12 Korzystanie z gotowych wtyczek D

owiedzieliśmy się już, jak można tworzyć swoje własne wtyczki, jednak zależnie do opracowywanego projektu oraz czasu, w jakim należy go zakończyć, można się zdecydować na wykorzystanie gotowych wtyczek. W internecie dostępne są tysiące takich wtyczek, a wiele z nich można znaleźć na witrynie http://plugins.jquery.com/. Choć początkowo witryna ta była doskonałym pomysłem, to jednak aktualnie korzystanie z niej jest problematyczne — można na niej znaleźć setki wtyczek, które przesłano dawno temu, a następnie porzucono lub które nie były aktualizowane i dostosowywane do nowych wersji jQuery. Aktualnie witryna jest gruntownie przebudowywana. W rzeczywistości, kiedy na nią wejdziemy, zostaje wyświetlone stosowne ostrzeżenie1. Chociaż witryna zostanie kiedyś zaktualizowana i pomoże nam w odnajdywaniu użytecznych wtyczek, to można się jednak zdecydować na wykorzystanie wtyczek, które są nieco mniej stabilne bądź pochodzą od osób, którym możemy zaufać. Dlatego też w tym rozdziale przyjrzymy się wtyczkom stworzonym przez osoby bardzo znane i popularne w kręgach programistów, projektantów oraz osób związanych z mediami społecznościowymi. Platforma Twitter Bootstrap (http://twitter.github.io/bootstrap/) jest fantastycznym zbiorem wtyczek oraz stylów, które pomagają programistom robić wszystko, zaczynając od atrakcyjnych i efektywnych układów stron, aż do stosowania widżetów i wtyczek, które nie tylko poprawią wygląd naszej witryny, lecz także jej działanie, i to niezależnie od tego, na jakim urządzeniu będzie przeglądana. W przykładach prezentowanych w tym rozdziale będzie używana platforma Bootstrap w wersji 2.0.4.

1

W momencie publikacji polskiego wydania książki modernizacja witryny została zakończona — przyp. tłum.

330

Rozdziaä 12. Korzystanie z gotowych wtyczek

Receptura: WyĈwietlanie okna modalnego Kilka lat temu istniały dwa sposoby pozwalające witrynie lub aplikacji internetowej na przyciągnięcie uwagi użytkownika. Pierwszym z nich było wyświetlenie nowego, niewielkiego okna przeglądarki, umieszczonego nad lub pod aktualnie używanym oknem; drugim sposobem było zastosowanie funkcji alert() języka JavaScript. Aktualnie, kiedy należy wyświetlić ważne informacje, można użyć okna modalnego (ang. modal window). Działa ono w sposób podobny do niewielkich okienek informacyjnych wyświetlanych przy użyciu funkcji alert(). Jednak zamiast korzystać z możliwości przeglądarki, okna modalne, o których tutaj mowa, są kodem HTML umieszczanym w drzewie DOM dokumentu, dzięki czemu można im nadawać dowolny wygląd. Wtyczka modal wchodząca w skład platformy Bootstrap daje nam możliwość obsługi zdarzeń generowanych przez okno modalne i wywoływania funkcji w odpowiedzi na nie. Listing 12.1 pokazuje sposób tworzenia i wyświetlania okna modalnego, jak również obsługi zdarzenia hidden w celu wywołania innej funkcji. Listing 12.1. Okno modalne z obsäugñ zdarzeþ 00 01 02 03 04 05 07 08 09 14 15 16 17 18 19 20

21

22

23 Stosowanie wtyczki Modal 24

25

26

27 28

29 30

Kliknij poniĝszy odnoĂnik, by wyĂwietliÊ okno

31 Uruchom! 32

33

Receptura: WyĈwietlanie okna modalnego 34

Wtyczka Modal platformy Bootstrap

35

36

37

38 Okna modalne sÈ doskonaïÈ alternatywÈ dla funkcji alert(). 39

40

41 Po zamkniÚciu tego okna pojawi siÚ okienko informacyjne. 42

43

44

45 46 Zamknij okno 47 48

49

50 51

52 53 56 59 60 67 68

Ta receptura przedstawia podstawowy układ strony tworzonej przy użyciu platformy Bootstrap, który będzie używany w pozostałych recepturach. Poniżej zostaną dokładniej opisane niektóre aspekty tego układu. W wierszach 8. oraz 14. zostają dodane arkusze stylów sugerowane przez platformę Bootstrap, a definicja stylu umieszczona pomiędzy nimi dodaje wypełnienie do elementu body, dzięki czemu pasek nawigacyjny zostanie wyświetlony bez przesłaniania zawartości strony. W wierszach 20. – 26. został umieszczony element div pełniący rolę paska nawigacyjnego (została w nim użyta klasa navbar). Natomiast w wierszu 28. rozpoczyna się element div pełniący rolę pojemnika, w którym została umieszczona większość prezentowanej strony. W odróżnieniu od jQuery Mobile, platforma Bootstrap nie wymaga, by skrypty były wczytywane w sekcji nagłówka stron, dlatego też, w celu poprawienia wydajności działania, znaczniki dołączające pliki JavaScript zostały umieszczone u dołu dokumentu, tuż przed zamykającym znacznikiem body.

331

332

Rozdziaä 12. Korzystanie z gotowych wtyczek

Zarówno dołączane zewnętrzne pliki JavaScript, jak i kod osadzony bezpośrednio na stronie zostały zapisane w wierszach 53. – 66. Jak widać, używana jest zarówno biblioteka jQuery 1.7.1, jak i skrypt respond.mini.js, zapewniający wydajną obsługę zapytań operujących na mediach w przeglądarkach Internet Explorer 7 oraz 8. Wtyczka Modal działa na zasadzie odnajdywania określonych klas oraz niestandardowych atrybutów. W wierszu 31. do elementu a dodany został atrybut data-toggle="modal". Zmieni on element odnośnika w wyzwalacz, którego kliknięcie spowoduje wyświetlenie okna modalnego. Odnośnik należy następnie skojarzyć z elementem pojemnika, który ma być wyświetlony jako okno modalne. W tym przykładzie widzimy, że element docelowy odnośnika został określony jako href="#modal". Kolejnym kluczowym elementem tego kodu jest zastosowanie klasy hide, która została dodana do elementu div umieszczonego w wierszu 32. W celu przedstawienia możliwości korzystania ze zdarzeń generowanych przez okno modalne w wierszach 62. – 64. został umieszczony kod JavaScript, określający funkcję, która ma zostać wywołana po zamknięciu okna. Kiedy okno zostanie zamknięte, zgłaszane jest zdarzenie hidden, a procedura jego obsługi spowoduje wyświetlenie okienka informacyjnego.

Receptura: Stosowanie rozwijanego menu Rozwijane menu doskonale nadają się do użycia w systemach nawigacyjnych bądź też kiedy chcemy dać użytkownikom możliwość wyboru, lecz jednocześnie nie chcemy, by były one cały czas widoczne. W przykładzie przedstawionym na listingu 12.2 rozwijane menu zostało użyte do stworzenia prostego systemu nawigacyjnego z odnośnikami. Listing 12.2. Tworzenie systemu nawigacyjnego 00 01 02 03 04 05 07 08 09 14 15 16 17 18 19

Receptura: Stosowanie rozwijanego menu 20

21

22

23 Stosowanie rozwijanego menu 24

25
• Strona gïówna
26
• 27 29 Zasoby lokalne 30 31 32
  33
  • Okno modalne
  34
  • Karty
  35
  • Podpowiedzi
  36
  37
38
• 39 41 Zasoby zewnÚtrzne 42 43 44
  45
  • 46 47 Strona gïówna Bootstrap 48 49
  50
  • jQuery
  51
  52
53

54

55

56

57 58

59 60

Powyĝsze menu zostaïo stworzone przy uĝyciu wtyczki dropdown.

61

62 Opcja "Zasoby lokalne" zawiera odnoĂniki do plików 63 lokalnych, natomiast opcja "Zasoby zewnÚtrzne" odnoĂniki 64 do innych witryn. 65

66 67

68 69 72 75 76 77

333

334

Rozdziaä 12. Korzystanie z gotowych wtyczek

Kluczowe elementy konieczne do utworzenia rozwijanego menu przy użyciu platformy Bootstrap zostały zapisane w wierszach 24. – 53. Jak widać, został w tym celu stworzony element ul zawierający kilka elementów li. Klasa active została użyta, by zmienić style używane w danym elemencie menu, przy czym w tym przypadku chodzi o wyróżnienie elementu pokazujące użytkownikowi, na której stronie aktualnie się znajduje. W wierszach 26. oraz 38. zostały umieszczone elementy list z atrybutem class="dropdown". Dzięki niemu w elementach tych zostaną zastosowane odpowiednie style. Z kolei w wierszach 27. oraz 29. zostały zapisane odnośniki z atrybutami class="dropdown-toggle" oraz data-toggle="dropdown"; są one używane przez wtyczkę do określania używanych stylów oraz do utworzenia rozwijanego menu. Każdy z tych odnośników odwołuje się także do elementu listy, w którym został umieszczony, co można wykorzystać do wyświetlenia konkretnego menu. Oznacza to, że gdybyśmy tylko chcieli, to moglibyśmy zamienić #internal w wierszu 28. na #external, a w rezultacie kliknięcie tego odnośnika powodowałoby wyświetlanie menu z zasobami zewnętrznymi. W wierszu 75. znajduje się odwołanie do pliku bootstrap-dropdown.js. Koniecznie należy go dodać, gdyż zawiera on wtyczkę odpowiedzialną za tworzenie rozwijanego menu.

Receptura: Stosowanie wtyczki ScrollSpy Być może czytelnik miał okazję spotkać się na niektórych stronach z pływającymi lub umieszczonymi w konkretnym miejscu elementami nawigacyjnymi, które zmieniają wygląd w zależności od aktualnie wyświetlanego miejsca strony. Właśnie takie możliwości zapewnia wtyczka ScrollSpy, którą w bardzo prosty sposób można dodawać do własnych stron, by uzyskać taki efekt. Wtyczka ta operuje na zawartości drzewa DOM, dostępnej w momencie wywołania wtyczki. Oznacza to, że w przypadku zmiany zawartości strony konieczne będzie odświeżenie wtyczki, gdyż w przeciwnym razie nie zauważy ona wprowadzonych modyfikacji. Listing 12.3 przedstawia przykład dodawania jeszcze jednego elementu nawigacyjnego i odświeżania wtyczki. Listing 12.3. Dynamiczne dodawanie elementu nawigacyjnego 00 01 02 03 04 05 07 08 09

Stosowanie wtyczki Scrollspy

• Jeden
• Dwa
• Trzy

Operacja zaktualizuje wyróĝniony element.

Dodaj kolejny

Sekcja pierwsza.

Sekcja druga.

Sekcja trzecia

77 78

Wiersz 20. zawiera element body z atrybutem data-spy="scroll". Atrybut ten musi zostać dodany do obszaru, na którym ma operować wtyczka ScrollSpy. W wierszach 26. – 29. zostały umieszczone dodatkowe elementy nawigacyjne, które będą wchodziły w skład paska nawigacyjnego. To właśnie ich style będą modyfikowane podczas przewijania strony. Każdy z tych elementów odwołuje się do jednego z elementów znajdujących się w obszarze głównej zawartości strony. Odpowiednie przygotowanie tych odnośników jest niezbędne do prawidłowego działania wtyczki ScrollSpy. W wierszach 35. – 54. została umieszczona zawartość strony. W elementach zostały zastosowane style, dzięki którym będą one na tyle duże, by można było przewijać stronę i obserwować zmiany widoczne na pasku nawigacyjnym. W wierszu 27. został umieszczony przycisk, którego kliknięcie powoduje dodanie nowego elementu nawigacyjnego, nowego elementu div do treści strony oraz odświeżenie wtyczki ScrollSpy. W wierszu 62. został dołączony do strony plik bootstrap-scrollspy.js, który jest niezbędny do działania wtyczki. Wiersze 64. – 75. zawierają skrypt odpowiadający za obsługę przycisku i odświeżenie wtyczki. W ramach obsługi kliknięcia przycisku nowe elementy strony dodawane są przy użyciu funkcji append(), a następnie są odnajdywane i odświeżane wszystkie elementy strony zawierające atrybut data-spy="scroll". Podczas testowania tego przykładu można zauważyć błąd, który powinien zostać naprawiony w wersji 2.1 platformy Bootstrap: bezpośrednio po wyświetleniu strony aktywny jest ostatni element nawigacyjny, przy czym zostanie on zmieniony, gdy tylko strona zostanie przewinięta poniżej początkowego wypełnienia zajmowanego przez menu. Błąd ten można także naprawić, pisząc prosty skrypt, który usunie klasę active z ostatniego elementu nawigacyjnego i zastosuje ją w pierwszym elemencie. Można także poczekać na wydanie następnej wersji platformy Bootstrap.

Receptura: Przeäñczane karty Karty są już używane od kilku lat i stały się praktycznie obowiązkowym elementem witryn zajmujących się handlem elektronicznym. Bardzo często zawierają one wykresy, statystyki, recenzje, opisy cech, informacje o zaletach, plany oraz wszelkiego rodzaju inne dane, które lepiej jest wyświetlać, kiedy użytkownik o to poprosi, a nie umieszczać na stronie tak, by były widoczne od razu. Listing 12.4 przedstawia układ strony zawierającej prostą grupę kart wraz z ich treścią.

Receptura: Przeäñczane karty Listing 12.4. Przeäñczanie aktywnej karty oraz jej treĈci 00 01 02 03 04 05 07 08 09 12 13 14 15 16 17 18

19

20

21 Stosowanie kart 22

23

24

25 26

27

Skorzystaj z poniĝszych kart, by zmieniaÊ prezentowane treĂci

28

29
• 30 Cechy 31
32
• 33 Specyfikacja 34
35
• 36 Opinie 37
38

39 40

41

42 Tutaj zostaïy podane informacje o cechach produktu. 43

44

45 To jest miejsce na specyfikacjÚ. 46

47

48 A tu na recenzje. 49

50

51 52

53

337

338

Rozdziaä 12. Korzystanie z gotowych wtyczek 54 57 60 61 62

Wiersze 28. – 38. zawierają definicję kart tworzonych przy użyciu elementu ul, pełniącego rolę pojemnika, w którym są umieszczane elementy li reprezentujące poszczególne karty. Atrybut data-toggle="tab" umieszczony w znacznikach odnośników informuje wtyczkę, że elementy te będą stanowiły karty. Atrybut href odnośników odwołuje się do zawartości poszczególnych kart. Element pełniący rolę pojemnika zawierającego treść wszystkich kart został zapisany w wierszach 40. – 50. Treści poszczególnych kart zostały umieszczone w odrębnych elementach div zawierających odpowiednie atrybuty id. Zastosowanie klasy tab-pane zapewnia użycie odpowiednich stylów; a klasa active odpowiada za wybór elementu div, który będzie widoczny. Wiersz 60. zawiera odwołanie do pliku bootstrap-tab.js, dzięki któremu cała ta magia może się wydarzyć.

Receptura: Dodawanie podpowiedzi Od czasu do czasu może się zdarzyć, że będziemy musieli zdefiniować na witrynie jakiś termin, dodać opis do użytych słów kluczowych bądź tekst do sekcji nawigacyjnej zawierającej same obrazki. W takich sytuacjach przyda się nam wtyczka ToolTip. Listing 12.5 przedstawia akapit tekstu zawierający odnośniki służące do wyświetlania etykiet. Listing 12.5. WyĈwietlanie informacji w formie podpowiedzi 00 01 02 03 04 05 07 08 09 12 13

Receptura: Dodawanie podpowiedzi 14 15 16 17 18

19

20

21 Stosowanie podpowiedzi 22

23

24

25 26

27 28

Podpowiedzi dodano do tekstu poniĝej, wskaĝ je myszkÈ, 29 by zostaïy wyĂwietlone.

30

31 Od czasu do czasu moĝe siÚ zdarzyÊ, ĝe bÚdziemy chcieli 32 dodaÊ krótkie wyjaĂnienia do tekstu. Albo uĝyjemy sïowa 33 kluczowego wymagajÈcego dodatkowych 34 36 wyjaĂnieñ. JeĂli tekst wyjaĂnienia ma byÊ dïuĝszy, 37 to warto przyjrzeÊ siÚ wtyczce 38 39 Popover. W tych podpowiedziach zastosowano opóěnienie, 40 dziÚki któremu bÚdÈ one wyĂwietlane po 600 milisekundach od 41 momentu wskazania myszkÈ. 42

43 44

45 46 49 52 53 58 59

Tworzenie podpowiedzi jest dosyć proste: wszystko, co należy w tym celu zrobić, to dodanie do elementu atrybutu rel="tooltip" i umieszczenie tekstu, który chcemy wyświetlić w podpowiedzi, w atrybucie title. Wiersze 34. – 35. oraz 38. przedstawiają elementy a z atrybutem koniecznym do utworzenia podpowiedzi. Oprócz tego do strony trzeba także dołączyć plik bootstrap-tooltip.js (stosowny znacznik został umieszczony w wierszu 52.) oraz zainicjować podpowiedzi, używając odpowiedniego selektora i wywołując funkcję tooltip().

339

340

Rozdziaä 12. Korzystanie z gotowych wtyczek

W powyższym przykładzie funkcja tooltip() została wywołana w wierszu 55. Jak widać, w jej wywołaniu zostały podane dodatkowe opcje, określające opóźnienia podpowiedzi. Korzystając z opcji delay, można określić opóźnienie, z jakim podpowiedzi będą wyświetlane (show) oraz ukrywane (hide). Wtyczka używa podanego selektora, dzięki czemu jeśli będziemy chcieli, by niektóre podpowiedzi pojawiały się szybciej lub były widoczne dłużej, to możemy to zrobić, używając innych selektorów i przekazując odpowiednie ustawienia. Koniecznie trzeba pamiętać, że podpowiedzi nie służą do wyświetlania obszernych treści; stworzono je wyłącznie z myślą o dodawaniu dłuższej definicji lub opisu.

Receptura: Stosowanie okienek informacyjnych Wyskakujące okienka informacyjne, określane w terminologii platformy Bootstrap terminem popover, są czymś pośrednim pomiędzy oknami modalnymi i podpowiedziami. Są one wyświetlane po wskazaniu wybranego elementu myszką, podobnie jak podpowiedzi, a jednocześnie mogą zawierać dodatkowe treści, jak okno modalne. Okienka tego typu są przydatne, kiedy chcemy zastosować w prezentowanych treściach wybrany sposób formatowania bądź kiedy okienka te mają się wyróżniać. Listing 12.6 przedstawia prosty przykład zastosowania wyskakujących okienek informacyjnych. Listing 12.6. Prezentowanie danych w okienku informacyjnym 00 01 02 03 04 05 07 08 09 12 13 14 15 16 17 18

19

20

Receptura: Stosowanie okienek informacyjnych 21 Stosowanie okienek informacyjnych 22

23

24

25 26

27 28

29 ChoÊ okienka informacyjne przypominajÈ podpowiedzi, to 30 jednak mogÈ zawieraÊ wiÚcej treĂci.

31

32 Dowiedz siÚ wiÚcej 33 37 o mnie. 38

39 40

41 42 45 48 49 50 55 56

Dodawanie okienka informacyjnego jest niemal równie proste, jak dodawanie podpowiedzi. Różnica polega na odnośniku umieszczonym w wierszach 33. – 37. Jak widać na przykładzie, w elemencie tym zostały umieszczone trzy atrybuty: rel="popover", data-content oraz data-original-title. Atrybut rel informuje wtyczkę, że dany element powinien być obsługiwany jako wyskakujące okienko informacyjne. Pozostałe dwa atrybuty służą do określenia zawartości, która będzie wyświetlana w okienku. Pierwszy z nich zawiera tekst, który zostanie wyświetlony w obszarze treści okienka; natomiast drugi określa nagłówek lub tytuł okienka. Ostatnim fragmentem kodu, na który należy zwrócić uwagę, są wiersze 48. – 49. To w nich do strony dołączane są skrypty bootstrap-tooltip.js oraz bootstrap-popover.js. Wyskakujące okienka wymagają wtyczki obsługującej podpowiedzi.

341

342

Rozdziaä 12. Korzystanie z gotowych wtyczek

Receptura: Ostrzeganie uĔytkownika Kiedy słyszę o ostrzeżeniu, zazwyczaj myślę o niewielkim okienku generowanym przez przeglądarkę, typowym dla starych sposobów testowania aplikacji oraz dla bardzo denerwujących witryn, które w rzeczywistości starają się zainstalować jakieś złośliwe oprogramowanie. Jednak ostrzeżenia stosowane przez platformę Bootstrap są znacznie bardziej przydatne i łatwiejsze do zaakceptowania przez użytkownika. Ostrzeżenia są sekcjami strony, które można wyświetlać w celu przedstawienia pewnych informacji i które można łatwo ukryć. Innym sposobem, w jaki można je sobie wyobrazić, są okna modalne wyświetlane obok pozostałej zawartości strony, a nie ponad nią, i przyciągające uwagę użytkownika. Listing 12.7 przedstawia przykład wyświetlania ostrzeżeń przy użyciu możliwości platformy Bootstrap. Listing 12.7. UĔycie przycisku w celu wyĈwietlania ostrzeĔenia 00 01 02 03 04 05 07 08 09 12 13 14 15 16 17 18

19

20

21 Stosowanie ostrzeĝeñ 22

23

24

25 26

27 28

Kliknij przycisk poniĝej, aby wyĂwietliÊ ostrzeĝenie.

29 WyĂwietl ostrzeĝenie! 30 31

32 33 36 39 40 55 56

Ostrzeżenie prezentowane w tym przykładzie jest łatwe do przygotowania, gdyż większość jego kodu została umieszczona w skrypcie u dołu strony. W wierszu 29. został umieszczony przycisk, którego kliknięcie powoduje wyświetlenie ostrzeżenia. Można go klikać wiele razy, co spowoduje wyświetlenie wielu ostrzeżeń. Wszystko to jest możliwe dzięki funkcji click() wywoływanej w wierszu 42. Wewnątrz funkcji click() jest umieszczony kod, który dodaje kod HTML ostrzeżenia przed elementem div o identyfikatorze content. Dodawany kod zawiera element div, w którego atrybucie class zostały podane następujące klasy: alert, fade oraz in. Określają one zarówno wygląd ostrzeżenia, jak i jego funkcjonalność. Wewnątrz ostrzeżenia został także umieszczony przycisk, w którym użyto klasy close; co ważniejsze, zawiera on także atrybut data-dismiss="alert", który oznacza, że jego kliknięcie spowoduje usunięcie ostrzeżenia. Wewnątrz pojemnika ostrzeżenia wyświetlane są dwa elementy: h3 oraz p (umieszczone w wierszach 48. i 49.). W razie potrzeby w ostrzeżeniach można także umieszczać inne elementy, jednak zaleca się unikanie elementów h1 oraz h2, chyba że będą one używać niestandardowych stylów, gdyż w przeciwnym razie mogą zakłócić wizualną równowagę elementu ostrzeżenia.

Receptura: Przyciski Osoby, które nie miały wcześniej kontaktu z platformą Bootstrap, mogą sądzić, że przyciski nadają się wyłącznie do przesyłania formularzy lub wyzwalania zdarzeń. Jednak Bootstrap sprawia, że zyskują one nowe możliwości. Można je grupować, zmieniać w przyciski stanowe, a nawet używać jako przełączników. Listing 12.8 przedstawia zastosowanie przycisków jako przełączników oraz grupowanie kilku przycisków dzięki wykorzystaniu funkcjonalności przypominającej przyciski opcji.

343

344

Rozdziaä 12. Korzystanie z gotowych wtyczek Listing 12.8. Zastosowanie przycisków do zmiany stylów 00 01 02 03 04 05 07 08 09 14 15 16 17 18 19 20

21

22

23 Stosowanie przycisków 24

25

26

27 28

29

Uĝyj poniĝszego przycisku, by zmieniaÊ style.

30 PrzeïÈcz 32

33

Uĝyj poniĝszych przycisków, by zmieniÊ tekst.

34

Zwyczajny tekst.

35

36 37 Pogrubiony 38 39 40 Kursywa 41 42 43 PodkreĂlony 44 45

46

47

48 49 52 55 56 80 81

W pierwszej kolejności należy zwrócić uwagę na przycisk umieszczony w wierszu 30. Można zauważyć, że do elementu przycisku została dodana klasa określająca jego wygląd oraz atrybut data-toggle="button". Sprawia on, że przycisk nabiera charakteru przełącznika. W wierszu 35. został umieszczony element div; jego wygląd określa podana klasa, a oprócz niej w elemencie umieszczono atrybut data-toggle="buttons-checkbox". Atrybut ten informuje wtyczkę, że przyciski umieszczone wewnątrz elementu mają mieć funkcjonalność pól wyboru, a oprócz tego, że należy je wizualnie zgrupować. Wewnątrz tego elementu div zostały umieszczone trzy przyciski o określonych identyfikatorach. Identyfikatory te zostały następnie użyte w selektorach podczas określania działania poszczególnych przycisków. Wtyczka odpowiedzialna za obsługę przycisków będzie automatycznie dodawać klasę active do każdego przycisku, który w danej chwili będzie wciśnięty. W wierszu 55. do strony zostaje dodany skrypt bootstrap-button.js, odpowiedzialny za tworzenie i obsługę przycisków. W wierszach 57. – 78. został umieszczony kod jQuery, określający czynności wykonywane w momencie kliknięcia przycisków. Jak widać, procedury obsługi kliknięć sprawdzają, czy elementowi została przypisana klasa active. W zależności od tego, czy klasa ta została użyta czy nie, skrypty zastosują odmienne style.

345

346

Rozdziaä 12. Korzystanie z gotowych wtyczek

Receptura: Zwijanie treĈci Treści, które można zwijać, to sekcje strony, które są początkowo ukryte, lecz w razie potrzeby można je wyświetlić. Rozwiązanie to może się przydać podczas tworzenia list najczęściej zadawanych pytań lub koszyka z zakupami na witrynie zajmującej się handlem elektronicznym — wszędzie tam, gdzie konieczne będzie rozwijanie i zwijanie zawartości. Listing 12.9 przedstawia wykorzystanie zwijania treści podczas tworzenia prostej listy pytań i odpowiedzi. Oprócz tego, demonstruje on zwijanie treści w standardowy sposób oraz w sposób charakterystyczny dla akordeonów. Listing 12.9. Prosta strona pytaþ i odpowiedzi 00 01 02 03 04 05 07 08 09 12 13 14 15 16 17

18

19

20 Korzystanie ze zwijanych treĂci 21

22

23

24 25

26 27

Kliknij pytanie, by wyĂwietliÊ odpowiedě:

28 29 1. Gdzie moĝna tego uĝywaÊ? 32

33 Takich zwijanych treĂci moĝna uĝywaÊ wszÚdzie tam, gdzie 34 chcemy wyĂwietlaÊ i chowaÊ zawartoĂÊ strony na ĝÈdanie. 35

36 2. A co jeĂli chciaïbym uĝyÊ przycisku? 39

40 JeĂli chodzi ci o przeïÈcznik, to oczywiĂcie moĝesz 41 przeïÈczaÊ widocznoĂÊ treĂci, uĝywajÈc mechanizmu przeïÈcznika.

Receptura: Zwijanie treĈci 42

43 3. A co z akordeonem? 46

47 W tej czÚĂci strony nie uĝyliĂmy akordeonu, ale spójrz 48 na sekcjÚ poniĝej. 49

50 51

 

52 53

54

55

56 58 Akordeon - odnoĂnik 1 59 60

61

62

63 Akordeony doskonale nadajÈ siÚ do prezentowania 64 wiÚkszych treĂci bÈdě by upewniÊ siÚ, ĝe uĝytkownik 65 bÚdzie siÚ koncentrowaÊ na jednym obszarze. 66

67

68

69

70

71 73 Akordeon - odnoĂnik 2 74 75

76

77

78 Akordeonom moĝna nadawaÊ dowolny wyglÈd. 79 W tym przykïadzie zostaïy jednak wykorzystane 80 domyĂlne style platformy Bootstrap. 81

82

83

84

85 86

87 88 91 93 94 95 96

347

348

Rozdziaä 12. Korzystanie z gotowych wtyczek

Wiersze 29. – 49. zawierają kod przedstawiający sposób tworzenia standardowych treści zwijanych. Używa się w tym celu elementu a z klasą accordion-toggle, atrybutem data-toggle="collapse" oraz atrybutem href, którego wartość wskazuje na pojemnik, który należy rozwinąć po kliknięciu. Do zawartości, która powinna zostać wyświetlona po kliknięciu, należy dodać klasę collapse. Jeśli zostanie ona pominięta, może to spowodować dziwną obsługę kliknięć oraz problemy z wyświetlaniem i ukrywaniem sekcji. W wierszach 53. – 84. został podany kod sekcji zawierającej akordeon. Rozpoczyna się on od elementu div stanowiącego pojemnik dla całej zwijanej zawartości. Duże znaczenie ma atrybut id tego elementu, gdyż będą się do niego odwoływać wszystkie elementy umieszczane wewnątrz akordeonu. W wierszu 54. rozpoczyna się kolejny element div, któremu przypisano klasę accordion-group. Wewnątrz niego zostały umieszczone dwa kolejne elementy div: pierwszy z nich służy do wyświetlania nagłówka, natomiast drugi zawiera treść wyświetlaną po kliknięciu tego nagłówka. W wierszu 56. został umieszczony element odnośnika, któremu przypisano klasę accordion-toggle, atrybut data-toggle="collapse" oraz atrybut dataparent="#accordion" i którego atrybut href wskazuje na treść, która powinna zostać wyświetlona po kliknięciu tego elementu. Wartość atrybutu data-parent powinna odwoływać się do elementu div, w którym dany element został umieszczony i którym w tym przypadku jest element div rozpoczynający się w wierszu 53. W wierszu 61. został umieszczony zwijany element div; przypisano mu także klasy odpowiadające za określenie jego odpowiedniego wyglądu. Wewnątrz niego umieszczony jest kolejny element div, wewnątrz którego została podana treść, która ma być wyświetlona po uaktywnieniu tej części akordeonu. Ta sama struktura kodu została powtórzona w wierszach 69. – 83. i tworzy drugą sekcję akordeonu. I w końcu wiersz 94. zawiera odwołanie do pliku bootstrap-collapse.js.

Receptura: Umieszczanie treĈci w karuzeli Można odnieść wrażenie, że aktualnie każda witryna musi zawierać galerię obrazków prezentujących oferowane produkty pod różnymi kątami bądź dysponować integracją prezentowanych obrazków z witrynami społecznościowymi. Niezależnie od tego, co chcemy robić z obrazkami, jeśli chcemy stworzyć pokaz slajdów lub karuzelę cyklicznie prezentującą treści, platforma Bootstrap dysponuje wtyczką, która może nam w tym pomóc. Listing 12.10 przedstawia prostą karuzelę prezentującą trzy zdjęcia wraz z podpisami. Listing 12.10. Prosta galeria zdjöè stworzona przy uĔyciu karuzeli 00 01 02

Receptura: Umieszczanie treĈci w karuzeli 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

Stosowanie wtyczki karuzeli

Przewijanie karuzeli zostanie wstrzymane po najechaniu na niÈ wskaěnikiem myszy.

JeĂli nie zostanie doïÈczony plik bootstrap-transition.js, to obrazki nie bÚdÈ przewijane, lecz momentalnie zastÚpowane przez kolejny obraz.

W przeglÈdarkach IE obrazki takĝe nie bÚdÈ pïynnie przewijane, lecz momentalnie podmieniane.

Spotkanie programistów!

Któĝ mógï przewidzieÊ, ĝe w tym roku nie bÚdzie T-shirtów.

Przygoda z futbolem.

349

350

Rozdziaä 12. Korzystanie z gotowych wtyczek 60

61 Odkryj Ăwieĝo ĂciÚtÈ trawÚ i ducha gry zespoïowej. 62

63

64

65

66 67

68

Gumowa kaczuszka

69

70 Nigdy nie wÈtp w potÚgÚ gumowej kaczuszki! 71

72

73

74

75 ‹ 77 › 79

80

81 82

83 84

85 86 89 92 93 94 99 100

W wierszach 45. – 79. został umieszczony element div stanowiący pojemnik zawierający treść karuzeli. To właśnie na nim będzie operować wtyczka Bootstrap. Poszczególne elementy div, wewnątrz których zostaną umieszczone obrazki oraz ich podpisy, zostały zapisane w wierszach 47., 56. oraz 65. Każdemu z nich przypisana została klasa item, a w pierwszym dodatkowo także klasa active. Dowolny element, który w momencie wyświetlania strony będzie dysponował klasą active, zostanie wyświetlony. Wiersze 49., 58. oraz 67. zawierają elementy div, którym przypisano klasę carousel-caption. Sposób ich działania dokładnie odpowiada nazwie klasy — powodują one wyświetlenie tekstu poniżej obrazka, białą czcionką na przezroczystym tle (o ile tylko przeglądarka na to pozwala). W przypadku korzystania ze stylów platformy

Receptura: Korzystanie z automatycznego uzupeäniania

Bootstrap zdecydujemy się zapewne na utworzenie tytułów podpisów przy użyciu elementów h4, gdyż w przeciwnym razie konieczne będzie napisanie własnych stylów określających ich wielkość i kolor. Elementy a zapisane w wierszach 75. – 78. służą do dodania do komponentu karuzeli strzałek do przewijania zawartości. Ich postać określa atrybut data-slide. W wierszu 92. zostało umieszczone odwołanie do pliku bootstrap-transition.js, zawierającego bibliotekę animacji, dzięki której zawartość karuzeli jest przewijana. Jeśli plik ten zostanie pominięty, to komponent karuzeli w każdej przeglądarce będzie działał tak samo jak w wersjach Internet Explorera wcześniejszych od 9 — prezentowana zawartość będzie błyskawicznie podmieniana (co za nuda!). W wierszu 93. zostało umieszczone odwołanie do pliku bootstrap-carousel.js. I w końcu w wierszu 96. zostało umieszczone wywołanie odpowiadające za utworzenie komponentu. Jak widać, zawiera ono odwołanie do elementu pojemnika zawierającego cały kod karuzeli oraz wywołanie funkcji carousel().

Receptura: Korzystanie z automatycznego uzupeäniania Ta ostatnia receptura prezentująca możliwości platformy Bootstrap jest poświęcona wtyczce typeahead. Tej doskonałej wtyczki można użyć, by korzystając z niestandardowych atrybutów, zapisać dane, które następnie będą używane w celu ułatwienia użytkownikowi wprowadzania informacji na stronie. Takie rozwiązanie można znaleźć na witrynie naszej ulubionej wyszukiwarki, która stara się odgadnąć, co chcemy wpisać, abyśmy nie musieli wpisywać całego wyrażenia, lecz wybrać je z listy. Listing 12.11 przedstawia możliwości tej wtyczki współpracującej z polem tekstowym. Listing 12.11. Dodawanie funkcjonalnoĈci automatycznego uzupeäniania do pola tekstowego 00 01 02 03 04 05 07 08 09 12 13 14 15 16 17

351

352

Rozdziaä 12. Korzystanie z gotowych wtyczek 18

19

20

21 Stosowanie wtyczki Typeahead 22

23

24

25 26

27 28

Osoby

29 32 33

34 35 38 41 42 57 58

W wierszu 29. rozpoczyna się znacznik pola tekstowego, w którym zastosowano następujące atrybuty: data-provide="typeahead" oraz data-items="5". Pierwszy z nich służy do poinformowania wtyczki, że właśnie na tym polu powinna operować. Z kolei atrybut data-items określa liczbę podpowiedzi, które wtyczka będzie wyświetlać. Domyślnie wyświetlanych może być maksymalnie 8 podpowiedzi, jednak w tym przykładzie liczba ta została ograniczona do 5. Choć do tego elementu można by także dodać jeszcze jeden atrybut, data-source, i podać w nim dane, to jednak w powyższym przykładzie dane zostaną wczytane przy użyciu jQuery, by pokazać sposób wczytywania danych, które mogą być przekazywane dynamicznie.

Podsumowanie

W wierszach 44. – 53. zostaje utworzona zmienna o nazwie names. Jest to zwyczajna tablica wypełniona imionami. Z kolei w wierszu 54. zostało umieszczone wywołanie, które wybiera element pola tekstowego (z wiersza 29., pole to ma atrybut id="people"), a następnie używa funkcji data(), by zapisać w jego atrybucie data-source zawartość zmiennej names.

Podsumowanie Ten rozdział pokazał, że dostępne są przygotowane przez innych programistów opcje i wtyczki, których można używać we własnych projektach i które są całkiem proste, takie jak wtyczki do obsługi przeciągania i upuszczania, bądź całkiem złożone, na przykład pozwalają na operowanie na danych dynamicznych. W rozdziale przedstawionych zostało 11 wtyczek platformy Bootstrap opracowanej przez firmę Twitter oraz przynajmniej jeden sposób na zastosowanie każdej z nich. Dowiedzieliśmy się także, że w internecie można znaleźć wiele wtyczek, lecz niekoniecznie będziemy chcieli im zaufać bądź ich używać. Jeśli czytelnikowi podobało się korzystanie z platformy Bootstrap, to może zajrzeć na stronę http://twitter.github.com/bootstrap/, zawierającą jej oficjalną dokumentację, i poznać wszystkie możliwości platformy.

353

354

Rozdziaä 12. Korzystanie z gotowych wtyczek

Skorowidz A adres URL, 226 AJAX, 18, 115 akapit, 25, 178 akordeon, 153 metody, 158 obsługa zdarzeń, 157 określanie opcji, 155 określanie wyglądu, 154 algorytm Bresenhama, 89 animacja, 149 dodawania klas CSS, 208 kolorów, 204 prostokąta, 202 przejścia, 229, 232 animacje CSS3, 232 domyślne, 229 umieszczone w kolejce, 215 aplikacje sieciowe, 36 arkusz stylów CSS, 123 atrybut, 65 class, 25, 232, 251 data-ajax, 229 data-back-btn-text, 238 data-dismiss, 343 data-filter, 297 data-iconpos, 268 data-inset, 289 data-items, 352 data-myattribute, 35 data-myns-role, 256 data-prefatch, 253

data-prefetch, 226 data-provide, 352 data-role, 271, 282 data-slide, 351 data-source, 352 data-split-icon, 291 data-spy, 336 data-title, 224 data-toggle, 338 data-transition, 230 data-type, 282 href, 238, 348 id, 25, 222, 348 lang, 65 name, 75 placeholder, 272 rel, 65, 341 style, 125 type, 276 atrybuty niestandardowe, 35 automatyczne uzupełnianie, 159, 351 obsługa zdarzeń, 161 określanie wyglądu, 161 określanie opcji, 162 wywoływanie metod, 164

B biblioteka jQuery, 18 jQuery Core, 202, 208 jQuery Mobile, 19, 219 jQuery UI, 18 blokowanie funkcji zwrotnej, 315

356

jQuery, jQuery UI oraz jQuery Mobile. Receptury

błąd 404, 103 obsługi żądania, 107 błędy HTTP, 109 serwera, 107

C CDN, Content Delivery Network, 25, 123 CSS, 18, 124 czas oczekiwania na odpowiedź, 111 czynności wykonywane na wtyczce, 310

D dane JSON, 103 JSONP, 117 skojarzone z węzłami, 255 tekstowe, 271 XML, 115 definiowanie wtyczki, 302 dodawanie efektów graficznych, 206 elementów interaktywnych, 123 funkcji do prototypu, 303 funkcji zwrotnych, 323 klas, 61 klas CSS, 208 kodu HTML, 68 menu do stopki, 264 paska nawigacyjnego, 265 podpowiedzi, 338 stopek, 238 treści, 70 wyniku funkcji, 68 zawartości, 67 dokumentacja API jQuery, 20 jQuery, 45 jQuery Mobile, 20 jQuery UI, 20 Zurb Foundation, 20

dołączanie elementów, 72 funkcji, 302 wtyczki, 303 DOM, 35 dostęp do elementów HTML, 31 drzewo DOM, 35, 73, 225, 255 HTML, 38 działanie selektora hover, 54 dzielenie tekstu, 57 dziennik zdarzeń, 116

E efekty animacji, 149 graficzne, 206 niestandardowe przejść, 231 przejść CSS3, 231 element a, 348 body, 336 button, 165 canvas, 87 div, 54, 105, 153, 240, 350 fieldset, 282, 286 img, 294 input, 276 li, 49, 94 script, 118 select, 142, 265, 280, 284 span, 47, 48 title, 223 ul, 291, 338 elementy DOM, 68 formularzy, 271, 297 HTML atrybuty, 65 dodawanie kodu, 68 kopiowanie, 73 przeciąganie, 124 przenoszenie, 73 upuszczanie, 130

Skorowidz

usuwanie, 78 właściwości, 65 właściwość innerHTML, 66 zagnieżdżanie, 80 zmienianie kolejności, 76, 135 zmienianie wielkości, 148 interaktywne, 123 listy, 292–297 noscript, 63 o zmiennej wielkości, 148–151 opcje, 149 przechwytywanie zdarzeń, 150 style, 149 wywoływanie metod, 151 podrzędne HTML, 71 sortowalne, 135–141 opcje, 137 przechwytywanie zdarzeń, 136 style, 136 wywoływanie metod, 140 tablicy, 208 zwijane, 268, 270 emulacja selektora hover, 54

F filtrowanie elementów, 51 listy, 296 format JSON, 39, 103, 115 formularz serializacja zawartości, 43 weryfikacja danych, 113 funkcja $, 26 $.each, 208 add(), 47 addClass(), 61 after(), 76 ajax(), 106, 109 alert(), 41, 330 always(), 106, 321–324 animate, 205 append(), 67, 68 appendTo(), 67, 72

apply(), 311, 317, 325 attr(), 65 autocomplete(), 160 before(), 76 bind(), 87 carousel(), 351 changePage, 252 changePage(), 252 children(), 50 click(), 343 clone(), 73 contains(), 55 css(), 26, 57, 305 data(), 36, 219, 255 delegate(), 95, 96 dequeue, 215 detach(), 72, 78 die(), 93 disable(), 315 document.getElementById(), 53 done(), 106, 110, 254, 321 each(), 28 effect(), 208 empty(), 78 end(), 48 extend(), 41 extension(), 55 fail(), 106–109, 112, 321 filter(), 48, 53 find(), 49 fireWith(), 316, 325 get(), 32, 103 getArray(), 32 grep(), 33 has(), 51 helper(), 311 hover(), 55 html(), 26, 57, 66, 99 inArray(), 41 index(), 32 insertAfter(), 76 insertBefore(), 76 is(), 51 isAbsoluteUrl(), 259 isEmptyObject(), 41

357

358

jQuery, jQuery UI oraz jQuery Mobile. Receptury

funkcja isSameDomain(), 259 jqmData(), 219, 255 length(), 34 live(), 93 load(), 104 loadPage(), 254 lock(), 315 makeAbsolutePath(), 259 makeArray(), 32 makeUrlAbsolute(), 259 map(), 30, 57 notify(), 323 notifyWith(), 326 off(), 96 offset(), 89 on(), 96, 98 parseUrl(), 256 position(), 89 prepend(), 70 prependTo(), 70 progress(), 323 promise(), 214, 319, 321 prop(), 65 proxy(), 98 querySelectorAll(), 52 queue(), 215 reject(), 322 rejectWith(), 324 remove(), 78 removeClass(), 62 removeData(), 38 resolve(), 320 resolveWith(), 324 serialize(), 44 serializeArray(), 44 setTimeout, 320 split(), 57 swing, 206, 211 then(), 321 tooltip(), 340 type(), 41 typeof(), 41 unbind(), 87

unwrap(), 81 wrap(), 80 wrapAll(), 82 wrapInner(), 81 funkcje biblioteki jQuery UI, 206 pomocnicze, 39, 256 przejścia, 206, 210 zwrotne, 118, 314–317, 323

G galeria zdjęć, 348 generowanie kodu HTML, 71 nazw klas, 63 przycisku Wstecz, 237 grupowanie elementów formularzy, 297 elementów zwijanych, 270 treści, 153 zawartości, 261

H HTML, 18 HTML5, 25

I ikony, 211, 240, 268 implementacja obietnicy, 214 serwera, 102 indeks akapitów, 33 informacja o położeniu, 32 o postępie prac, 185, 326 o wersji, 27 instalacja jQuery UI, 123 instrukcja return, 30 interfejs Promise, 321 użytkownika, 121

Skorowidz

J JavaScript, 17 język biblioteki jQuery, 101 CSS, 18 HTML, 18, 115 HTML5, 25 JavaScript, 17 Scala, 314 serwera, 101 XHTML, 25 XML, 115 jQuery, 18 jQuery Core, 202, 208 jQuery Mobile, 18, 219, 256 jQuery Tools, 20 jQuery UI, 18, 123, 208 JSON, JavaScript Object Notation, 39, 103 JSONP, 118

K kalendarz, 169 obsługa zdarzeń, 176 określanie opcji, 171 określanie wyglądu, 170 wywoływanie metod, 177 karty, 191 obsługa zdarzeń, 194 określanie opcji, 193 określanie wyglądu, 192 wywoływanie metod, 196 karty przełączane, 336 karuzela, 348 klasa accordion-toggle, 348 active, 334, 336, 350 alert, 343 carousel-caption, 350 collapse, 348 fade, 343 in, 343 item, 350 my-toggle, 209

navbar, 331 ui-bar, 262 ui-bar-b, 262 ui-hidden-accessible, 272 ui-li-icon, 294 ui-resizable, 149, 202 klasy CSS, 208, 262 klawiatura ekranowa, 275 kod serwera, 101 kody błędów HTTP, 109 kolejka animacji, 215 fx, 216 kolumny, 249 komponent accordion, 270 collapsible, 268 draggable, 124–129 opcje, 126–129 przechwytywanie zdarzeń, 129 style, 125 wywoływanie metod, 130 droppable, 130–134 opcje, 133 przechwytywanie zdarzeń, 132 style, 132 wywoływanie metod, 134 resizable, Patrz elementy o zmiennej wielkości selectable, 143–146 opcje, 144 przechwytywanie zdarzeń, 144 style, 144 wywoływanie metod, 146 sortable, Patrz elementy sortowalne komponenty widżetów, 153, 197 komunikacja z serwerem, 101 komunikaty o wczytywaniu stron, 227 konflikt nazw, 26 konflikt nazw wtyczek, 308 kopiowanie elementów, 73 korzeń, root, 93

359

360

jQuery, jQuery UI oraz jQuery Mobile. Receptury

L liczba akapitów, 35 lista jako przełącznik, 279 rozwijana, 280, 284 wypunktowana, 135, 191 zagnieżdżona, 289

ã łańcuch wywołań, 304 łączenie list wypunktowanych, 141 obiektów, 41 tablic, 41 wtyczek i funkcji, 304 zbiorów elementów, 47

M manipulacje na drzewie DOM, 73 mapy atrybutów, 71 menu rozwijane, 332 metaznacznik viewport, 220 metody elementów o zmiennej wielkości, 151 elementów sortowalnych, 140 kalendarza, 177 komponentów draggable, 131 droppable, 134 selectable, 146 okien dialogowych, 184 paska postępu, 187 suwaków, 190 widżetu akordeonu, 159 automatycznego uzupełniania, 164 button, 168 tabs, 196 miniaturka, thumbnail, 293 modyfikowanie elementów tablicy, 30 stron, 61 właściwości elementów HTML, 65

N nagłówki grup, 154 HTTP, 112 narzędzie Firebug, 254 ThemeRoller, 192, 270 nawiasy kwadratowe, 32 nawigacja, 219 pomiędzy stronami, 221 po stronie, 191 nazwa klasy, 64 Node.js, 101

O obiekt Callbacks, 314 Deferred, 106, 214, 314, 323 document, 25 Promise, 106, 319 this, 304 XmlHttpRequest, 117 obiekty obserwowalne, 213 obietnica, 106, 213, 320 obsługa błędów, 101 błędów serwera, 107 przekierowań, 110 tablic, 41 zdarzeń, 23, 85–99 AJAX, 116 akordeonu, 157 elementów o zmiennej wielkości, 150 elementów sortowalnych, 136 kalendarza, 176 komponentów draggable, 129 komponentów droppable, 132 komponentów selectable, 144 okien dialogowych, 181 paska postępu, 186 przycisków, 167 suwaka, 189 upuszczania, 131

Skorowidz

urządzeń przenośnych, 233 widżetu automatycznego uzupełniania, 161 widżetu tabs, 194 żądań, 105 żądań HTTP, 102 odczyt adresów URL, 256 danych JSONP, 117 danych XML, 115 niestandardowych atrybutów, 35 odłączanie elementów, 72 odnośnik do strony, 221, 224, 228 odpowiedź serwera, 111 odświeżanie wtyczki, 334 odwołanie do biblioteki jQuery, 24, 123 do zewnętrznych stron, 228 okienka informacyjne, 340 okna dialogowe, 178 obsługa zdarzeń, 181 określanie wyglądu, 179 opcje, 180, 181 wywoływanie metod, 184 okno modalne, 330 opcja altField, 171 altFormat, 172 beforeShow, 176 beforeShowDay, 176 buttonText, 172 closeText, 173 currentText, 173 duration, 174 nextText, 173 numberOfMonths, 174 showAnim, 175 showButtonPanel, 173 showOtherMonths, 175 stepMonth, 175 yearRange, 176 opcje elementów o zmiennej wielkości, 149 sortowalnych, 136

funkcji changePage(), 252 kalendarza, 171 komponentów draggable, 126 droppable, 132 selectable, 144 okna dialogowego, 180 paska postępu, 186 przycisków, 167 widżetu akordeonu, 156, 157 automatycznego uzupełniania, 161 kart, 193 slider, 189 tabs, 193, 194 ostrzeganie użytkownika, 342

P para klucz-wartość, 44 nazwa-wartość, 39 parametry domyślne, 307 opcjonalne, 307 parametryzacja wtyczek, 306 pasek menu, 264 narzędzi, 261 nawigacyjny, 265–267 ostrzeżenia, 263 postępu, 185 obsługa zdarzeń, 186 określanie wyglądu, 186 opcje, 186 wywoływanie metod, 187 pętla for, 28, 29 platforma Bootstrap, 20, 329, 353 plik 01-app.js, 101 bootstrap-button.js, 345 bootstrap-carousel.js, 351 bootstrap-collapse.js, 348 bootstrap-dropdown.js, 334 bootstrap-popover.js, 341

361

362

jQuery, jQuery UI oraz jQuery Mobile. Receptury

plik bootstrap-tab.js, 338 bootstrap-tooltip.js, 341 bootstrap-transition.js, 351 respond.mini.js, 332 pliki CSS, 124, 201 HTML, 221 pobieranie danych, 103 danych formularza, 43 elementów, 32, 57 liczb, 187 tablic, 31 podpowiedź, 160, 338 podział listy na kolumny, 290 pola formularzy, 271, 275, 279 wyboru, 282 z atrybutami, 274 pole do wprowadzania hasła, 277 do wyszukiwania, 278 tekstowe wielowierszowe, 273 typu range, 279 położenie elementu, 32 poszukiwanie strony, 108 powielanie kodu, 327 procedury obsługi zdarzeń, 93, 129 przechowywanie danych, 36 przeciąganie elementów, 124 przekazywanie funkcji, 63 kontekstu, 316, 324, 326 nagłówków HTTP, 112 obiektu, 27 zdarzeń, event delegation, 93, 95 przekierowania, 110 przekształcanie akapitu, 178 elementów h3, 153 elementów w przyciski, 165 elementu div, 153, 185, 187 listy elementów, 165, 191

listy w komponent, 135, 146 obiektu w tablicę, 31 przełączanie aktywnej karty, 337 przełącznik, 279 przesuwanie elementów, 76, 205 przesyłanie danych z formularza, 114 żądań, 116 przewijanie tekstu, 242 przycisk Wstecz, 224, 237 przyciski, 165, 343 metody, 168 obsługa zdarzeń, 167 opcje, 167, 280 określanie wyglądu, 166 przyciski wyświetlające stopkę, 244 pseudoselektory, 52

R rodzaje pól formularzy, 271 rozszerzanie obiektów, 41 rozwijanie zawartości, 346 rysowanie funkcji przejścia, 210

S schemat kolorów, 247 selektor hover, 54 selektory CSS, 26 CSS3, 26 dynamiczne, 54 własne, 57 separacja elementów, 48 kodu HTML i JavaScript, 25 serializacja danych, 43 serwer CDN, 25 plików, 103 WWW, 101 serwery pamięci podręcznej, 111 serwery pośredniczące, 111 skrypt, Patrz plik

Skorowidz

skrypt wczytujący strony, 253 słabe typowanie, 31 słowo kluczowe return, 305 sortowanie elementów, 138, 141 sprawdzanie obiektu jQuery, 27 Stack Overflow, 20 standard ISO 8601, 172 sterowanie realizacją kodu, 321 wtyczkami, 308 stopka, 238–244 grupa przycisków, 240 położenie, 242 ukrywanie, 244 w trybie pełnoekranowym, 246 wyświetlanie, 239, 241 stosowanie obiektów Promise, 321 okienek informacyjnych, 340 pól kalendarzy, 273 rozwijanego menu, 332 tematów, 247 wtyczki ScrollSpy, 334 strony zewnętrzne, 224, 228 struktura drzewiasta, 141 style elementów o zmiennej wielkości, 149 elementów sortowalnych, 136 komponentów, 201 draggable, 125 droppable, 132 selectable, 144 sugerowanie wartości, 159 suwak, 187 obsługa zdarzeń, 189 określanie wyglądu, 188 opcje, 189 wprowadzanie liczb, 278 wywoływanie metod, 190 symulacja akordeonu, 270

ć ścieżka systemowa, 102

T tablice przeglądanie zawartości, 29, 41 przetwarzanie elementów, 30 wyszukiwanie elementu, 33 technologia AJAX, 92, 225–228 temat, theme, 247 tematy graficzne, 192, 201 testowanie kodu HTML, 36 możliwości przeglądarek, 44 typów danych, 39 treść karuzeli, 350 tryb pełnoekranowy, 246 tworzenie animacji, 202 elementu sortowalnego, 137 komponentu droppable, 133 komponentu resizable, 149 komponentu sortable, 136 listy wypunktowanej, 71 łańcucha wywołań, 304 odnośników do stron zewnętrznych, 221 parametrów domyślnych, 307 paska narzędzi, 262 podpowiedzi, 339 przełącznika, 280 przycisków, 165 rozwijanego menu, 334 systemu nawigacyjnego, 332 tablicy, 57 treści zwijanych, 348 wielu kolumn, 249 własnego tematu, 202 własnych selektorów, 57 wtyczek, 301 wtyczek kontekstowych, 303 wtyczki tworzącej wtyczki, 311 typy zmiennych, 39 tytuł elementu, 223

363

364

jQuery, jQuery UI oraz jQuery Mobile. Receptury

U udostępnianie wielu stron, 221 ukrywanie elementów, 205 stopki, 244 treści, 62, 268 umieszczanie treści w karuzeli, 348 upuszczanie elementów, 130 urządzenia przenośne, 199, 233 usuwanie atrybutu, 39 danych, 38 elementów, 78 elementów otaczających, 80 klas, 62

W wczytywanie kodu HTML, 104 kodu XML, 115 stron, 227, 253 zawartości, 253 zewnętrznych stron, 224, 226 wersja biblioteki, 27 wersje pomocnicze, minor versions, 25 weryfikacja danych formularza, 113 węzły drzewa DOM, 255 widżet, 153 accordion, 168, 191 akordeonu, 153 automatycznego uzupełniania, 159 button, 168 buttonset, 168 datepicker, 169, 173, 177 dialog, 181 kart, 191 okna dialogowego, 180 progressbar, 185, 186, 187 przycisków, 167 slider, 187, 189 tabs, 193, 194 wizualizacja zdarzeń, 87 właściwości obiektu zwracanego, 259

właściwość, 65 ajax, 45 browser, 45 context, 59 innerHTML, 66 maxTransitionWidth, 232 opacity, 45 support, 45 touchOverflowEnabled, 244 which, 90 xhr.status, 109 włączanie komunikatów, 227 wprowadzanie dat, 273 liczb, 278 współczynnik proporcji elementu, 150 wstawianie elementów, 75 wtyczka, 299 Bootstrap, 350 modal, 330 Plugin, 309, 311, 313 ScrollSpy, 334, 336 typeahead, 351 wtyczki jQuery UI, 123 wybieranie akapitów, 33, 48 daty, 169 elementów, 26, 47–60, 282 elementów podrzędnych, 49 jednego elementu, 280 pól formularzy, 52 tekstu, 55 wybranie elementów, 48 wygaszanie elementów, 205 wygląd akordeonu, 154 grupy przycisków, 168 kalendarza, 170 kart, 192 komponentów, 125, 201 okna dialogowego, 179 paska postępu, 186 przycisków, 166 suwaka, 188 widżetu automatycznego uzupełniania, 161

Skorowidz

wyłączanie jQuery Mobile, 286 wyrażenie $(this), 98 wyróżnianie słowa, 56 wyświetlanie elementów formularzy, 297 funkcji przejścia, 210 grup przycisków, 280 grupy pól, 282 grupy przycisków, 240 ikon, 211, 268 ikon na pasku, 267 kodu HTML, 105 komunikatów, 227 liczby elementów, 292 list elementów, 288 listy, 279 miniaturek, 293 nagłówków, 112 nagłówków w listach, 291 okna modalnego, 330 ostrzeżenia, 342 paska ostrzeżenia, 263 pasków narzędzi, 261 podpowiedzi, 338 pól, 277 pól formularzy, 271, 275 standardowych pól, 286 stopki, 239–244 strony, 220, 223 treści, 268 typów zmiennych, 39 wierszy w pasku, 266 zdarzeń, 89, 117 wywołanie metody, 309 wtyczki, 322 zwrotne, callback, 314

X XHR, XmlHttpRequest, 117 XHTML, 25 XML, 115

Z zabezpieczanie obiektu Deferred, 319 obiektu obietnicy, 320 zagnieżdżanie elementów, 80 grupy akapitów, 82 list, 289 selektorów, 53 zawartości akapitu, 81 zakres wyboru, 59 zapisywanie danych, 36 zastępowanie kodu HTML, 66 zastosowanie funkcji fireWith(), 316 obiektu Callbacks, 314 przycisków, 344 zawartość strony, 221, 222 zaznaczanie elementów, 143 listy wypunktowanej, 142 w strukturze drzewiastej, 146 zdarzenia, 85–99 click, 23, 96 dragcreate, 129 jQuery Mobile, 233–236 zdarzenia związane z akordeonem, 157 automatycznym uzupełnianiem, 161 elementami li, 95 elementami o zmiennej wielkości, 150 elementami sortowalnymi, 136 formularzem, 91 kalendarzem, 176 kartami, 194, 195 klawiaturą, 89 komponentami draggable, 129 komponentami droppable, 130, 132 komponentami selectable, 144 myszą, 86 oknami dialogowymi, 181, 183 paskiem postępu, 186 przewijaniem strony, 92 przyciskami, 167 suwakiem, 189 żądaniami asynchronicznymi, 117

365

366

jQuery, jQuery UI oraz jQuery Mobile. Receptury

zdarzenie blur, 92 change, 92, 265 document.ready(), 264 focus, 92 hidden, 330 keydown, 89 keypressed, 89 keyup, 89 mousedown, 87 mouseenter, 87 mouseleave, 87 mousemove, 87 mouseout, 87 mouseover, 87 mouseup, 87 onClose, 177 onSelect, 177 pageinit, 264 ready, 25 vclick, 237 zestawy kolorów, 270 zewnętrzne pliki JavaScript, 332 zmienianie akapitów, 25 atrybutów, 75 kodu HTML, 215 kolejności elementów, 135 kolorów, 204 kontekstu wykonania funkcji, 98

schematu kolorów, 247 strony z poziomu kodu, 251 stylów, 344 tematu, 248 tytułu elementu, 223 wielkości elementów, 148 właściwości atrybutów, 65 właściwości CSS, 25 właściwości elementów, 65 wyglądu komponentów, 201 zmienna $, 26 znak $, 26, 302 ?, 119 zwijanie grupy, 154 treści, 346 zwracanie obiektu Deferred, 318 Promise, 319

ē żądania asynchroniczne, 118, 256 żądanie DELETE, 103 GET, 103 POST, 103 PUT, 103

---

2011-Head First jQuery

Read more

Vijay J. - PHP i jQuery. Receptury

Read more

jQuery w akcji

Read more

Crespo G. - Responsive Web Design z jQuery

Read more

Majkowski W jQuery Tworzenie animowanych witryn internetowych

Read more

JavaScript i jQuery Interaktywne strony WWW dla kazdego

Read more

jQuery. Tworzenie animowanych witryn internetowych (2013) - Wojciech Majkowski

Read more

JavaScript i jQuery Interaktywne strony WWW dla kazdego

Read more

Chaffer, Karl Swedberg, John Resig - jQuery 1.3. Wprowadzenie

Read more

Complete UI Modlist v1.1

Read more

Complete UI Modlist v4.0

Read more

Complete UI Modlist v2.0

Read more

t-mobile lipiec 2011

Read more

Patterson James Jonge Peter de - Droga przy plazy

Read more

Patterson James, Jonge Peter de - Droga przy plazy

Read more

Long J. - Spring. Receptury

Read more

Patterson James, Jonge Peter de Droga przy plazy

Read more

Patterson James, Jonge Peter de Droga przy plazy

Read more

de Jonge A. - Google App Engine. Tworzenie wydajnych aplikacji w Javie

Read more

t-mobile listopad 20

Read more

t-mobile wrzesien 2011

Read more

Build Mobile Websites

Read more

Head First Mobile Web

Read more

t-mobile pazdziernik 2011

Read more

t-mobile sierpien 2011

Read more

T-Mobile Internet

Read more

T-Mobile Travel&Surf

Read more

2011-Head First Mobile Web

Read more

Darwin I. F. - Android Receptury

Read more

ONENOTE MOBILE QUICK START GUIDE

Read more

Recommend Documents

2011-Head First jQuery

---

Vijay J. - PHP i jQuery. Receptury

---

jQuery w akcji

---

Crespo G. - Responsive Web Design z jQuery

---

Majkowski W jQuery Tworzenie animowanych witryn internetowych

---

JavaScript i jQuery Interaktywne strony WWW dla kazdego

---

jQuery. Tworzenie animowanych witryn internetowych (2013) - Wojciech Majkowski

---

JavaScript i jQuery Interaktywne strony WWW dla kazdego

---

Chaffer, Karl Swedberg, John Resig - jQuery 1.3. Wprowadzenie

---

Complete UI Modlist v1.1

---

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

---

Login with Facebook Login with Google