C# - Menü és színes scrollbar megjelenítése ASP.NET alkalmazásokban

forráskód letöltése
Cikkünkben két apró lehetőséggel ismerkedünk meg, melyek könnyedén beépíthetők webes alkalmazásainkba, és kisebb színelemek hozzáadásával hangulatossá, egyedivé tehetik weblapjainkat. Az egyik témánkban egy menüt valósítunk meg néhány DHTML elem, és egy kis JavaScript-kód felhasználásával, a cikk második részében pedig bemutatjuk, hogyan tehetők az oldalak ScrollBar vezérlői színessé.
Mellékelt példa megnyitása előtt szükséges egy TipsTricksMS 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.
DHTML menü
Menü készítésével rengeteg helyet takaríthatunk meg az azt felhasználó weblapon, hiszen ennek bizonyos részei csak meghatározott esetekben válnak láthatóvá, általában az egérmutatót kell az adott menüpont fölé tolnunk ahhoz, hogy újabb részek, almenüpontok láthatóvá váljanak. Ily módon több hasznos területet használhatunk fel tartalmaink megjelenítésére.
A mellékelt alkalmazás két .aspx lapot tartalmaz, ezek közül a WebForm1.aspx lapon készítünk el egy DHTML menüt. A menü elkészítéséhez először HTML elemeket rakunk statikus módon a weblapra, majd stílus elemek, illetve néhány JavaScript függvény segítségével tesszük ezeket mozgékonnyá, dinamikussá.
A menü az egyszerűség kedvéért négy fő menüpontot tartalmaz, a két középső menüpont pedig további kettő, illetve három almenüpontra bomlik akkor, amikor az egeret az adott menüpont fölé toljuk.
Az alkalmazás mappájának /resources alkönyvtárában helyeztük el azokat a segédállományokat, melyek a JavaScript-kódot (Menü.js), valamint a stílus-osztályokat (Menü.css) tartalmazzák.
Ezeket elérhetővé kell tennünk az oldal számára, így annak fejléc mezőjében az alábbi hivatkozásokat kell betennünk:
<link rel="stylesheet" type="text/css" href="/TipsTricksMS/resources/Menu.css">
<script src="/TipsTricksMS/resources/Menu.js" language="javascript" type="text/javascript"></script>
Az oldal szerkesztési idejű HTML-kódjába a következőket kell beszúrnunk, mint statikus tagokat, melyek a vázát adják a menünek. Az első menüpont, mely nem ágazik el:
<ul id="mainmenu">
  <li><a href="http://www.softwareOnline.hu">
SoftwareOnline</a></li>
A második pont, melynek két alpontja van:
  <li><a href="">Linkek</a>
    <ul>
      <li><a href="http://www.animare.hu">animare.hu</a></li>
      <li><a href="WebForm2.aspx">Scroll-oldal</a></li>
    </ul></li>
  ...
</ul>
A harmadik és negyedik pontok az előzők analógiájára már könnyen elképzelhetők.
A következőkben megvizsgáljuk, hogyan festenek a Menü.js állományban elhelyezett függvények, melyek dinamizmust adnak a menüpontoknak. A <body onload=”initialiseMenu()”> elem megadásával gondoskodunk arról, hogy az oldal megjelenésekor a mellékelt JavaScript-állományban megírt fő metódus lefusson, amely további két függvény hívásával jeleníti meg az egyes menüpontokat.
A főmetódus által meghívott függvények egyike a showSubMenu, mely megjeleníti a menüpontokat reprezentáló <li> elemeket. Működését tekintve végigmegy az adott menüpont <ul> elemein, és mindegyiket megjeleníti a mellékelt Menü.css stílus-állomány adott osztályában megfogalmazott módon. Mindezt akkor, ha az egér a menüpont fölött van:
function showSubMenu(){
  var objThis = this;  
  for(var i = 0; i  < objThis.childNodes.length; i++)
  {
    if(objThis.childNodes.item(i).nodeName == "UL")
    {
      objThis.childNodes.item(i).style.display = "block";
    }    
  }
}
A másik hideSubMenu elnevezésű függvény pedig elrejti az almenüpontokat akkor, amikor az egeret elmozdítjuk a menüpont felületéről:
function hideSubMenu()
{
  var objThis = this;
  for(var i = 0; i  < objThis.childNodes.length; i++)
  {
    if(objThis.childNodes.item(i).nodeName == "UL")
    {
      objThis.childNodes.item(i).style.display = "none";
      return;
    }
  }
}
A főmetódus megvizsgálja az összes külső <li> tagot, hogy van-e <ul> tagja. Ha van, akkor kibontja őket úgy, hogy sorban azokon is végigmegy. Az egyes elemek onmouseover és onmouseout eseményéhez hozzárendeli a fent kifejtett függvényeket, így a további műveleteket azok végzik:
...
objLI.onmouseover=showSubMenu;
objLI.onmouseout=hideSubMenu;
...
Az egyes menüpontok elszíneződését, illetve dinamizmusát megfelelően megválasztott szín osztályokkal érhetjük el, melyeket a mellékelt Menü.css állományban helyeztünk el, és a JavaScript-függvények rendelnek osztályokat az egyes HTML-elemekhez.
Színes ScrollBar készítése
A WebForm1.aspx lap menüjének egyik pontjára kattintva juthatunk el a WebForm2.aspx lapra, ahol a ScrollBar vezérlőnek kék színt adtunk úgy, hogy a speciális stílus elemeknek színeket adtunk értékül. Az oldal fejlécébe helyezzük el a hivatkozást a stílus állományra, ennek neve Scrollbar.css:
<link rel="stylesheet" type="text/css" href="/TipsTricksMS/resources/Scrollbar.css">
Az állomány egyetlen osztálya a body osztály, melynek property-jeit színekkel töltöttük fel:
body
{
  scrollbar-face-color: #6DC3FF; 
  scrollbar-highlight-color: #FFFFFF; 
  scrollbar-shadow-color: #4DA3DF; 
  scrollbar-3dlight-color: #4DA3DF; 
  scrollbar-arrow-color: #FFFFFF; 
  scrollbar-track-color: #EEEEEE; 
  scrollbar-darkshadow-color: #000000;
}