ASP.NET MenuItem Indywidualne style

Question

Mam nadzieję, że użyję kontrolki menu ASP.NET do nawigacji po mojej witrynie. Mam jednak wymaganie, aby każdy element menuItem miał inny styl (różne kolory, zarówno statyczny, jak i onHover). Bez tego nie można utworzyć klasy niestandardowej, która dziedziczy po MenuItem?

Myśli o lepszym rozwiązaniu?

Answer 1

Krótki nadrzędnych RenderContents w menu, opcje są bardzo ograniczone. Większość tego, czego potrzebujesz, jest prywatna i zamknięta, a nigdzie się tam nie dostaniesz.

Moim rozwiązaniem byłoby użycie szablonów. Możesz użyć MenuItem.Value lub Depth and i ItemIndex, aby zidentyfikować każdy element i podać niezbędne atrybuty.

na stronie:

<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> 

w kodzie (nie szkodzi głupotę tego kodu, to jest po prostu zademonstrować zasadę):

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; 
     } 
} 

Answer 2

Jeśli wygenerować menu programowo, można dodać styl i onmouseover/onmouseout atrybutów podczas tworzenia każdej MenuItem, np:

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

Ewentualnie spróbuj dodać te atrybuty w znacznikach, IntelliSense nie powiem Państwo, że pracują, ale zwykle zrobić (nie testowałem go specjalnie z elementów menu):

<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);"/> 

można mieć trochę szczęścia z CSS Friendly Adapters.

Oczywiście można tworzyć dziedziczna klasa i re-work Procedury renderingu ...

Answer 3

czy ktoś wpadnie na to samo pytanie ..

Szybką i brudną metodą, która zadziałała, jest wymuszenie umieszczenia zawartości HTML w MenuItem Text (z odpowiednim escapingiem). Następnie można projektować je w dowolny sposób w CSS, a nawet ustawić każdy element menu, aby użyć innego stylu:

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

HTML kończy się wewnątrz <a> tagu:

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

Answer 4

Try jak aby ustawić styl dla każdej pozycji menu:

Kod tyle:

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

Klasa CSS:

.bold 
{ 
    font-weight: bold; 
}