Lenyíló menük készítése. Összetett programok készítése

Átírás

1 Lenyíló menük készítése Összetett programok készítése webprogramozó Akkor érdemes használni, ha a webhelyünk túl sok lehet séget tartalmaz ahhoz, hogy azok kényelmesen elférjenek egy oldalon. Pár oldal esetén nem javasolt, mert a felhasználókat inkább zavarja. <html> <head> <title>lenyíló menü</title> <link rel="stylesheet" type="text/css" href="menu.css"> <script language="javascript" type="text/javascript" src="menu.js"> </script> </head> <body> <h1>menü</h1> <ul id="menu"> <li class="menu"><a href="#">kezd lap</a></li> <li class="menu"><a href="#">termékek</a> <ul> <li><a href="#">els termék</a></li> <li><a href="#">második termék</a></li> <li><a href="#">harmadik termék</a></li> </li> <li class="menu"><a href="#">támogatás</a> <ul> <li><a href="#">almenü 1</a></li> <li><a href="#">almenü2</a></li> </li> <li class="menu"><a href="#">fejleszt k</a> <ul> <li><a href="#">1. almenü</a></li> <li><a href="#">2. almenü</a></li> </li> <li class="menu"><a href="#">kapcsolat</a> <ul> <li><a href="#">telefon</a></li> <li><a href="#"> </a></li> </li> </body> </html> 1

2 CSS fájl float: left ezzel elérhet, hogy az elemek nem egymás alatt, hanem egymás mellett jelennek meg balról jobbra list-style-type: none a listaelemek el tt nem jelenik meg a felsorolásjel #menu { position: absolute; #menu li { float: left; list-style-type: none; padding-right: 20px; width: 100px; background-color: silver; #menuliul{ background-color: silver; margin: 0px; padding: 0px; #menu li ul li { padding: 0px; margin: 0px; float: none; list-style-type: none; width: 80px; var t=false, current; function SetupMenu(){ if (!document.getelementsbytagname) return; items = document.getelementsbytagname("li"); for (i=0; i<items.length; i++){ if (items[i].classname!= "menu") continue; thelink = findchild(items[i],"a"); thelink.onmouseover = ShowMenu; thelink.onmouseout = StartTimer; if (ul = findchild(items[i],"ul")){ ul.style.display = "none"; for (j=0; j<ul.childnodes.length; j++){ ul.childnodes[j].onmouseover = ResetTimer; ul.childnodes[j].onmouseout = StartTimer; function findchild(obj, tag){ cn = obj.childnodes; for (k=0; k<cn.length; k++) if (cn[k].nodename == tag) return cn[k]; return false; function ShowMenu(e){ if (!e) var e = window.event; if (e.target) thislink = e.target; else thislink = e.srcelement; ResetTimer(); if (current) HideMenu(current); thislink = thislink.parentnode; current = thislink; ul = findchild(thislink,"ul"); if (!ul) return; ul.style.display="block"; 2

