Создание веб-сайта при помощи ASP.NET 2.0 и каскадной таблицы стилей (CSS) - Разметка для элемента Menu при помощи адаптеров элементов управления, поддерживающих CSS
ОГЛАВЛЕНИЕ
Разметка для элемента Menu при помощи адаптеров элементов управления, поддерживающих CSS
Чтобы увидеть разницу при использовании адаптеров элементов управления, поддерживающих CSS, мы рассмотрим конкретный пример. Представьте, что мы имеем элемент управления Menu, определенный для отображения меню с единственным элементом меню верхнего уровня и четырьмя подпунктами элемента меню (потомками). Такая структура может быть статически определена в элементе Menu при помощи следующей декларативной разметки:
<asp:Menu ID="ProductMenu" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Products">
<asp:MenuItem Text="Beverages" />
<asp:MenuItem Text="Condiments" />
<asp:MenuItem Text="Confections" />
<asp:MenuItem Text="Dairy/Milk" />
</asp:MenuItem>
</Items>
</asp:Menu>
Также заметьте, что свойство BackColor Menu установлено в Yellow и свойства BackColors элементов меню установлены в Pink. Конечная обработанная HTML разметка, использующая стандартную логику обработки элемента Menu будет выглядеть следующим образом:
<table id="ProductMenu" class="ProductMenu_2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun0"><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products')">Products</a></td><td style="width:0;"><img src="/CSSControlAdapters/WebResource.axd?d=chn_rjDXviMiG52QjFyPeTtWQOV3vwPBosett_KzYtE1&t=632965002926288600" alt="Expand Products" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table><div id="ProductMenun0Items" class="ProductMenu_0 ProductMenu_3">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun1">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Beverages')">Beverages</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun2">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Condiments')">Condiments</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun3">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Confections')">Confections</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun4">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu','Products\\Dairy/Milk')">Dairy/Milk</a></td>
</tr>
</table></td>
</tr>
</table><div class="ProductMenu_0" id="ProductMenun0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/CSSControlAdapters/WebResource.axd?d=qidxSK8lNw1v6pL8IQZxzZrT3SMuvVDHqZfjfzhu6MM1&t=632965002926288600" alt="Scroll up" />
</div><div class="ProductMenu_0" id="ProductMenun0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/CSSControlAdapters/WebResource.axd?d=uuL5BWm1omFEgQuN_dcSXY3whrEsc7zS_QoWROKGtMo1&t=632965002926288600" alt="Scroll down" />
</div>
</div>
Как мы видим данная разметка использует теги <table> для каждого элемента меню. Здесь не указаны также ссылки на внешние файлы JavaScript, которые могут обрабатывать отображение и сокрытие дочерних элементов пункта меню.
С внедрением адаптеров элементов управления , поддерживающих CSS, обработанная разметка будет изменена на более компактную:
<div class="AspNet-Menu-Horizontal" id="ProductMenu">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ProductMenu','bProducts')" class="AspNet-Menu-Link">
Products</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Beverages')" class="AspNet-Menu-Link">
Beverages</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Condiments')" class="AspNet-Menu-Link">
Condiments</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Confections')" class="AspNet-Menu-Link">
Confections</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="javascript:__doPostBack('ProductMenu','bProducts\\Dairy\\Milk')" class="AspNet-Menu-Link">
Dairy/Milk</a>
</li>
</ul>
</li>
</ul>
</div>
Каждому элементу меню назначается соответственно названный класс CSS (AspNet-Menu, AspNet-Menu-WithChildren, AspNet-Menu-Leaf и т.д.). Настройки отображения для данных классов могут быть указаны в страничном элементе <style> или, что будет идеальным вариантом, в отдельном файле CSS.
Вывод
ASP.NET предоставляет огромную гибкость в обработке элементов управления (и следовательно, страниц). Элементы управления автоматически используют адаптивную обработку для создания соответствующей разметки, основываясь на типе браузера, с которого была открыта страница. При необходимости обработка может быть полностью настроена при помощи адаптеров элементов управления. В данной статье мы рассмотрели основы адаптеров элементов управления и исследовали бесплатный набор адаптеров элементов управления, поддерживающих CSS компании Microsoft. Вы можете внедрить их в свои веб-сайты для того, чтобы элементы управления Menu, TreeView, GridView, DetailsView и другие производили обработку, используя техники CSS. Более того, данные адаптеры элементов управления заставят разработчиков использовать классы CSS для указания настроек отображения.
Scott Mitchell