Most, hogy már az előkészületeket tisztáztuk elérkezdtünk ahhoz, hogy végre nekilássunk az ablak-kialakító javascript függvény megírásához.
A fenti képet egy konqueror(webkit) generálja.
most a sorozat utolsó cikkében összeáll a teljes kép. Választ kapunk arra, hogy miért is csináltunk Objektum osztályt, hogyan is használhatjuk fel a stíluslapot, amit már elkészítettünk, hogyan hívhatjuk életre a saját magunk által készített dialógus ablakot egy html kódban.
Ez alapján az egyszerű példa alapján már bárki nekiláthat a saját függvényeinek a megírásához, melyek sokkal többet tudhatnak, sokkal testreállóbbak, sokkal szebbek és ami a legfontosabb: saját készítésűek.
Na, de ennyit bevezetésként.
{code type=javascript}var DialogClass = function DialogClass(obj,title,width,height){
this.priv.obj = obj;
this.priv.eid = this.priv.cla+’#’+this.priv.obj+’#’+this.priv.uid;
this.imgPath = DialogClassImgPath;
this.img = DialogClassImg;
this.txt = DialogClassTxt;
this.priv.maximized = false;
document.write(
‘<div class=”DialogClass” id=”‘+this.priv.eid+'” id=”‘+this.priv.eid+'”>’+
‘<div class=”TitleBar” id=”‘+this.priv.eid+’#TitleBar”>’+
‘<div style=”display:table-row;width:100%;vertical-align:middle;”>’+
‘<div class=”Icon”><img src=”‘+this.imgPath+this.img.Unknownapp+'” /></div>’+
‘<div class=”Label” id=”‘+this.priv.eid+’#Title”></div>’+
‘<div class=”Button” id=”‘+this.priv.eid+’#MaximizeButton”><button type=”button” title=”‘+this.txt.Maximize+'” onclick=”‘+this.priv.obj+’.maximize()”>’+
‘<img src=”‘+this.imgPath+this.img.Maximize+'” />’+
‘</button></div>’+
‘<div class=”Button”><button type=”button” title=”‘+this.txt.Close+'” onclick=”‘+this.priv.obj+’.close()”>’+
‘<img src=”‘+this.imgPath+this.img.Close+'” />’+
‘</button></div>’+
‘</div>’+
‘</div>’+
‘<div class=”ContentBar” id=”‘+this.priv.eid+’#ContentBar”></div>’+
‘<div class=”ButtonBar” id=”‘+this.priv.eid+’#ButtonBar”></div>’+
‘</div>’
);
this.priv.dialog = document.getElementById(this.priv.eid);
this.priv.titleBar = document.getElementById(this.priv.eid+’#TitleBar’);
this.priv.titleLabel = document.getElementById(this.priv.eid+’#Title’);
this.priv.contentBar = document.getElementById(this.priv.eid+’#ContentBar’);
this.priv.buttonBar = document.getElementById(this.priv.eid+’#ButtonBar’);
this.priv.maximizeButton = document.getElementById(this.priv.eid+’#MaximizeButton’);
this.priv.cHeight =
getCssIntValue(‘DialogClassCss’,’div.DialogClass div.TitleBar’,’height’,40)+
getCssIntValue(‘DialogClassCss’,’div.Dialogclass div.Buttonbar’,’height’,60)+
getCssIntValue(‘DialogClassCss’,’div.DialogClass’,’padding’,1)*2+
getCssIntValue(‘DialogClassCss’,’div.DialogClass div.TitleBar’,’margin’,2)*2;
this.resize(width,height);
this.moveCenter();
this.setButtons([‘Ok’]);
this.setContent(”);
this.setTitle(title);
}
DialogClass.prototype = new ObjectClass(‘Dialog’,”);{/code}
Az utolsó sorral kezdeném az ismertetést, mivel ott származtatjuk az osztályunkat a korábban már említett “ObjectumClass” osztályból. Az objektum osztályának neve “Dialog” lesz, a nevét még nem tudjuk, az majd csak az objektum használatakor fog kiderülni.
Úgyhogy az objektum nevét a kostruktor várja, mint paramétert, csakúgy, mint az ablak címét, vagy méreteit. Természetesen amiatt, hogy az objektum nevét nem tudjuk, így az “eid” változó értékét újra kell számoltatni a konstruktorral.
A korábban globálisan definiált iconokat, illetve szövegeket tartalmazó struktúrákat egy egyszerűbb néven rögzítjük. A teljes méretet jelző változót hamissá tesszük és jöhet a háttérben történő kirajzolás. Az ablak természetesen nem fog látszani, amíg láthatóvá nem tesszük.
Beállítjuk a kinézetet, az azonosítókat és a meghívandó függvényeket, illetve elmentünk néhány később használandó html elemet, hogy egyszerűbb legyen a hozzáférés.
Ezt követően kiszámoljuk, hogy az adott stíluslap alapján mennyit kell levonni majd a ablak-tartalom teljes rendelkezésre álló méretéből.
Átméretezzük az ablakot a kívánt méretre, középre helyezzük, berakjuk az alapértelmezett “Ok” gombot, beállítjuk az üres tartalmat és a címet.
{code type=javascript}DialogClass.prototype.setButtons = function(buttonTypes){
buttons = ”;
for (i=0;i
if (this.img[buttonTypes[i]]!=”)
buttons+=’
‘;
buttons+=’‘;
}
this.priv.buttonBar.innerHTML = buttons;
}
DialogClass.prototype.setContent = function(contentHtml){
this.priv.contentBar.innerHTML = contentHtml;
}
DialogClass.prototype.setTitle = function(title){
this.priv.titleLabel.innerHTML = title;
}{/code}
A gombokat az innerHTML metódussal hozzuk létre. Ez az adott elem balső tartalmát írja felül, azaz törli a régit és szöveges módban létrahozhatunk html tartalmat. Kiválasztjuk a – jelen esetben – magyar feliratokat és az ikonokat, ügyelve arra, hogy néha nincsenek.
Ugyanezt tesszük a tartalommal, vagy a címmel, de azt változóként kapjuk majd meg. Most még nem tudjuk, hogy mi lesz az.
{code type=javascript}DialogClass.prototype.setGeometry = function(x,y,width,height){
this.move(x,y);
this.resize(width,height);
}
DialogClass.prototype.move = function(x,y){
this.priv.x = x;
this.priv.y = y;
this.priv.dialog.style.marginLeft = x;
this.priv.dialog.style.marginTop = y;
}
DialogClass.prototype.moveCenter = function(){
this.move(
(window.innerWidth/2)-(this.priv.dialog.style.width.replace(‘px’,”)/2),
(window.innerHeight/2)-(this.priv.dialog.style.height.replace(‘px’,”)/2)
)
}
DialogClass.prototype.resize = function(width,height){
this.priv.width = width;
this.priv.height = height;
this.priv.dialog.style.width = width;
this.priv.dialog.style.height = height;
this.priv.contentBar.style.height = this.priv.dialog.style.height.replace(‘px’,”)-this.priv.cHeight;
}{/code}
És itt van néhány méretező, áthelyező függvény. Erről nincs is mit mondani, annyira egyértelműek.
{code type=javascript}DialogClass.prototype.maximize = function(){
if (!this.priv.maximized) {
bs=document.getElementsByTagName(‘body’)[0].style;
ml=bs.marginLeft==”?8:bs.marginLeft.replace(‘px’,”);
mr=bs.marginRight==”?8:bs.marginRight.replace(‘px’,”);
mt=bs.marginTop==”?8:bs.marginTop.replace(‘px’,”);
mb=bs.marginBottom==”?8:bs.marginBottom.replace(‘px’,”);
this.priv.dialog.style.marginLeft = 0;
this.priv.dialog.style.marginTop = 0;
this.priv.dialog.style.width = window.innerWidth-ml-mr;
this.priv.dialog.style.height = window.innerHeight-mt-mb;
this.priv.contentBar.style.height = window.innerHeight-mt-mb-this.priv.cHeight-10;
this.priv.maximizeButton.innerHTML =
‘
legutóbbi hsz