3 function HideMenu(thelink){ ul = findchild(thislink,"ul"); if (!ul) return; ul.style.display="none"; function ResetTimer(){ if (t) window.cleartimeout(t); function StartTimer(){ t = window.settimeout("hidemenu(current)",10); window.onload = SetupMenu; A menü csinosítása CSS segítségével Igazítsuk a bet típusokat és színeket a webhelyünk többi részéhez Egy a: hover elemválasztó hozzáadásával változtassuk meg az alárendelt elemek színét, amikor az egérmutató föléjük kerül A border jellemz t használva foglaljuk keretbe a menüket és menüpontokat A margin jellemz vel iktassunk be üres helyeket a menüelemek között. #menu { position: absolute; font-family: sans-serif; font-size: 100%; #menu li { float: left; list-style-type: none; padding-right: 20px; width: 100px; background-color: silver; border: 1px solid black; text-indent: 0px; margin-left: 3px; #menu li ul li { padding: 0px; margin: 0px; float: none; list-style-type: none; width: 100px; text-indent: 0px; border: none; 3

4 #menu li a { color: black; text-decoration: none; width: 100%; display: block; #menu li a:hover{ color: white; #menu li ul li a{ color: black; text-decoration: none; #menu li ul li a:hover{ color: black; background-color: aqua; Gördül szöveget tartalmazó ablak létrehozása <html> <head> <title>gördül szöveg</title> <script language="javascript" type="text/javascript" src="gordulo.js"> </script> <link rel="stylesheet" type="text/css" href="gordulo.css"> </head> <body> <h1>gördül szöveg</h1> <p>a Linux egy operációs rendszer, a szabad szoftverek és a nyílt forráskódú programok egyik legismertebb példája.</p> <div id="thewindow"> <div id="thetext"> <p>a Linux elnevezés szigorú értelemben véve a Linux kernelt (rendszermag) jelenti, amelyet Linus Torvalds kezdett el fejleszteni 1991-ben.</p> <p>a köznyelvben mégis gyakran a teljes Unix-szer operációs rendszerre utalnak vele, amely a Linux rendszermagra, és az 1983-ban, Richard M. Stallman vezetésével indult GNU projekt keretében született alapprogramokra épül.</p> 4

5 <p>a Linux pontosabb neve ebben az értelemben GNU/Linux.</p> <ul> <li>a Linux kifejezést használják Linux disztribúciókra is. <p>egy-egy disztribúció olyan összeállítás, amely az alaprendszeren túl bizonyos szempontok alapján összeválogatott és testreszabott programokat tartalmaz.</p> </body> </html> #thewindow { position: relative; width: 180; height: 150; overflow: hidden; border: 2px solid red; #thetext { position: absolute; width: 170; left: 5; top: 100; var pos = 100; function Gorget(){ if (!document.getelementbyid) return; obj = document.getelementbyid("thetext"); pos -= 1; if (pos < 0 - obj.offsetheight+130) return; obj.style.top = pos; window.settimeout("gorget()",30); Stíluslapváltás JavaScript segítségével window.onload = Gorget; 5

6 <html> <head> <title>stílusváltás</title> <link rel="stylesheet" type="text/css" href="egyikstilus.css"> <link rel="stylesheet" type="text/css" href="masikstilus.css" disabled> <script language="javascript" type="text/javascript" src="stilusvalto.js"> </script> </head> <body> <h1>stílusváltó</h1> <p>a Linux a szerverek és személyi számítógépek mellett - els sorban nyíltságának köszönhet en - megtalálható sok összetett elektronikus eszközben, így hálózati eszközökben (például routerek), hordozható eszközökben (például mobiltelefonok, okostelefonok, PDA-k, hordozható hanglejátszók), háztartási gépekben, szórakoztató elektronikai berendezésekben (például <b>asztali DVDlejátszók</b>, <i>videojáték-konzolok</i>, set-top-boxok) is.</p> <p>válassz stílust:</p> <ul> <li><a href="#" onclick="stilus(0,true);">egyik stílus</a></li> <li><a href="#" onclick="stilus(1,true);">másik stílus</a></li> <li><a href="#" onclick="stilus(0,false);">nincs stílus</a></li> <p>bizonyos területeken (például webszerverek, szuperszámítógépek esetében) a legmeghatározóbb operációs rendszernek számít, ám az utóbbi években személyi számítógépekre (asztali gépek, hordozható gépek) is egyre szélesebb körben telepítenek valamilyen Linux disztribúciót.</p> </body> </html> Egyik stílus body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; P { margin-left: 10%; margin-right: 10%; text-align: justify; text-indent: 3%; B { color: red; I { color: DarkViolet; H1 { font-size: 300%; text-align: center; text-transform: capitalize; 6

7 UL { margin-left: 20%; margin-right: 20%; LI { margin-top: 10%; Másik stílus body { font-family: Times, "Times New Roman", sans-serif; font-size: 14pt; P { margin-left: 20%; margin-right: 20%; text-align: left; text-indent: 0%; B { color: black; background-color: aqua; I { color: red; H1 { font-size: 200%; text-align: left; text-transform: uppercase; UL { margin-left: 30%; margin-right: 30%; background-color: yellow; LI { margin-top: 20px; 7

8 function Stilus(n, enable){ if (!document.getelementsbytagname) return; links = document.getelementsbytagname("link"); links[n].disabled =!enable; links[1-n].disabled = true; Dinamikus rlap készítése Stilus(0,true); <html> <head> <title>dinamikus rlap</title> <script language="javascript" type="text/javascript" src="din.js"> </script> </head> <body> <h1>dinamikus rlap</h1> <form name="urlap"> <b>adatok:</b><br> <b>név:</b><input type="text" name="nev" size="20"><br> <b>cim:</b><input type="text" name="cim" size="20"><br> <b>város:</b><input type="text" name="cim" size="15"> <b>irányítószám:</b><input type="text" name="cim" size="9"><br> <hr> <b>válasz:</b><br> <input type="radio" name="rcim" value="fenti" checked onclick="show(0);"> <b>fenti címre</b> <input type="radio" name="rcim" value="masik" onclick="show(1);"> <b>másik címre</b> <div ID="masikcim" style="display: none;"> <br> <b>név:</b><input type="text" name="nev" size="20"><br> <b>cim:</b><input type="text" name="cim" size="20"><br> <b>varos:</b><input type="text" name="cim" size="15"> <b>irányítószám:</b><input type="text" name="cim" size="9"><br> <hr> 8

9 <div ID="adatok"> <b>mennyiség:</b><input type="text" name="m1" size="3"> <b>megnevezés:</b><input type="text" name="megnev1" size="45"> <br> <input type="button" value="új adat hozzáadása" onclick="ujadat();" ID="hozzaad"> <hr> <input type="submit" value="folytatás..."> </form> </body> </html> var items = 1; function UjAdat(){ if (!document.getelementbyid) return; div = document.getelementbyid("adatok"); button = document.getelementbyid("hozzaad"); items++; newitem = "<b>mennyiség:</b><input type=\"text\" name=\"m"+items+"\" "; newitem += "size=\"3\"> <b>megnevezés:</b><input type=\"text\" name=\"megnev"+items+"\" "; newitem += "size=\"45\"><br>"; newnode = document.createelement("span"); newnode.innerhtml = newitem; div.insertbefore(newnode, button); function Mutat(x){ if (!document.getelementbyid) return; obj = document.getelementbyid("masikcim"); if (x == 1) obj.style.display = "block"; else obj.style.display = "none"; "Húzd és ejtsd" objektumok létrehozása 9

10 <html> <head> <title>húzd és ejtsd</title> <link rel="stylesheet" type="text/css" href="huzdesejtsd.css"> <script language="javascript" type="text/javascript" src="huzdesejtsd.js"> </script> </head> <body> <h1>húzd és ejtsd</h1> <div class="huzd" id="huzd1"> <h3>doboz 1</h3> <p>a Linux egy operációs rendszer, a szabad szoftverek és a nyílt forráskódú programok egyik legismertebb példája.</p> <div class="huzd" id="huzd2"> <h3>doboz 2</h3> <p>a Linux elnevezés szigorú értelemben véve a Linux kernelt (rendszermag) jelenti</p> <div class="huzd" id="huzd3"> <h3>doboz 3</h3> <p>a köznyelvben mégis gyakran a teljes Unix-szer operációs rendszerre utalnak vele</p> <div class="huzd" id="huzd4"> <h3>doboz 4</h3> <p>a Linux pontosabb neve ebben az értelemben GNU/Linux.</p> </body> </html>.huzd { position: absolute; width: 150px; border: 2px solid black; border-top: 20px solid black; top: 100px; padding: 5px; #huzd1 { left: 20px; #huzd2 { left: 190px; #huzd3 { left: 360px; #huzd4 { left: 530px; 10

11 var obj, x, y, dx, dy; function Setup(){ if (!document.getelementsbytagname) return; divs = document.getelementsbytagname("div"); for (i=0; i<divs.length; i++){ if (divs[i].classname!= "huzd") continue; divs[i].onmousedown = Drag; function Drag(e){ if (!e) var e = window.event; if (e.target) obj = e.target; else obj = e.srcelement; obj.style.bordercolor = "red"; dx = x - obj.offsetleft; dy = y - obj.offsettop; function Move(e){ if (!e) var e = window.event; if (e.pagex){ x = e.pagex; y = e.pagey; else if (e.clientx){ x = e.clientx; y = e.clienty; else return; if (obj){ obj.style.left = x - dx; obj.style.top = y - dy; function Drop(){ if (!obj) return; obj.style.bordercolor = "black"; obj = false; Áttérés más nyelvekre document.onmousemove = Move; document.onmouseup = Drop; window.onload = Setup; 11

12 Java A bonyolultabb ügyféloldali programokhoz hasznos A Javával olyan alkalmazásokat készíthetünk, amelynek képességei meghaladják a JavaScript lehet ségeit. A Java nyelvtana hasonlít a JavaScriptére, bár a nyelv bonyolultabb. Flash A Flash ActionScript nyelve ugyanazon az ECMAScript szabványon alapul, mint a JavaScript Ruby Viszonylag új szerveroldali nyelv. Keretrendszerének köszönhet en a JavaScript és az AJAX könnyen beépíthet a weblapokba. PHP Szerveroldali szkriptnyelv Gyakran alkalmazzák háttérprogramok készítéséhez HTML, JavaScript és AJAX felületek esetén is. Python szerveroldali nyelv, de natív alkalmazások írására is alkalmas az egyszer kódolási stílus és a hozzá elérhet kit programkönyvtárak miatt népszer VÉGE 12