Autor Zpráva
Suta
Profil
Zde je kus zdrojového kódu (je to "vykastrované" menu z Centrumu). Upravil jsem si jej podle libosti, kouskum rozumím, kouskum zatím ne... Zde je tedy jen základ JavaScriptu (je to zkrátka menu, které po kliknutí na polozku odkazu vykoná pár následných výměn na stránkách. Jen mi není jasné:

- jak teoreticky funguje to d.getElementById (nerozumím principu fungování)
- naco je v tom className v úvozovkách prázdná mezera

Díky.


function showCard (flag,card){
d.getElementById('sr1').style.display='none';d.getElementById('oranzo va').className='';
d.getElementById('sr2').style.display='none';d.getElementById('zluta' ).className='';
d.getElementById('sr3').style.display='none';d.getElementById('zelena ').className='';
d.getElementById('sr4').style.display='none';d.getElementById('ruzova ').className='';
d.getElementById('sr5').style.display='none';d.getElementById('modra' ).className='';
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';
}

if(d.getElementById&&(w.attachEvent||w.addEventListener)){
d.write(
'<div id="menu">'+
'<p><span id="oranzova" class="ok_barva"><a href="#"

onclick="showCard(\'oranzova\',\'sr1\');return(false)">Hlavní</a></spa n><span id="zluta"><a href="#"

onclick="showCard(\'zluta\',\'sr2\'); return(false)">Oddíl</a></span><span id="zelena"><a href="#"

onclick="showCard(\'zelena\',\'sr3\'); return(false)">Tábory</a></span><span id="ruzova"><a href="#"

onclick="showCard(\'ruzova\',\'sr4\'); return(false)">Archív</a></span><span id="modra"><a href="#"

onclick="showCard(\'modra\',\'sr5\'); return(false)">Odkazy</a></span></p>'+
'<div class="clr"></div></div>'+
'<div class="lista_celek" id="sr1">'+
'<div class="bx5"><div class="bx6"><p><strong>Co bys rád vyhledal?</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu1+'</div></div>'+
'<div class="lista_celek" id="sr2">'+
'<div class="bx5"><div class="bx6"><p><strong>Stránka o našem oddíle:</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu2+'</div></div>'+
'<div class="lista_celek" id="sr3">'+
'<div class="bx5"><div class="bx6"><p><strong>Vše o táborech:</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu3+'</div></div>'+
'<div class="lista_celek" id="sr4">'+
'<div class="bx5"><div class="bx6"><p><strong>Články z naší činnosti:</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu4+'</div></div>'+
'<div class="lista_celek" id="sr5">'+
'<div class="bx5"><div class="bx6"><p><strong>Další odkazy na skauty:</strong>'+
'<select style="width:250px">'+
'<option>Skautský oddíl Naděje</option><option>Trojka Vsetín</option><option>Roveři z Podlesí</option><option>Další

oddíly...</option></select>'+
'<input type="submit" value="Přejít" class="ok_hledat"></p></div></div><p class="bx7"

style="padding-left:263px;">'+podmenu5+'</p>'+
'</form></div>');
}
Oswald
Profil
- jak teoreticky funguje to d.getElementById (nerozumím principu fungování)
Někde tomu muselo předcházet var d = document. Takže je to vlastně document.getElementById('idecko'), což vrátí referenci na nějaký HTML element, který jehož id je "idecko".


- naco je v tom className v úvozovkách prázdná mezera
Ten prvek měl zřejmě nějakou třídu, která měla přes CSS nadefinován nějaký vzhled, a tím - že se mu nastaví třída třída na prázdný řetězec - ty CSS vlastnosti ztratí.
Suta
Profil
Rozumím.
V sedném řádku...
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';

... je na začátku d.getElementById(card) - sr1, sr2, sr3 atd. předdefinované styly mám, ovšem card nemám nikde nijak definovaný... Co je tím myšleno?
... je na konci className='ok_barva' - v jiných řádcích v úvozovkách není nic. Znamená to tedy, že tímto řádkem začne a do ostatních prázdných úvozovek si v průběhu doplňuje další id?
Oswald
Profil
... je na začátku d.getElementById(card) - sr1, sr2, sr3 atd. předdefinované styly mám, ovšem card nemám nikde nijak definovaný... Co je tím myšleno?
Pokud nic s id "card" neexistuje, tak to musí hodit chybovou hlášku do conzole. Asi víc neporadim, poněvadž nevidím tu stránku (URL?).
Suta
Profil
Hodil jsem to pro ukázku sem:

www.suta.wz.cz
Suta
Profil
Aha, už jsem to našel.

V tom posledním řádku...
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';
... jsou v závorkách (card) a (flag)

... a to card a flag je úplně v prvním řádku v závorce...
function showCard (flag,card){

Co to má znamenat?

(pro orientaci část kódu o níž je řeč)?
function showCard (flag,card){
d.getElementById('sr1').style.display='none';d.getElementById('oranzo va').className='';
d.getElementById('sr2').style.display='none';d.getElementById('zluta' ).className='';
d.getElementById('sr3').style.display='none';d.getElementById('zelena ').className='';
d.getElementById('sr4').style.display='none';d.getElementById('ruzova ').className='';
d.getElementById('sr5').style.display='none';d.getElementById('modra' ).className='';
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';
}
Oswald
Profil
Jasně, to card je název proměnné uvnitř funkce showCard (předtím jsem si nevšiml, že není v uvozovkách). Tudíž např. první záložka má:


onclick="showCard('oranzova','sr1');return(false)"


Tzn., že po kliknutí na ní se projdou všechny záložky a odstraní se jim třídy (className=''), projdou se všechny boxy s hledání (u tebe sub-menutka) a skryjí se (style.display='none') a na závěr se zobrazí submenu s id "sr1" (style.display='block') a záložce s id "oranzova" se nastaví class na "ok_barva" (className='ok_barva').
Suta
Profil
Vřelé díky, skládám uznání.
Poslední otázka: (snad :)
- kde je definované (nebo jak to prostě funguje), že se mají projít všechny záložky a odstraní se jim třídy?
Oswald
Profil
Je to natvrdo v té funkci showCard, takže když změníš ídečka a nezměníš je v té funkci, tak to přestane fungovat.


function showCard (flag,card) {

// skryti boxu
d.getElementById('sr1').style.display='none';

//ostraneneni tridy
d.getElementById('oranzo va').className='';

/* ... */

//zobrazeni prvku s id, jehoz hodnota je v prom. "card"
d.getElementById(card).style.display='block';

// nastaveni tridy "ok_barva" prvku s id, jehoz hodnota je v prom. "flag"
d.getElementById(flag).c lassName='ok_barva';

}
Suta
Profil
Díky!
Toto téma je uzamčeno. Odpověď nelze zaslat.

0