Modificare i CSS Friendly Control Adapters

di Marco Leoncini, in asp.net,

in particolare mi occuperò del WebControl Menu.

Utilizzando l'adapter il funzionamento del menu è completamente basato su css, cosa buona e giusta, ma solo fino a quando desideriamo che il menù si apra al passaggio del mouse.

ma naturalmente presto il vostro progetto richiederà che il menu su apra al click, la cosa non è difficile da realizzare, per prima cosa modifichiamo il css in modo da evitare la visualizzazione del menu al passaggio del mouse, cambiamo questo:

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
visibility: visible;
}

in :

ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
visibility: visible;
}

è il momento di passare al javascript, apriamo il file MenuAdapter.js, in particolare nella funzione SetHover__AspNetMenu modifichiaro la registrazione dell'event handler:

if(items[k].className.indexOf(menuWithChildren) > -1 & items[k].parentNode.className == topmostClass)
{
if (items[k].addEventListener)
{
items[k].addEventListener('click', Click__AspNetMenu, false);
}
else if (items[k].attachEvent)
{
items[k].onclick = function() { Click__AspNetMenuie(this);}
}
}

il passo successivo è creare i due gestori per l'evento click:

function Click__AspNetMenu(e)
{
if(typeof(e) != "undefined")
{
e.stopPropagation();
}
Unhover__AspNetMenu(openTab);
openTab = this;
Hover__AspNetMenu(this);
}

function Click__AspNetMenuie(element)
{
var e = window.event;
Unhover__AspNetMenu(openTab);
openTab = element;
Hover__AspNetMenu(element);
e.cancelBubble=true;
}

infine è necessario modificare nelle funzioni Unhover__AspNetMenu e Hover__AspNetMenu la condizione per la creazioni di quelli elementi che permettono di aggirare alcune limitazioni di ie6

 if (isPreIE7 & typeof(element) != "undefined")

ed infine non dimentichiamoci di associare al click anche la chiusura del menu correntemente aperto

document.onclick = function() { Unhover__AspNetMenu(openTab);}

nei prossimi giorni dovrei riuscire a inserire tutto nel Lab

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Nella stessa categoria
I più letti del mese