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

Я использую 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. Как я могу предотвратить отображение этого скрипта в окончательной разметке страницы?

Источник

6 ответов

Решение

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

Источник

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

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

<asp:Menu IncludeStyleBlock="False" />
Источник

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

Источник

Я создал пользовательское меню (производное от 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);
    }
}

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

Источник

Я пытался переопределить 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 не работает. Должен, но не делает. :(

Источник

Я справился с этим, удалив встроенные стили и изменив некоторые имена классов с помощью 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');

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

Источник
Другие вопросы по тегам