Creare un web custom control - Parte 2

HTML e Javascript

Il controllo che vogliamo realizzare è un menu verticale in cui l'elemento selezionato viene evidenziato con due righe orizzontali sopra e sotto con uno sfondo di colore diverso con la prerogativa di poter settare il coefficiente di trasparenza; inoltre un'altra peculiarità è quella di poter mostrare dei baloon in corrispondenza dell'elemento sul quale si posiziona il mouse.

Il menu è stato ottenuto, a differenza dei menu CSS più recenti, non con i tag <UL> e <LI> (come spiegato qui per esempio), ma nel più tradizionale metodo con una serie di <DIV>, uno per ogni voce di menu oltre a uno per lo sfondo dell'elemento selezionato, uno per le sottolineature superiori ed inferiori sempre dell'elemento selezionato, uno per il contenuto del baloon e uno per l'ombra del baloon.

Il codice HTML di cui si compone un menu è quindi di questo tipo:

<DIV id=NomeMenu ... >
      <DIV ... >Menu 1</DIV>
      <DIV ... >Menu 2</DIV>
      ...
      <DIV id=NomeMenu_bkg ...></DIV>
      <DIV id=NomeMenu_border ...></DIV>
      <DIV id=NomeMenu_baloon ...>
      <DIV id=NomeMenu_ombra ...></DIV>
            <TABLE>
                  <TR>
                        <TD class=tooltip id=NomeMenu_text>&nbsp;</TD>
                  </TR>
            </TABLE>
            <IMG id=NomeMenu_freccia ... >
      </DIV>
</DIV>

Evidentemente, non facendo ricorso ad automatismi CSS, a corredo del controllo c'è una libreria di funzioni javascript che gestisce l'interazione utente<->browser<->server; clicca qui per visualizzare la libreria, oppure qui per scaricarla.

// Raccolta di variabili e funzioni javascript necessarie al menu

var curdiv;
var curmenuctrl;
var curmenuitem;
var curclass;

// Attiva l'elemento di menu 'num' del controllo di nome 'cntrl'
function YVSetMenu(cntrl,num)
{
      var m = document.getElementById(cntrl).getElementsByTagName("div")[num];
      var y = m.offsetTop;
      var h = m.clientHeight;

      bkg = document.getElementById(cntrl + "_bkg");
      brd = document.getElementById(cntrl + "_border");
      bkg.style.height = h;
      bkg.style.top = y;
      brd.style.height = h;
      brd.style.top = y;
      bkg.style.display = "block";
      brd.style.display = "block";
}

// Seleziona l'elemento dimenu cliccato e fa una chiamata per generar l'evento lato server
function YVChgBkgMnu()
{
      YVSetMenu(curmenuctrl, curmenuitem);
      __doPostBack(curmenuctrl, curmenuitem);
}

// Mostra il tooltip i corrispondenza dell'elemento di
// menu sul quale si trova il puntatore del mouse
function YVShowTooltip(cntrl, mnu, txt, clss)
{
      if(cntrl!=undefined)
      {
            curdiv = document.getElementById(cntrl).getElementsByTagName("div")[mnu];
            curmenuitem = mnu;
            curmenuctrl = cntrl;
            curclass = clss;
            document.body.style.cursor = "hand";
      
            posy = curdiv.offsetTop + (curdiv.offsetHeight / 2);
            curdiv.className = curclass;
            
            if(txt!="")
            {
                  document.getElementById(curmenuctrl + "_baloon").style.top = posy - 77;
                  document.getElementById(curmenuctrl + "_baloon").style.display = 'block';
                  document.getElementById(curmenuctrl + "_text").innerHTML= unescape(txt);
            }
            else
            {
                  document.getElementById(curmenuctrl + "_baloon").style.display = 'none';
            }
      }
      else
            document.getElementById(curmenuctrl + "_baloon").style.display = 'block';
}

// Nasconde il tooltip
function YVHideTooltip(clss)
{
      document.body.style.cursor = "default";
      curdiv.className = clss;
      document.getElementById(curmenuctrl + '_baloon').style.display = 'none';
}

Altre funzioni javascript sono cablate all'interno del codice HTML nel momento in cui viene generato dall'evento Render del controllo, ma questo verrà visto in una prossima lezione.