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

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

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

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

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

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

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

 Исходный элемент Panel

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

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

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

Добавление расширителя для списка

Выбор DropDownExtender

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

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

Свёрнутый список

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

Свёрнутый список при наведении курсора мыши

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

Развёрнутый список

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

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

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

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

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

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