أنماط ASP.NET MENUITEM الفردية

Question

وأنا على أمل أن استخدام عنصر تحكم القائمة ASP.NET للملاحة من خلال موقعي. ومع ذلك، لقد حصلت على شرط أن كل MENUITEM يجب أن تكون على غرار مختلف (ألوان مختلفة، سواء ثابت، وonHover). دون خلق فئة مخصصة التي من شأنها أن ترث من MENUITEM، هل هذا ممكن؟

والأفكار حول أفضل حل؟

Answer 1

وقصيرة من تجاوز RenderContents على القائمة، خياراتك محدودة جدا. معظم ما كنت تحتاجه هو الخاص ومختومة، وأنك لن تحصل في أي مكان هناك.

وبلدي الحل سيكون لاستخدام القوالب. هل يمكن استخدام MenuItem.Value أو العمق ووItemIndex لتحديد كل بند وتوفير سمات اللازمة.

في الصفحة:

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

في القانون (ناهيك عن سخافة هذا الرمز، انها مجرد لإثبات مبدأ):

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

إذا أي شخص آخر المطبات في نفس السؤال ...

وهناك طريقة سريعة وقذرة التي عملت بالنسبة لي هو اجبار محتويات HTML في Text MENUITEM (مع الهروب مناسبا). يمكنك بعد ذلك أسلوب وبالطريقة التي تريدها في CSS، أو حتى تعيين كل عنصر القائمة لاستخدام نمط مختلف:

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

ووHTML ينتهي داخل علامة <a>:

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

Answer 3

وحاول مثل هذا لتعيين نمط لكل عنصر القائمة:

ورمز وراء:

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

والطبقة CSS:

.bold
{
   font-weight: bold;
}

Answer 4

إذا توليد القائمة برمجيا، يمكنك إضافة نمط وonmouseover / onmouseout سمات عند إنشاء كل MENUITEM، منها مثلا:

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

وبدلا من ذلك، حاول إضافة هذه السمات في العلامات، والتحسس لا أقول لك أنها تعمل، لكنها عادة ما تفعل (أنا لم تختبر على وجه التحديد مع 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);"/>

قد يكون لديك بعض الحظ مع CSS محولات ودية .

وبالطبع يمكنك إنشاء ورثت الطبقة وإعادة العمل إجراءات تقديم ...