Back.document.background.src
Z kolei w przypadku Netscape Navigatora odwołujemy się do obiektu dokumentu w warstwie. Ponieważ warstwa nazywa się Back, dostanie się do odpowiedniego obiektu Image wygląda tak:
top.Back.document.layers["Back"].document.images[0].src
Kiedy odpowiednia składnia zostanie już określona, możemy ustawić ścieżkę we właściwości src obrazka backImgs, stosując backgroundIdx. Warto dodać, nie po raz pierwszy używamy takiej iteracji. Podobne przykłady znajdziemy w rozdziałach 3. i 8. Teraz użytkownik może już cyklicznie przeglądać obrazki tła – potrzebujemy podobnego rozwiązania dla ikon. Tutaj właśnie użyjemy funkcji nextIcons() z wierszy 52–68:
function nextIcons() {
for (var i = bRef.iconNum * iconIdx; i < (bRef.iconNum * iconIdx) +
bRef.iconNum; i++) {
if (i < bRef.icons.length && !onCard(i)) {
bRef.hideSlide(bRef.icons[i]);
251 Rozdział 10 - Elektroniczne życzenia: poczta elektroniczna metodą przenieś i upuść
}
}
iconIdx = (iconIdx >= (bRef.icons.length / bRef.iconNum) - 1 ? 0 :
iconIdx + 1);
for (var i = bRef.iconNum * iconIdx; i < (bRef.iconNum * iconIdx) +
bRef.iconNum; i++) {
if (i < bRef.icons.length) {
bRef.showSlide(bRef.icons[i]);
}
else { break; }
}
}
Użytkownik przegląda ikony tak jak wcześniej tła, ale tym razem chodzi o coś więcej, niż tylko zmienianie właściwości src pojedynczego obrazka. Zamiast tego każda ikona jest osobnym obrazkiem na osobnej warstwie. Wobec tego kliknięcie przycisku Ikony -> powoduje nieco bardziej złożoną akcję. Nie tylko musimy ukryć wszystkie warstwy obecnie widoczne, ale też zdecydować, które warstwy pokazać, przy czym musimy to wszystko robić też grupami.
Nie powinno być tak, żeby użytkownik musiał klikać 20 razy w celu zobaczenia 20 kolejnych ikon. Może to być nużącej, a przy tym będziemy marnować dostępną przestrzeń okna przeglądarki. Jak na obrazkach na początku tego rozdziału widać, zdecydowano się wyświetlać ikony w czteroelementowych grupach. Jakąkolwiek liczbę wybierzemy, będzie ona zapisywana w zmiennej iconNum ustawianej w wierszu 24 pliku back.html. Tym razem jesteśmy w pliku font.html, więc odwołanie ma postać top.Back.iconNum. Chodzi o wyświetlenie iconNum ikon przy każdym kliknięciu przycisku Ikony -> . Jeśli mamy 20 ikon, użytkownik będzie oczekiwał pięciu grup ikon. Oczywiście chcemy też ułatwić dodawanie i odejmowanie ikon. Jeśli usuwamy jedną ikonę, użytkownik zobaczy cztery grupy czteroikonowe i
jedną grupę trójelementową. Nie
musimy dokonywać natomiast żadnych zmian w
funkcji
nextIcons().
Rzecz jest całkiem łatwa. Zaczynamy od pierwszej czwórki, potem ją ukrywamy i wyświetlamy następną, aż nam zbraknie ikon. Wtedy zaczynamy znów od początku. Można wyjaśnić to jeszcze prościej: ukrywamy cztery poprzednie ikony, pokazujemy cztery następne. Przyjrzyjmy się teraz sformułowaniu tego zdania w JavaScripcie. Do identyfikacji poszczególnych grup używamy zmiennej iconIdx, początkowo ustawionej na 0. Pierwsza grupa związana jest właśnie z wartością 0, druga z wartością 1, i tak dalej.
Kiedy użytkownik klika Ikony -> , musimy ukryć wszystkie ikony z grupy związanej z bieżącą wartością iconIdx: for (var i = bRef.iconNum * iconIdx; i < (bRef.iconNum * iconIdx) +
bRef.iconNum; i++) {
if (i < bRef.icons.length && !onCard(i)) {
bRef.hideSlide(bRef.icons[i]);
}
}
Zmienna i ustawiana jest na iconNum * iconIdx. i, będzie zwiększana o 1, póki nie przekroczy wartości (iconNum
* iconIdx) + iconNum. Jeśli ktoś ma wątpliwości, niech zastanowi się, co dzieje się po zakończeniu ładowania dokumentu. iconNum równa jest 4, iconIdx równa jest 0. Znaczy to, że przy pierwszym wywołaniu funkcji i –
przybierze wartości 0, 1, 2 i 3. Następnym razem iconIdx równa będzie 1, więc i przybierze wartości 4, 5, 6 i 7. I tak dalej.
Zmienna i jest liczbą całkowitą, która będzie używana do sięgania do elementu z tablicy icons. Dlaczego? Każda ikona ma przecież własną warstwę. Kod zawarty w pliku back.html nazywa wszystkie warstwy zgodnie z elementami tablicy icons. Na przykład icons[0] odnosi się do warstwy bear.
Pozostaje teraz ukryć warstwy 0, 1, 2 i 3 – chyba że użytkownik przeciągnął którąś z nich na kartkę z życzeniami.
Zajmuje się tym funkcja onCard(), którą wkrótce omówimy. Załóżmy na razie, że nie zostały przeniesione jeszcze żadne ikony, bo uprości nam to dalszą analizę funkcji. Wywołujemy po prostu funkcję hideSlide z pliku back.html i przekazujemy jej nazwę odpowiedniej warstwy, którą identyfikujemy przez i:
bRef.hideSlide(bRef.icons[i]);
Ikon poprzednich już nie ma, teraz musimy pokazać następną grupę. Zanim jednak to zrobimy, upewnimy się, że nie jesteśmy już przy ostatniej grupie. Jeśli tak, ustawiamy iconIdx ponownie na 0. W przeciwnym wypadku powiększamy iconIdx o 1. Oto wiersze 59–60:
iconIdx = (iconIdx >= (bRef.icons.length / bRef.iconNum) - 1 ? 0 :
iconIdx + 1);
Jeszcze jedna iteracja i widoczna będzie następna grupa. Wiersze 61–67 zawierają pętlę for, która zajmuje się pokazaniem ikon:
for (var i = bRef.iconNum * iconIdx; i < (bRef.iconNum * iconIdx) +
252
bRef.iconNum; i++) {
W trosce o komfort korzystania z naszego serwisu chcemy dostarczaÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ Ci coraz lepsze usĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂugi. By mĂÂĂÂÄÂĂÂÄÂÄšÄÄÂĂÂc to robiÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ prosimy, abyĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂ wyraziĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂ zgodÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ na dopasowanie treĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂci marketingowych do Twoich zachowaĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂ w serwisie. Zgoda ta pozwoli nam czÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂÂĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂciowo finansowaÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ rozwĂÂĂÂÄÂĂÂÄÂÄšÄÄÂĂÂj ĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂwiadczonych usĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂug.
PamiÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂÂtaj, ĂÂĂÂĂĹĄĂÂÄÂÄšÄĂĹĄĂÂe dbamy o TwojÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ prywatnoĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂÂ. Nie zwiÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂÂkszamy zakresu naszych uprawnieĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂ bez Twojej zgody. Zadbamy rĂÂĂÂÄÂĂÂÄÂÄšÄÄÂĂÂwnieĂÂĂÂĂĹĄĂÂÄÂÄšÄĂĹĄĂ o bezpieczeĂÂĂÂĂĹĄĂÂĂÂĂÂÄÂĂÂstwo Twoich danych. WyraĂÂĂÂĂĹĄĂÂÄÂÄšÄĂĹĄĂÂonÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ zgodÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ moĂÂĂÂĂĹĄĂÂÄÂÄšÄĂĹĄĂÂesz cofnÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ ÄÂĂÂÄÂĂÂĂÂĂÂÄÂĂ w kaĂÂĂÂĂĹĄĂÂÄÂÄšÄĂĹĄĂÂdej chwili.