Download
1 / 16
160 likes | 224 Vues
JavaScript a gyakorlatban. 7. Gyakorlat. DHTML Fa-struktúrájú menük létrehozása Legördülő menük létrehozása. JS0701.html. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
E N D
7. Gyakorlat • DHTML • Fa-struktúrájú menük létrehozása • Legördülő menük létrehozása
JS0701.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head><title>7.1 feladat</title> <styletype="text/css"> a {text-decoration: none;} #contact, #support, #products { display:none; margin-left:2em; } </style> <script type="text/javascript" src="JS0701.js"></script> </head> <body> <h1>7.1 feladat</h1> <p>Légy üdvözölve!</p> <hr />… Fa-struktúráju menük létrehozása
… <div> <b><a id="xproducts" href="javascript:Toggle('products');">[+]</a> Termékek</b><br /> <divid="products"> <a href="prodlist.html">Terméklista</a><br /> <a href="order.html">Rendelés</a><br /> <a href="pricelist.html">Árlista</a><br /> </div> <b><a id="xsupport" href="javascript:Toggle('support');">[+]</a> Támogatás</b><br /> <divid="support"> <a href="sforum.html">Fórum</a><br /> <a href="sforum.html">Kapcsolat</a><br /> </div> <b><a id="xcontact" href="javascript:Toggle('contact');">[+]</a> Kapcsolatfelvétel</b> <divid="contact"> <a href="contact1.html">Szervízcsoport</a><br /> <a href="contact2.html">Értékesítés</a><br /> </div> </div> </body> </html> JS0701.html
JS0701.js //JavaScript functionToggle(item) { obj=document.getElementById(item); visible=(obj.style.display!="block") key=document.getElementById("x" + item); if (visible) { obj.style.display="block"; key.innerHTML="[+]"; } else { obj.style.display="none"; key.innerHTML="[-]"; } } Fa-struktúráju menük létrehozása
JS0702.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>7.2 feladat</title> <script type="text/javascript" src="JS0702.js"></script> <styletype="text/css"> body { margin-left: 0; margin-top: 0; } td { background-color: silver; width: 100; } div { position: absolute; visibility: hidden; } </style> </head> <body> <tableborder="0" cellpadding="4"> <tr><tdid="menu-products" onmouseover="Menu('products');" onmouseout="Timeout('products');"> <a href="products.html"><b>Termékek</b></a> </td> <tdid="menu-sales" onmouseover="Menu('sales');" onmouseout="Timeout('sales');"> <a href="sales.html"><b>Értékesítés</b></a> </td> <tdid="menu-service" onmouseover="Menu('service');" onmouseout="Timeout('service');"> <a href="service.html"><b>Szervíz</b></a> </td> </tr> </table> …
…<divid="products" > <tablewidth="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <tdid="p1" onmouseover="Highlight('products','p1');" onmouseout="UnHighlight('products','p1');"> <a href="equip.html">Berendezések</a></td> </tr> <tr> <tdid="p2" onmouseover="Highlight('products','p2');"onmouseout="UnHighlight('products','p2');"> <a href="supplies.html">Egyéb eszközök</a></td></tr> </table> </div> <divid="sales"> <tablewidth="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <tdid="s1" onmouseover="Highlight('sales','s1');" onmouseout="UnHighlight('sales','s1');"> <a href="prices.html">Árlista</a></td></tr> <tr> <tdid="s2" onmouseover="Highlight('sales','s2');" onmouseout="UnHighlight('sales','s2');"> <a href="order.html">Megrendelés</a></td></tr> <tr> <tdid="s3" onmouseover="Highlight('sales','s3');" onmouseout="UnHighlight('sales','s3');"> <a href="specials.html">Egyéb</a></td></tr> </table> </div>… JS0702.html
JS0702.html <divid="service" > <tablewidth="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <tdid="r1" onmouseover="Highlight('service','r1');" onmouseout="UnHighlight('service','r1');"> <a href="support.html">Támogatás</a></td></tr> <tr> <tdid="r2" onmouseover="Highlight('service','r2');" onmouseout="UnHighlight('service','r2');"> <a href="cservice.html">Kapcsolatfelvétel</a></td></tr> </table> </div> <h1>7.2 feladat</h1> <p>Légy üdvözölve!</p> </body> </html> Legördülő menük létrehozása
//JavaScript var inmenu=false; var lastmenu=0; function Menu(current) { if (!document.getElementById) return; inmenu=true; oldmenu=lastmenu; lastmenu=current; if (oldmenu) Erase(oldmenu); m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.left= m.offsetLeft; box.style.top= m.offsetTop + m.offsetHeight; box.style.visibility="visible"; m.style.backgroundColor="Aqua"; box.style.backgroundColor="Aqua"; box.style.width="108px"; }… JS0702.js Legördülő menük létrehozása
JS0702.js … function Erase(current) { if (!document.getElementById) return; if (inmenu && lastmenu==current) return; m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.visibility="hidden"; m.style.backgroundColor="Silver"; } function Timeout(current) { inmenu=false; window.setTimeout("Erase('" + current + "');",500); } … Legördülő menük létrehozása
JS0702.js … function Highlight(menu,item) { if (!document.getElementById) return; inmenu=true; lastmenu=menu; obj=document.getElementById(item); obj.style.backgroundColor="Silver"; } function UnHighlight(menu,item) { if (!document.getElementById) return; Timeout(menu); obj=document.getElementById(item); obj.style.backgroundColor="Aqua"; } Legördülő menük létrehozása
8. Gyakorlat • Sütik
Sütik használata • cookie-k segítségével változókat tárolhatunk a felhasználó számítógépén • fontosabb adatok megjegyzésére szolgál • biztonságtechnikai szempontból elég ellentmondásos, de megfelelő használat mellet nagyon hasznos • a tarolt adatok a sütik szavatosságáig érhetőek el, a szavatosságot is mi adjuk meg • kiválóan alkalmas példaul arra hogy felismerjünk egy oldalunkra visszalátogató egyént
Sütik használata • beállítás: • mindig egy adott weboldalra vonatkozik • pl.: name=window.prompt("Please enter your name",""); d = new Date(); d.setFullYear(d.getFullYear() + 1); expires="expires=" + d.toGMTString(); document.cookie="Username=" + name + "; " + expires; • beolvasás: • meg kell nézni a document.cookie értéket • ez a tulajdonság tartalmazza az összes süti értekét, szöveges azonosítók segítségével tudjuk azokat megtalálni • pl.: cookies=document.cookie; startpos=cookies.indexOf("Username")+9; endpos=cookies.indexOf(";",startpos); if (endpos==-1) endpos=cookies.length; name=cookies.substring(startpos,endpos);
JS0801.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head><title>8.1 feladat</title> </head> <body> <h1>8.1 feladat</h1> <script type="text/javascript" src="JS0801.js"></script> <p>Légy üdvözölve!</p> </body> </html> Sütik használata
JS0801.js //JavaScript cookies=document.cookie; alert(cookies); startpos=cookies.indexOf("Username")+9; if (startpos<9) { // Nincs beállítva a süti name=window.prompt("Kérjük, adja meg a nevét!",""); d = new Date(); d.setFullYear(d.getFullYear() + 1); expires="expires=" + d.toGMTString(); document.cookie="Username=" + name + "; " + expires; document.write("<h2>Üdvözöljök, " + name + "!</h2>"); } else { // Megtaláltuk a sütit endpos=cookies.indexOf(";",startpos); if (endpos==-1) endpos=cookies.length; name=cookies.substring(startpos,endpos); document.write("<h2>Üdvözöljük ismét, " + name + "!</h2>"); } Sütik használata
