JavaScript Popup Box
JavaScript'i abil on võimalik luua kolme tüüpi popup aknaid: Alert box, Confirm box ja Prompt box. Samuti saab luua hüpik-aknaid, mis hõlbustavad lehekülje alla laadimist, piltide vaatamist, täiendava info lisamist jne.
Näited
Alert box
Alert box-2
Confirm box
Prompt box
Alert Box
Alert box'i kasutatakse juhul kui on vaja olla kindel, et informatsioon jõuab kasutajani.
Kui box välja ilmub, peab kasutaja vajutama "OK" nuppu, protseduuri jätkamiseks.
alert("mingi tekst");
Confirm Box
Confirm box'i kasutatakse juhul kui on vaja, et kasutaja kinnitaks midagi v. oleks millegiga nõus.
Kui box välja ilmub, peab kasutaja vajutama "OK" nuppu või valima "Cancel" nupu.
confirm("mingi tekst");
Prompt Box
Confirm box'i kasutatakse juhul kui on vaja, et kasutaja kirjutaks midagi sisestus-väljale.
Kui box välja ilmub, peab kasutaja vajutama "OK" nuppu või valima "Cancel" nupu või siis kirjutama midagi sisestus-väljale, et jätkata protseduuri.
prompt("mingi tekst","vaikimisi väärtus");
Lihtene hüpik-aken
Html'is saab avada uue akna, kasutades target="_blank" elementi. Lihtne moodus, kuid pole võimalik lehekülje üle kontrolli saavutada, s.t. et kõik tööriista- ja kerimisribad kuvatakse ning samuti ei saa mõjutada akna suurust.
Nüüd, võttes appi JavaScript'i, saame luua uue akna mis kuvatakse just sellisena nagu tahame. S.t. et JavaScript ise avab akna mille suurus ja asukoht on autori poolt määratud. Samuti võib JavaScript vajadusel uue akna sisu luua v. siis selle leida oma saidist.
Kõigepealt kirjutame koodi dokumendi "head" sektsiooni:
window.open('jav/popup_1.htm','name','
height=255,width=250,toolbar=no,directories=no,status=no,menubar=no,
scrollbars=no,resizable=no');
"window.open" on JavaScript meetod mida kasutatakse brauseri uue akna avamiseks. Sellel meetodil on kolm parameetrit:
- Esimene parameeter sisaldab faili nime, mis avatakse uues aknas. Selles näites on faili nimeks jav/popup_1.htm.
- Teine parameeter on nimi millega määratakse uus aken. Juhul kui lehel on mitu hüpik-akent siis tuleb need määrata erinevate nimedega. Vastasel juhul, järgmiste hüpik-akende käivitamisel, valib skript sama nimega akna.
- Kolmas parameeter määrab hüpik-akna suuruse, milliseid tööriista v. kerimisribasid kuvatakse ning kas akent on võimalik suuremaks v. väiksemaks venitada (resize/noresize). Näites on hüpik-akna suuruseks 255 korda 250 pikselit. Samuti puuduvad uuel aknal kerimis, tööriista ja staatusriba. Ka ei saa külastaja akna suurust muuta.
Selleks, et Javascripti käivitada on vaja leida kõigepealt koht. Oletame, et skript käivitub siis kui lingile klikkida. Sellisel juhul näeb kood välja umbes selline:
<a href="jav/popup_1.htm"target="name"
onclick="window.open('mywin.htm','name','height=255,
width=250,toolbar=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no');return false;"
>Kliki siia</a>
Nüüd kui külastaja klikib lingile siis avane uus aken mis omakorda on genereeritud JavaScript'i poolt (eelduseks on see, et külastaja brauser toetab skripti).
Selleks, et näha kuidas skript töötab, siis
vajuta siia.
Loome hüpik-akna ainult JavaScript'i abil
Peale hüpik-akna, saab JavaScript'i abil luua ka akna sisu. Kasutame samasugust akent nagu eelmises näites (window.open meetod).
Lisaks kasutame document.write lausungit, veebilehe sisu loomiseks. TheNewWin.document.write määrab selle, et sisu ilmub hüpik-aknas mitte aga põhiaknas.
Antud näites on kasutatud viite lausungit. Lausungeid võib olla ükskõk kui palju, paasi, et nad oleksid kirjutatud ühele reale.
Pane tähele: Allpool olevas näites on kood jätkatud mitmele reale üpris suvaliselt. Kui sa selle kopeerid otse oma dokumenti siis see ei tööta. Selle asemel vaata siin lehel "View Source", "head" sektsiooni!
function openPopup() {
TheNewWin = window.open('','name','height=275,width=250,
toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,
resizable=no');
TheNewWin.document.write
('<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http:
\/\/www.w3.org\/TR\/xhtml1\/
DTD\/xhtml1-transitional.dtd">
<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
TheNewWin.document.write('<head><title>Popup<\/title><\/head>
<body style="overflow:hidden" bgcolor="#ffffff">
<p>See siin on hüpik-akna näide.<\/p>');
TheNewWin.document.write('<p>Eelduseks on see et sinu brauser toetab
JavaScripti. Sellisel juhul on akna suuruseks 295 korda 255 pikselit,
sellel aknal pole');
TheNewWin.document.write(' tööriista ega kerimisriba
ja akna suurust ei saa muuta.<\/p>
<hr \/><p align="right"><a href="#"
onclick="self.close();return false;">Sulge');
TheNewWin.document.write(' Aken<\/a><\/p> <\/body><\/html>');
return false;
}
Ja Html kood "body" sektsioonis näeb välja selline.
<a href="#"onclick="openPopup();">
Vajuta siia</a>
ning selline peaks olema tulemus:
Vajuta siia
Pildiga hüpik-akna valmistamine
Suured pildid muudavad veebilehe allalaadimise aeglaseks ning seepärast soovitatakse pildi suuruseks mitte üle 40k - 50k. Selleks, et mitte suuri pilte alla laadida, kasutatakse vastavate piltide väiksemaid variante (thumbnail).
JavaScript'i abil saame luua tulemuse, kus vaataja ise otsustab kas pilt alla laadida v. mitte.
Näiteks sellele pildile klikkides kuvatakse hüpik-aken mis edastab pildi täissuuruses.
Selles näites on tegemist originaalpildi väiksema versiooniga (thumbnail), kuid on piisavalt suur, et vaataja mõistaks, kellega on tegemist. Seega saab pilt lingi omaduse ning seeläbi võimaldab vaadata pilti originaal suuruses. Sellise hüpik-akna loomiseks lisame allpool oleva JavaScript koodi dokumendi "head" sektsiooni:
<script type="text/javascript">
function goImgWin(myImage,myWidth,myHeight,origLeft,origTop){
myHeight += 24;
myWidth += 24;
TheImgWin =
window.open(myImage,'image','height='+
myHeight + ',width=' + myWidth +
',toolbar=no,directories=no,status=no,' +
'menubar=no,scrollbars=no,resizable=no');
TheImgWin.resizeTo(myWidth+2,myHeight+30);
TheImgWin.moveTo(origLeft,origTop);
TheImgWin.focus();
}
</script>
Seda skripti võib just täpselt sellisena kasutada, ühe v. mitme pildi kuvamiseks. Hüpik-akna suurust ja paigutust saad ise muuta. Html kood, mis kirjutatakse "body" sektsiooni, on selline:
<a href="pic/tn_thilves-copy.jpg" target="_blank"
onclick="goImgWin('com/pic/tn_thilves-copy.jpg',220,350,100,50);
return false;"><img src="pic/thilves_tn_2.jpg"
width="85" height="66" border="0"
alt="Eesti Vabariigi President" align="left" /></a>
