Jeśli potrafimy bez ściągawki wykonać zwijanie i rozwijanie akapitu z rozszerzona treścią, możemy być z siebie dumni. Oznacza to, że zrozumieliśmy istotę onclick i zmiany właściwości stylów danych tagów w dokumencie HTML. Umiemy też pobrać zawartość każdego znacznika HTML. W tym odcinku nauczymy się uzyskiwać efekty, które już znamy, lecz trochę innymi sposobami.
Powtórka z rozrywki
Zacznijmy od tego, co już wiemy. Mamy wiec
dokument HTML (listing 1). Tym razem zmieni się
w nim jeden element, aczkolwiek nie powinien
sprawić problemów.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac. wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Trochę teorii
Klikając więcej lub schowaj skrypt wie jaki paragraf
pokazać bądź ukryć. Zapisane jest to
w funkcji {stala}PokazAkapit{/stala}:
var akapit = document.getElementById(\'more\');
Dowiadujemy się z niego, ze będziemy operować
na akapicie o id=\”more\”, na co wskazuje użycie
w {stala}document.getElementById();{/stala} argumentu \”more\”.
Tym sposobem jedna funkcja, czyli kilkanaście linijek
kodu, odpowiada za zwiniecie tylko jednego akapitu.
Można nadać jej większą uniwersalność, by
zwijał się i rozwijał dowolny akapit o określonym id,
jaki podamy przy wywołaniu zdarzenia onclick.
Aby to zrealizować, nasza funkcja musi wiedzieć,
który akapit ma zwinąć i rozwinąć.
Trzeba
wiec jej podać id paragrafu
{html}
{/html}, jaki ma się
pokazać lub schować po
kliknięciu linka za to odpowiedzialnego.
Podobna funkcjonalność
można uzyskać poprzez
przekazanie wspomnianego
identyfikatora akapitu jako
argumentu funkcji. Przypomnijmy
wiec, kiedy wywołujemy
{stala}PokazAkapit{/stala}:
wiecej
A dokładniej w tym miejscu:
onclick=\"PokazAkapit();\"
Dodanie takiego kawałka kodu, jako atrybutu jakiegoś
tagu, powoduje wywołanie funkcji {stala}PokazAkapit{/stala}
po kliknięciu właśnie tego tagu. W aktualnej
postaci funkcja {stala}PokazAkapit{/stala} sama decyduje, co pokazać.
W końcu rozkazaliśmy jej poprzez wpisanie
kilku linijek zwijać i rozwijać akapit o id=\”more\”.
Dodanie nowego akapitu
Gdy chcemy wybrać, który akapit rozwinąć, dodajemy
kolejny paragraf do naszego dokumentu:
Vivamus pretium fringilla metus.Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Jest on również domyślnie schowany (display: none;), a jego id jest równe more_second. Dokument, po tej operacji, wygląda jak na listingu 2.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac. wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Funkcje i argumenty
Naturalnie, skrypt nadal rozwija pierwszy schowany paragraf. Wyedytujemy
wiec link więcej, by jako argument funkcji {stala}PokazAkapit{/stala}, wstawiony
został identyfikator paragrafu, który chcemy rozwinąć:
wiecej
Abyśmy lepiej zrozumieli to, co się zmieniło, wyróżnimy kawałek kodu:
onclick=\"PokazAkapit(\'more_second\');\"
Niestety, dodanie powyższej treści nic nam nie dało. Skrypt nie będzie
działał, a w najlepszym wypadku ujrzymy błąd w przeglądarce.
Funkcja {stala}PokazAkapit{/stala} zapisana jest w taki sposób:
function PokazAkapit()
{
var akapit = document.getElementById(\'more\');
var odnosnik = document.getElementById(\'link\');
var view = akapit.style.display;
if (view == \"block\")
{
odnosnik.innerHTML = \"wiecej\";
akapit.style.display = \"none\";
}
if (view == \"none\")
{
odnosnik.innerHTML = \"schowaj\";
akapit.style.display = \"block\";
}
}
i, jak sami widzimy, nie zawiera nic pomiędzy nawiasami: {stala}function PokazAkapit(){/stala}.
Z drugiej strony, w naszym dokumencie mamy zdefiniowane
wywołanie {stala}PokazAkapit{/stala} z wartością w nawiasach (argumentem):
onclick=\"PokazAkapit(\'more_second\');\"
Musimy w tej sytuacji dać możliwość funkcji {stala}PokazAkapit{/stala} pobierania
wartości argumentu przy jej wywołaniu. Oto ona:
function PokazAkapit(id_paragrafu)
{
W ten sposób możemy łatwo odwołać się do wartości id przekazanej
w onclick. W tym przypadku jest ona równa {stala}more_second{/stala}. Aby
upewnić się, ze wszystko działa, niech funkcja {stala}PokazAkapit{/stala} ma następującą
postać:
function PokazAkapit(id_paragrafu)
{
alert(id_paragrafu);
var akapit = document.getElementById(\'more\');
var odnosnik = document.getElementById(\'link\');
var view = akapit.style.display;
if (view == \"block\")
{
odnosnik.innerHTML = \"wiecej\";
akapit.style.display = \"none\";
}
if (view == \"none\")
{
odnosnik.innerHTML = \"schowaj\";
akapit.style.display = \"block\";
}
}
Definiując w ten sposób funkcję Costam określamy, że aby wywołać
ją (np. w onclick), należy podać też argument.
Przykładowe wywołanie tej funkcji wyglądałoby następująco:
{html}onclick=\”Costam(\’lalala\’);\” {/html}
Dzięki temu wewnątrz funkcji (pomiędzy klamrami) mamy do dyspozycji
zmienną o nazwie argument, która ma wartość lalala. To tak,
jakbyśmy we wnętrzu tej samej funkcji napisali:
{html}var argument = \”lalala\”;{/html}
Dodaliśmy to:
alert(id_paragrafu);
Powyższy kod był dodany, by wyświetlić w wyskakującym okienku
to, co jest przekazywane pod postacią zmiennej id_paragrafu. Jak widzimy,
pokaże się more_second.
Teraz, kiedy pod postacią zmiennej id_paragrafu mamy dowolny
identyfikator, możemy pobrać odnośnik do niego poprzez funkcje dokument.
{stala}getElementById();{/stala}. Musimy tylko podać jej argument, jakim będzie
zmienna id_paragrafu. Ta z kolei ma wartość jakiegoś id, wiec możemy
bez problemów skorzystać z {stala}document.getElementById(){/stala}. Usuwamy
poprzednio dodany alert(); i dodajemy to, co nas interesuje:
var akapit = document.getElementById(id_paragrafu);
W tym przypadku nie otaczamy słówka id_paragrafu apostrofami
czy tez cudzysłowami, ponieważ jest to zabronione i zakończyłoby się
błędem.
function PokazAkapit(id_paragrafu)
{
var akapit = document.getElementById(id_paragrafu);
var odnosnik = document.getElementById(\'link\');
var view = akapit.style.display;
if (view == \"block\")
{
odnosnik.innerHTML = \"wiecej\";
akapit.style.display = \"none\";
}
if (view == \"none\")
{
odnosnik.innerHTML = \"schowaj\";
akapit.style.display = \"block\";
}
}
Dokument wygląda natomiast tak jak na listingu 3.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac.
wiecej
Vivamus pretium fringilla metus.Praesent a enim eu metus scelerisque tincidunt. In auctor lorem etleo.
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
W ten sposób możemy użyć naszej funkcji na paragrafie o id=\”more_
second\”. Podstawimy w:
onclick=\"PokazAkapit(\'more_second\');\"
inne wartości, oczywiście po uprzednim dodaniu odpowiednich tagów
z identyfikatorami, by przekonać się o potędze zastosowanego kodu.
Popatrzmy na jeszcze jeden dokument HTML prezentujący istotę
problemu – listing 4.
Strona z innym przykładem argumentów funkcji
Sprawa jest prosta, wywołujemy w {stala}onclick=\”Pokaz(\’To jest tekst,
który wyświetli się w okienku\’);\”{/stala} funkcje {stala}Pokaz{/stala}, dla której przygotowaliśmy
jeden argument pod postacią zdania To jest tekst, który wyświetli
się w okienku. Po kliknięciu linka show me it! ukaże się okienko właśnie
z tym zdaniem.
Widzimy wiec, ze to, co przekażemy do funkcji, jest
w niej dostępne pod postacią zmiennej. W tym przypadku nazwaliśmy
ja {stala}costam_costam{/stala}. Spróbujmy zmieniać argument w onclick, by przekonać
się, ze to naprawdę działa!
