Создание раздвижных панелей

Во многих исследованиях по удобству работы авторы советуют не вынуждать пользователей производить прокрутку страниц. От прокрутки можно будет отказаться, добавив лишь немного программного кода JavaScript. Элемент управления ASP.NET AJAX Control Toolkit – Accordion координирует одновременное представление нескольких панелей так, что в каждый момент времени видна будет только одна из них. Щелчок на панели приводит к ее открытию (с использованием анимационного эффекта) и одновременному скрытию содержимого всех остальных панелей.

Компонент Accordion состоит из двух частей: заголовка, в котором отображается название и который всегда видим, и области содержимого, которая может скрываться или появляться, напоминая эффект сжатия и растягивания мехов аккордеона. Реализацию эффекта выдвижения панели мы начнем с определения двух классов CSS в новом файле .aspx, один будет предназначен для заголовка, другой – для области содержимого. Эти классы определяют внешнее представление элемента управления (и, в некоторой степени, его поведение) и позднее будут использоваться при создании панелей и их содержимого.



В фактическом определении элемента управления Accordion имеются ссылки на оба класса CSS:
ContentCssClass="accordionContent" HeaderCssClass="accordionHeader">
Внутри компонента Accordion элемент содержит список выдвижных панелей, представленных элементами управления AccordionPane.


Каждый элемент AccordionPane состоит из двух частей:

Заголовок панели

Содержимое панели

Благодаря поддержке технологии IntelliSense практически невозможно допустить ошибку при создании страницы с элементом управления Accordion. В примере 1.1 приводится полный исходный код примера.
Пример 12.1. Использование элемента управления Accordion Accordion.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)

ContentCssClass="accordionContent" HeaderCssClass="accordionHeader">
(ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server")
ASP.NET AJAX, Ajax, and ASP.NET

Chapter 1 gives a high?level overview of Ajax and the ASP.NET AJAX framework and then covers the installation of ASP.NET AJAX, a review of its structure, and a first simple example.
(/ajaxToolkit:AccordionPane)
(ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server")
JavaScript

Chapter 2 is a concise introduction to JavaScript.



Although ASP.NET AJAX does its best to hide the details from ASP.NET programmers, a certain knowledge of JavaScript is required to really master ASP.NET AJAX.

(/ajaxToolkit:AccordionPane)
(ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server")
Ajax

Chapter 3 explains the technologies beyond the hype.
You learn what happens in the background, how Ajax works, and what it really is all about, in fewer than 20 pages.

(/ajaxToolkit:AccordionPane)

(/ajaxToolkit:Accordion)


(/body)
.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Борьба со спамом в блогах и других формах ввода информации
Динамическая свертка единственной панели
Добавление функции автодополнения к элементу управления TextBox
Отображение всплывающего окна на странице
Присоединение календаря к текстовому полю