ASP.NET MenuItem Kiểu riêng lẻ

Question

Tôi hy vọng sẽ sử dụng Trình đơn điều khiển ASP.NET để điều hướng qua trang web của tôi. Tuy nhiên, tôi đã có một yêu cầu rằng mỗi MenuItem phải được tạo kiểu khác nhau (các màu khác nhau, cả tĩnh và onHover). Nếu không tạo ra một lớp tùy chỉnh mà sẽ kế thừa từ MenuItem, điều này có khả thi không?

Suy nghĩ về giải pháp tốt hơn?

Answer 1

ngắn của trọng RenderContents trên Menu, lựa chọn của bạn là rất hạn chế. Hầu hết những gì bạn cần là riêng tư và niêm phong và bạn sẽ không nhận được bất cứ nơi nào ở đó.

Giải pháp của tôi là sử dụng mẫu. Bạn có thể sử dụng MenuItem.Value hoặc Depth và ItemIndex để xác định từng mục và cung cấp các thuộc tính cần thiết.

Trong Trang:

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

Trong Mã (đừng bận tâm dại của mã này, nó chỉ là để chứng minh nguyên tắc):

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

Nếu bạn tạo menu lập trình, bạn có thể thêm các phong cách và onmouseover/onmouseout thuộc tính khi tạo từng MenuItem, ví dụ:

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

Ngoài ra, hãy thử thêm những thuộc tính trong đánh dấu, IntelliSense sẽ không nói bạn rằng họ làm việc, nhưng họ thường làm (tôi chưa thử nghiệm cụ thể với 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);"/> 

Bạn có thể có một số may mắn với CSS Friendly Adapters.

Tất nhiên bạn có thể tạo một lớp kế thừa và tái công việc thói quen vẽ ...

Answer 3

Nếu bất cứ ai khác va chạm vào cùng một câu hỏi ..

Phương pháp nhanh chóng và bẩn phù hợp với tôi là buộc nội dung HTML vào MenuItem Text (với cách thoát thích hợp). Sau đó bạn có thể tạo kiểu nó bất kỳ cách nào bạn muốn trong CSS của bạn, hoặc thậm chí thiết lập từng mục trình đơn để sử dụng một phong cách khác nhau:

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

HTML kết thúc bên trong <a> tag:

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

Answer 4

Hãy thử như này để thiết lập phong cách cho mỗi mục menu:

Mã đằng sau:

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

Lớp CSS:

.bold 
{ 
    font-weight: bold; 
}