C# - Windows-stílusú párbeszédablak készítése

forráskód letöltése
A .NET kontroljainak köszönhetően a Web lapjainkon elhelyezett elemek megjelenése idézheti a Windows-rendszerben megszokott elemekét. Ehhez nem kell mást tenni, mint ötvözni a HTML elemek és valamilyen script-nyelv képességeit. Ezekre támaszkodva érdekességképpen cikkünkben elkészítünk egy üzenetablakot, mely felbukkan ha szükség van rá, bezárható, és fejlécénél fogva vonszolható is.
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.