2009-04-01 36 views
11

Spero di utilizzare un controllo menu ASP.NET per la navigazione attraverso il mio sito. Tuttavia, ho il requisito che ogni MenuItem debba essere stilizzato in modo diverso (colori diversi, sia statici che onHover). Senza creare una classe personalizzata che erediterebbe da MenuItem, è possibile?ASP.NET MenuItem Stili individuali

Pensieri su una soluzione migliore?

risposta

10

corto di rilevante RenderContents sui menu, le opzioni sono molto limitate. La maggior parte di ciò di cui hai bisogno è privato e sigillato e non andrai da nessuna parte.

La mia soluzione sarebbe utilizzare i modelli. È possibile utilizzare MenuItem.Value o Depth e ItemIndex per identificare ciascun elemento e fornire gli attributi necessari.

In Pagina:

<asp:Menu ID="menu" runat="server" DynamicHorizontalOffset="2" StaticSubMenuIndent="10px"> 
    <Items> 
     <asp:MenuItem Text="Item 1" Value="value 1"> 
      <asp:MenuItem Text="Item 2" Value="value 2"> 
       <asp:MenuItem Text="Item 3" Value="value 3"></asp:MenuItem> 
      </asp:MenuItem> 
      <asp:MenuItem Text="Item 4" Value="value 4"> 
       <asp:MenuItem Text="Item 5" Value="value 5"></asp:MenuItem> 
      </asp:MenuItem> 
      <asp:MenuItem Text="Item 6" Value="value 6"></asp:MenuItem> 
     </asp:MenuItem> 
     <asp:MenuItem Text="Item 7" Value="value 7"></asp:MenuItem> 
     <asp:MenuItem Text="Item 8" Value="value 8"></asp:MenuItem> 
    </Items> 
    <StaticItemTemplate> 
     <asp:Panel runat="server" ForeColor='<%# GetItemColor(Container) %>'> 
      <%# Eval("Text") %> - <%# Eval("Value") %> 
     </asp:Panel> 
    </StaticItemTemplate> 
    <DynamicItemTemplate> 
     <asp:Panel ID="Panel1" runat="server" ForeColor='<%# GetItemColor(Container) %>'> 
      <%# Eval("Text") %> - <%# Eval("Value") %> 
     </asp:Panel> 
    </DynamicItemTemplate> 
</asp:Menu> 

In Code (lasciamo perdere la stupidità di questo codice, è solo per dimostrare il principio):

public Color GetItemColor(MenuItemTemplateContainer container) 
{ 
    MenuItem item = (MenuItem)container.DataItem; 

    //identify based value 
    if (item.Value == "value 2") 
     return Color.Brown; 

    //identify based on depth and index 
    if (item.Depth == 0) 
     switch (container.ItemIndex) 
     { 
      case 0: return Color.Red; 
      case 1: return Color.Blue; 
      case 2: return Color.DarkGreen; 
      default: 
       return Color.Black; 
     } 
    else 
     switch (container.ItemIndex) 
     { 
      case 0: return Color.Purple; 
      case 1: return Color.Aqua; 
      case 2: return Color.DarkOrange; 
      default: 
       return Color.Black; 
     } 
} 
+0

funziona perfettamente per quello per cui sto girando. – CodeMonkey1313

+0

Non vedo come questo risolva il suo requisito di colore "al passaggio del mouse". Mentre il controllo del pannello ha una proprietà ForeColor, come hai mostrato, non ha nulla come onmouseover.Se sei interessato solo ai colori delle voci di menu predefiniti, puoi fare qualcosa come: Buggieboy

+0

@Buggieboy probabilmente applica questa teoria a ... – clamchoda

-3

Se si genera il menu di programmazione, è possibile aggiungere lo stile e onmouseover/onmouseout attributi durante la creazione di ogni MenuItem, ad esempio:

menuItem.Attributes["style"] = "color: red;"; 
menuItem.Attributes["onmouseover"] = "javascript:Highlight(this);"; 

In alternativa, prova ad aggiungere questi attributi nel codice, IntelliSense non dirlo che funzionano, ma di solito fare (non ho ancora testato specificamente con MenuItems):

<asp:menuitem navigateurl="Home.aspx" 
    text="Home" 
    imageurl="Images\Home.gif" 
    popoutimageurl="Images\Popout.jpg" 
    tooltip="Home" 
    style="color: red;" onmouseover="Highlight(this);" onmouseout="Unhighlight(this);"/> 

si potrebbe avere qualche fortuna con CSS Friendly Adapters.

Naturalmente è possibile creare una classe ereditata e ri-lavoro le routine di rendering ...

+1

aggiungendolo al markup non funziona, si traduce in un errore del parser – CodeMonkey1313

+1

E MenuItem non ha un membro attributi. – CodeMonkey1313

+0

E non esiste alcuna proprietà mouseover per menuitem. – Buggieboy

11

se qualcun altro urta la stessa domanda ..

Un metodo rapido e sporco che ha funzionato per me è forzare i contenuti HTML nel MenuItem Text (con escape appropriato). È quindi possibile lo stile in qualsiasi modo che si desidera nel CSS, o anche impostare ogni voce di menu per utilizzare uno stile diverso:

<asp:MenuItem Text="<span class=&quot;menuitem_text&quot;>Text Here</span>" /> 

Il codice HTML finisce all'interno della <a> tag:

<li><a ...><span class="menuitem_text">Text Here</span></a></li> 
+0

Questo funziona sicuramente, ma non sono sicuro che sia troppo sporco o no? – ken2k

+5

Molto sporco .. Mi piace. Non penso che tu possa diventare troppo sporco con Web Forms per essere onesto, è abbastanza incasinato per cominciare. –

0

Prova come questo per impostare lo stile per ogni voce di menu:

codice dietro:

mnuMail.Items[1].Text = "<span class=\"bold\">Inbox</span>"; 

classe CSS:

.bold 
{ 
    font-weight: bold; 
} 
Problemi correlati