Mellékelt példa megnyitása előtt szükséges egy WinStyledPopup nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A panel tulajdonképpen egy megfelelően formázott DIV kontrol, melyben egy táblázattal oldható meg a szükséges megjelenés. A kontrol létrehozásakor adnunk kell egy azonosítót (ID) mind a kontrolnak, mind pedig a fejlécet befoglaló <TD> elemnek, mivel a JavaScript kódban ezekre hivatkozunk.
A kontrol akkor jelenik meg, ha a lap valamelyik nyomógombjára kattintunk. A kontrolban elhelyezett címkéken megjelenítjük az esemény forrásobjektumának azonosítóját, valamint a panel aktuális X és Y koordinátáit. A kattintáskor az onShow nevű függvény fut le, mely elvégzi az említett műveleteket:
function doShow()
{
...
var randomNumber = (Math.random() * 10);
randomNumber = Math.ceil(randomNumber);
Az obj változóban tároljuk el a forrásobjektumot:
var obj = window.event.srcElement;
A koordináták beállítása véletlengenerátorral történik:
dobj.style.left = document.body.clientWidth/randomNumber;
dobj.style.top = document.body.clientHeight/randomNumber;
Majd az eddig rejtett DIV kontrolt láthatóvá tesszük:
dobj.style.visibility = "visible";
randomNumber = null;
}
A panel a fejlécen található képre kattintással zárható be.
Sokkal érdekesebb viszont a DIV vonszolása. Két fontos eseményt kell figyelnünk: az első az egérgomb lenyomása, majd felengedése.
A gomb lenyomásakor végrehajtunk egy alaphelyzetbe állítást, lefut az init függvény. Ebben csak azt kell figyelni, hogy a lapon kattintunk-e, vagy a kontrolon.
...
function init()
{
dobj = document.all.popupdiv;
var firedobj = event.srcElement;
var topelement = "BODY";
Az objektumok megalkotása után figyeljük, hogy a fejlécelemre kattintottunk-e:
if (firedobj.id == "dragbar")
{
Ha igen, akkor a kezdeti koordinátákat beállítjuk, valamint igazra állítunk egy változót, melynek FALSE értékéig tart majd a vonszolás:
offsetx = event.clientX;
offsety = event.clientY;
tempx = parseInt(dobj.style.left);
tempy = parseInt(dobj.style.top);
dragapproved = true;
document.onmousemove = doDragDrop;
}
}
A vonszolást a doDragDrop függvénnyel végezzük el:
function doDragDrop()
{
if (dragapproved)
{
dobj.style.left = tempx + event.clientX - offsetx;
dobj.style.top = tempy + event.clientY - offsety;
return false;
}
}
A mozgatás az egér mozgásával összhangban történik egészen addig, míg a logikai változót hamisra nem állítjuk az egér gombjának felengedésekor.
document.onmouseup = new Function("dragapproved=false");
A műveletek eredményeképpen az a hatás kelthető, mintha valóban egy Windows-os panel jelenne meg kattintáskor.