В этой статье мы рассмотрим пример создания раскрывающегося списка с нестандартным дизайном.
К сожалению, обычный раскрывающийся список в виде элемента управления DropDownList может содержать только элементы типа ListItem, что сильно ограничивает возможности по его стилизации. Однако с помощью технологии ASP.NET AJAX можно реализовать раскрывающийся список с практически произвольным внешним видом и содержимым.
Для реализации нам потребуется набор компонентов «AJAX Control Toolkit» от DevExpress уже известный нам из статьи, посвящённой созданию аккордеонов (ссылку на официальную страницу для загрузки можно найти там же).
В данном случае будем использовать расширитель DropDownExtender. Но, перед тем как обратиться к нему, нужно для начала сверстать наш будущий раскрывающийся список.
Основой вёрстки обязательно должен служить элемент управления ASP.NET. Лучше всего взять обычный Panel.
В качестве примера создадим стилизованное меню перехода в некоторые разделы этого сайта. Ниже представлены код разметки элемента Panel и его внешний вид в браузере.
|
1 |
Перейти в раздел сайта Стрелец Coder:
|
1 |
|
1 |
Далее превратим этот элемент Panel в раскрывающийся список.
Для этого добавим на страницу ещё один элемент управления, из которого он будет раскрываться. Пусть это вновь будет Panel. И теперь самое время задействовать DropDownExtender.
DropDownExtenderнеобходимо добавлять именно для того элемента управления, из которого раскрывается список. Добавим его для этого Panel.
При дальнейшей настройке указываем в свойстве DropDownControlID id элемента, который реализует собственно сам список. В данном случае, это элемент Panel вёрстка которого описана вначале статьи.
В результате, если все сделано, верно, в браузере мы изначально увидим только второй элемент Panel.
Но, если навести на него курсор мыши, он изменит свой внешний вид и станет очень похож на DropDownList.
Для того чтобы раскрыть список достаточно щёлкнуть по нему левой кнопкой мыши.
Данный способ позволяет создавать раскрывающиеся списки практически любой конфигурации и самым различным содержимым. Вплоть до анимации и видеозаписей с YouTube. При желании можно вообще не создавать список как таковой, и просто выводить, таким образом, какую-либо дополнительную информацию.
Однако здесь есть и свои недостатки.
DropDownList и другие готовые элементы управления для раскрывающихся списков предоставляют уже готовый функционал и дизайн (без учёта возможностей стилизации). В данном случае всё необходимо создавать почти с нуля.
В прочем этот изъян является общим для большинства нестандартных решений и при правильном использовании более чем полностью компенсируется предоставляемыми возможностями.
Добавить комментарий