Нестандартный раскрывающийся список на ASP.NET AJAX

В этой статье мы рассмотрим пример создания раскрывающегося списка с нестандартным дизайном.

К сожалению, обычный раскрывающийся список в виде элемента управления DropDownList может содержать только элементы типа ListItem, что сильно ограничивает возможности по его стилизации. Однако с помощью технологии ASP.NET AJAX можно реализовать раскрывающийся список с практически произвольным внешним видом и содержимым.

Для реализации нам потребуется набор компонентов «AJAX Control Toolkit» от DevExpress уже известный нам из статьи, посвящённой созданию аккордеонов (ссылку на официальную страницу для загрузки можно найти там же).

В данном случае будем использовать расширитель DropDownExtender. Но, перед тем как обратиться к нему, нужно для начала сверстать наш будущий раскрывающийся список.

Основой вёрстки обязательно должен служить элемент управления ASP.NET. Лучше всего взять обычный Panel.

В качестве примера создадим стилизованное меню перехода в некоторые разделы этого сайта. Ниже представлены код разметки элемента Panel и его внешний вид в браузере.

<asp:Panel ID="Panel1" runat="server" BackColor="#0099FF" Width="347px">
    <img src="img/logo.png" alt="logo" />
    <h3>Перейти в раздел сайта Стрелец Coder:</h3>
    <ul style="list-style-image: url(img/fav.png)">
        <li><a href="http://example.ru/category/programs/">Программы</a></li>
        <li><a href="http://example.ru/category/articles/">Статьи</a></li>
        <li><a href="http://example.ru/about/">Об авторе</a></li>
    </ul>
</asp:Panel>

 

 Далее превратим этот элемент Panel в раскрывающийся список.

Для этого добавим на страницу ещё один элемент управления, из которого он будет раскрываться. Пусть это вновь будет Panel. И теперь самое время задействовать DropDownExtender.

DropDownExtenderнеобходимо добавлять именно для того элемента управления, из которого раскрывается список. Добавим его для этого Panel.

При дальнейшей настройке указываем в свойстве DropDownControlID id элемента, который реализует собственно сам список. В данном случае, это элемент Panel вёрстка которого описана вначале статьи.

В результате, если все сделано, верно, в браузере мы изначально увидим только второй элемент Panel.

Но, если навести на него курсор мыши, он изменит свой внешний вид и станет очень похож на DropDownList.

Для того чтобы раскрыть список достаточно щёлкнуть по нему левой кнопкой мыши.

Данный способ позволяет создавать раскрывающиеся списки практически любой конфигурации и самым различным содержимым. Вплоть до анимации и видеозаписей с YouTube. При желании можно вообще не создавать список как таковой, и просто выводить, таким образом, какую-либо дополнительную информацию.

Однако здесь есть и свои недостатки.

DropDownList и другие готовые элементы управления для раскрывающихся списков предоставляют уже готовый функционал и дизайн (без учёта возможностей стилизации). В данном случае всё необходимо создавать почти с нуля.

В прочем этот изъян является общим для большинства нестандартных решений и при правильном использовании более чем полностью компенсируется предоставляемыми возможностями.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *