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++) {