Modificare i CSS Friendly Control Adapters

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

Nella stessa categoria

Commenti

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.

© 1998-2008 - nostromo - Il blog di Marco Leoncini

TagCloud
BLOG INFO
  • Post: 230
  • Commenti: 95
  • TrackBacks: 23
  • Feed blog e contenuti tecnici: RSS
  • Feed blog: RSS Atom OPML

MVP
CATEGORIE
I PIÙ LETTI DEL MESE
IN EVIDENZA