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

<script language="JavaScript" type="text/javascript" src="menu.js">

Menü

• 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.

• Kezd lap
• Termékek
  • Els termék
  • Második termék
  • Harmadik termék
• Támogatás
  • Almenü 1
  • Almenü2



• Fejleszt k
  • 1. almenü
  • 2. almenü
• Kapcsolat
  • Telefon
  • E-mail

1

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; }

#menu li ul { 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
function findChild(obj, tag){ cn = obj.childNodes; for (k=0; k
2

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 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 { position: absolute; font-family: sans-serif; font-size: 100%; }

#menu li ul li { padding: 0px; margin: 0px; float: none; list-style-type: none; width: 100px; text-indent: 0px; border: none; }

3

#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

<script language="JavaScript" type="text/javascript" src="gordulo.js">

Gördül szöveg

A Linux egy operációs rendszer, a szabad szoftverek és a nyílt forráskódú programok egyik legismertebb példája.

A „Linux” elnevezés szigorú értelemben véve a Linux kernelt (rendszermag) jelenti, amelyet Linus Torvalds kezdett el fejleszteni 1991-ben.

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.

4

A Linux pontosabb neve ebben az értelemben GNU/Linux.

• A „Linux” kifejezést használják Linux disztribúciókra is.

Egy-egy disztribúció olyan összeállítás, amely az alaprendszeren túl bizonyos szempontok alapján összeválogatott és testreszabott programokat tartalmaz.

#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

<script language="JavaScript" type="text/javascript" src="stilusvalto.js">

Stílusváltó

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 asztali DVDlejátszók, videojáték-konzolok, set-top-boxok) is.

Válassz stílust:

• Egyik stílus
• Másik stílus
• Nincs stílus

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.

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

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

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);

<script language="JavaScript" type="text/javascript" src="din.js">

Dinamikus rlap

Adatok:
Név:
Cim:
Város: Irányítószám:

---

Válasz:
Fenti címre Másik címre

Név:
Cim:
Varos: Irányítószám:

---

8

Mennyiség: Megnevezés:

---

var items = 1; function UjAdat(){ if (!document.getElementById) return; div = document.getElementById("adatok"); button = document.getElementById("hozzaad"); items++; newitem = "Mennyiség: Megnevezés:
"; 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

<script language="JavaScript" type="text/javascript" src="huzdesejtsd.js">

Húzd és ejtsd

Doboz 1

A Linux egy operációs rendszer, a szabad szoftverek és a nyílt forráskódú programok egyik legismertebb példája.

Doboz 2

A Linux elnevezés szigorú értelemben véve a Linux kernelt (rendszermag) jelenti

Doboz 3

A köznyelvben mégis gyakran a teljes Unix-szer operációs rendszerre utalnak vele

Doboz 4

A Linux pontosabb neve ebben az értelemben GNU/Linux.

.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

var obj, x, y, dx, dy; function Setup(){ if (!document.getElementsByTagName) return; divs = document.getElementsByTagName("DIV"); for (i=0; i
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 Drop(){ if (!obj) return; obj.style.borderColor = "black"; obj = false; }

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; } }

Áttérés más nyelvekre

document.onmousemove = Move; document.onmouseup = Drop; window.onload = Setup;

11

Java

Flash

• 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.

• A Flash ActionScript nyelve ugyanazon az ECMAScript szabványon alapul, mint a JavaScript

Ruby

PHP

• Viszonylag új szerveroldali nyelv. • Keretrendszerének köszönhet en a JavaScript és az AJAX könnyen beépíthet a weblapokba.

• 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