Réteg elrejtése felfedése 1313
Megjegyzés:
- Ha nem írunk CSS, azaz stílus meghatározást a mozgó objektumhoz, akkor az meg sem jelenik
- Ha a CSS fájlban top meghatározást alkalmazunk, akkor a js fájlban is top legyen.
- Ha a CSS fájlban margin-top meghatározást alkalmazunk, akkor a js fájlban marginTop legyen
- Ismétlődést, vezérlő utasítást, ne a js programunk végén, hanem közvetlen az if utasításban helyezzük el.
- Az else utasítás, elhagyható
Pozíciók megadását legtöbbször, "px" méretben határozzuk meg. Amikor JavaSript meghatározza pozíció értékét, akkor az értékhez hozzá kell rendelni a 'px' karaktereket. Példa: var a=15; objekt.style.width=a+'px';
Felfedést, elrejtést, vezérelhetjük button gombokkal, vagy hivatkozásokkal (horgony a)
A példánkban mindkettő szerepel, de a valóságban lehetőleg csak az egyik variációt alkalmazzuk
Vezérlés: Button gombok alkalmazásával
_______________
Vezérlés: Hivatkozások alkalmazásával
Felfed ________ | ________
Elrejt
Programunk megírása XHTML fájlban
<body>
<div id="vezerlo">
<!--Első lehetőség, button gombokkal történő vezérlés.-->
<p> <u>Button gombok</u> <br />
<button onClick="pozicioFelfed();"> Felfed</button> _______________
<button onClick="pozicioElrejt();">Elrejt</button>
</p>
<!--Második lehetőség, hivatkozásokkal történő vezérlés-->
<p> <u>Hivatkozások</u> <br />
<a href="#.html" onClick="pozicioFelfed();"> Felfed</a> ________ | ________
<a href="#.html" onClick="pozicioElrejt();">Elrejt</a>
</p>
</div>
<div id="megjelenes">
<div id="felfed_elrejt" style="display: none;">
<p>Ez egy mozgatható objektum.</p>
<p>Kezdeti pozíciója</p>
<p>bal felső sarok "x" és "y" értéke</p>
</div>
</div>
</body>
Stílusok meghatározása CSS fájlban:
#vezerlo {float:left;}
#megjelenes { position: relative; width: 400px; height:170px; margin-left: 350px; border: 1px solid black;}
#felfed_elrejt { position: reletive; overflow: hidden; margin-top: 10px; width: 300px; height:0px; margin-left: 20px; padding-left: 10px; background-color: #E3E3E3; }
JavaScript, azaz js fájlunk programja:
var le=0;
var fel=0;
var y=0;
function pozicioFelfed() {
obj = document.getElementById ("felfed_elrejt");
obj.style.height=y+'px';
obj.style.border="1px solid black";
if (le<=15){le++;
y=y+le;
fel=0;
window.setTimeout("pozicioFelfed(); " , 40) ;
}
if (le>=2) {obj.style.display="block";} //Kezdeti felvillanás elkerülése végett, az érték 2, vagy nagyobb legyen
}
function pozicioElrejt() {
if (y<1) elvanRejtve();
else {
obj = document.getElementById ("felfed_elrejt");
obj.style.height=y+'px';
if (fel<=15){ fel++;
y=y-fel;
le=0;
window.setTimeout("pozicioElrejt(); " , 40) ;
}
if (fel>=15) {obj.style.display="none"; obj.style.border="none";}
if(y==0){obj.style.display="none"; obj.style.border="none";} //Ha a felhasználó, nemvárt kattintásokat hajtana végre
}
}
//Megakadájozza a programfutási hibát, ha kezdetben a felfed helyett, az elrejt gombra kattintanának
//Elrejtésnél az y értéke = y--; A div szakasz magasságának értéke nem lehet minusz
function elvanRejtve() {y=0;}