Как я могу отключить элемент управления Menu от стилизации самого себя в javascript?

Question

Я использую Visual Studio 2010 и ASP.NET 4.0 для рендеринга элемента управления Menu в виде списка HTML, поэтому я могу стилизовать его с помощью CSS. Вот код, который я использую ниже

<asp:Menu ID="navlist" runat="server" Orientation="Horizontal"
SkipLinkText="" ClientIDMode="Static" DataSourceID="MenuSource" 
MaximumDynamicDisplayLevels="0" IncludeStyleBlock="False" 
StaticDisplayLevels="2">
</asp:Menu>

Это приводит к следующему HTML

<!-- URL shortened -->
<script src="/WebResource.axd?...t=634066906994188146"type="text/javascript"></script>

<div id="navlist">
    <ul>
        <li><a href="link1.html">Link 1</a></li>
        <li><a href="link2.html">Link 2</a></li>
    </ul>
</div>

На первый взгляд это похоже на то, что я хотел. Тем не менее, если я открою WebResource.axd, появится целая куча javascript-кода, связанного с меню. Часть этого кода применяет свои собственные встроенные стили к списку. Используя FireBug, я могу просматривать разметку HTML после выполнения javascript, и она выглядит примерно так:

<div id="navlist" style="float: left;">
    <ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
        <li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link1.html" class="level2 static" tabindex="-1">Link 1</a>
        </li><li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link2.html" class="level2 static" tabindex="-1">Link 2</a></li>
    </ul>
</div>

Эти встроенные стили в конечном итоге влияют на макет моей страницы. У меня нет необходимости ни в одном из сценариев в WebResource.axd. Как я могу предотвратить отображение этого скрипта в окончательной разметке страницы?

Answer 1

Вы можете указать меню НЕ стилизовать себя, если вы хотите просто использовать атрибут IncludeStyleBlock

По умолчанию включено «true»

<asp:Menu IncludeStyleBlock="False" />

Answer 2

На вашем css используйте! Важное

Answer 3

Я создал пользовательское меню (производное от System.Web.UI.WebControls.Menu) и заменил OnPreRender:

public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
    protected override void OnPreRender(EventArgs e)
    {
        // Don't call base OnPreRender
        //base.OnPreRender(e);
    }
}

Это добилось цели.

Answer 4

Вы не можете сделать много, чтобы изменить готовые функциональные возможности элемента управления Menu.Однако вы можете создать свой собственный элемент управления или использовать CSS Control Adapter Toolkit .

Answer 5

Я пытался переопределить asp:menu с помощью пользовательского класса, но до сих пор не научился просто удалять все атрибуты из тегов ul, li и a, чтобы я мог применить свой собственныйCSS-код в чистый список.

Imports Microsoft.VisualBasic
Namespace MCO

Public Class MyCustomMenu
    Inherits Menu

        Protected Overrides Sub OnPreRender(e As EventArgs)
            ' don't use this:
            ' MyBase.OnPreRender(e)

            ' but leaving this blank produces NO rendered menu
        End Sub
    End Class
End Namespace

---

Я также попробовал метод jQuery:

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

Но поскольку веб-ресурс .net является последним что бы запустить, я обнаружил, что линия jQuery не работает.Это должно , но это не так.:(

Answer 6

---

Мне удалось это, удалив встроенные стили и изменив некоторые имена классов с помощью jQuery.Конечно, вы можете изменить стиль каждого элемента, но он просто производит много ненужного кода CSS.

Используйте это, если хотите удалить эти встроенные стили из li, a, ul и divs:

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

Во-вторых, вы можете изменить эти имена классов, например:

$("#from-this-element").removeClass(.remove-me).addClass('.new-class');

И я думаю, что это лучший способ использовать этот скрипт после загрузки страницы.