
	Kezdőlap Cikkek Tallózó Cikksorozatok Összes cikk Fórum Fórum kezdőlap Archívum Hírlevél Letöltés Állás, munka Webszolgáltatás Megtekintés Aktuális TV műsor TV csatornák listája Könyvek Software Offline évkönyvek Delphi 1999 Delphi 2000 Delphi 2001 Delphi 2002 Delphi 2003 Visual Studio.NET C# 2001 Visual Studio.NET C# 2002 Visual Studio.NET C# 2003 Windows 2001 Windows 2002 Windows 2003 Havilapok Keresés Oldaltérkép Impresszum

Bejelentkezés

E-mail:
Jelszó:

| Regisztráció | Jelszó? |

Egeret követő HTML blokk

Példaprogram letöltése

12072 bájt

Tegyünk egy Panel-re tetszőleges web-es kontrolokat, lássuk el ezeket tetszőleges funkciókkal és kinézettel, majd az így létrejött HTML blokkot bírjuk rá arra, hogy folyamatosan kövesse az egér mozgását a képernyőn. Ezáltal folyamatosan jeleníthetünk meg adatokat a felhasználó számára olyan web oldalakon, melyek tartalma nem fér el egy képernyőn, és azt állandóan scroll-ozni kell. Mivel az adat kijelző Panel-ünk mindig az egér mellett lesz, így a szükséges adatok mindig láthatóak maradnak.

Mellékelt példa megnyitása előtt szükséges egy FollowMouse 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 megvalósítás két lépésből áll. Az első, hogy kezelnünk kell az OnMouseMove eseményt a web oldalon. Ennek érdekében létrehozunk egy doMouseMove nevű függvényt, melyet a BODY HTML elemnél adunk meg eseménykezelőként.

  <body MS_POSITIONING="GridLayout" onmousemove="doMouseMove()">

Második lépés maga az eseménykezelő létrehozása lesz, mely nem más, mint egy egyszerű kis javascript. Mielőtt ennek nekilátnánk, helyezzünk a web lapra egy Grid Layout Panel kontrolt a ToolBox HTML lapjáról. E kontrolra tetszőleges további web kontrolokat helyezhetünk igény szerint. A javascript-nek annyi lesz a feladata, hogy ezt a Grid Layout Panel-t mozgassa. A HTML kódot tekintve ebből a Panel-ből egy <DIV> lesz.

Ahhoz, hogy javascript-ből elérhessük ezt a <DIV> objektumot, szükséges hogy egy egyedi névvel lássuk el. Ezért váltsuk át a WebForm1-et HTML nézetre és ott lássuk el egyedi azonosítóval ezt a <DIV> objektumot.

<DIV id="followmouse"

A javascript-ben ezen objektumnak a pixelLeft és a pixelTop tulajdonságát kell megváltoztatnunk oly módon, hogy az aktuális egér pozíció mellé kerüljön. Ez egér aktuális pozíciója az event objektum x és y property-jén keresztül kérdezhető le.

    private void Page_Load(object sender, System.EventArgs e)
    {
      if (!IsPostBack)
      {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script language=\"javascript\">\n");
        sb.Append("  function doMouseMove()\n");
        sb.Append("  {\n");
        sb.Append("    document.all[\"followmouse\"].style.pixelLeft=event.x+20;\n");
        sb.Append("    document.all[\"followmouse\"].style.pixelTop=event.y+10;\n");
        sb.Append("    document.all[\"Label1\"].innerText=event.x;\n");
        sb.Append("    document.all[\"Label2\"].innerText=event.y;\n");
        sb.Append("  }\n");
        sb.Append("</script>");
        RegisterClientScriptBlock("doMouseMove", sb.ToString());
      }
    }

Könyv

Ez a cikk megtalálható ebben a könyvben: C# Software Offline 2002 évkönyv 578. oldal

Felhasználási feltételek

A Software Online szoftverfejlesztői magazin mindegyik cikke, minden megjelent képe, és egyéb publikált anyaga szerzői jog védelme alatt áll! Bármilyen formában történő másodlagos terjesztésük, közzétételük vagy felhasználásuk kizárólag a kiadó előzetes írásbeli engedélyével történhet!