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

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

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

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

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

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

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

Перейти в раздел сайта Стрелец Coder:

 

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

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

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

 

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

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

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

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

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

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

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

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

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

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

Adblock
detector