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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
- Modificare il controllo TreeView, il 2 dicembre 2008 alle 19:27
- Perfezioniamo il ProfileDataSorce, il 13 ottobre 2008 alle 11:14
- Un DataSource per il Profile, il 10 ottobre 2008 alle 15:06
- TrueSpace 7 gratuito, il 24 luglio 2008 alle 10:59
- adesso dico la mia sull'Iphone, il 22 luglio 2008 alle 10:33
- Come tutto ebbe inizio, il 21 luglio 2008 alle 09:22