Свертывание и развертывание панели из кода JavaScript (C#)
Элемент управления CollapsiblePanel в наборе элементов управления ASP.NET AJAX расширяет панель и предоставляет ей возможность свернуть содержимое и снова развернуть его. Эти два действия также можно активировать из пользовательского кода JavaScript.
Общие сведения
Элемент управления CollapsiblePanel в наборе элементов управления ASP.NET AJAX расширяет панель и предоставляет ей возможность свернуть содержимое и снова развернуть его. Эти два действия также можно активировать из пользовательского кода JavaScript.
Этапы
Прежде всего, создайте новую страницу ASP.NET и включите в ScriptManager один <form> элемент . При этом загружается библиотека ASP.NET AJAX, необходимая для набора средств управления:
<asp:ScriptManager ID="asm" runat="server" />
Затем создайте панель с текстом, чтобы увидеть эффект свертывания и развертывания:
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
Как видите, панель ссылается на класс CSS, который показан здесь (и в основном определяет цвет фона и ширину панели):
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Элементу CollapsiblePanelExtender управления требуется TargetControlID атрибут , чтобы набор средств знал, какую панель следует свернуть или развернуть по запросу:
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" />
К сожалению, в настоящее время расширитель не предоставляет определенный API для сворачивания или расширения панели, но некоторые недокументированные методы будут делать. Во-первых, добавьте на страницу три кнопки HTML, которые затем активируют клиентский Код JavaScript для сворачивания или развертывания содержимого панели:
<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
В клиентском коде JavaScript (запущенном с <script type="text/javascript">) $find() необходимо использовать метод для доступа CollapsiblePanelExtenderк . $find("cpe") возвращает ссылку на него. Оттуда определенные методы будут решать поставленную задачу.
Вызывается _doOpen()метод для открытия (расширения) панели. Следующий код реализует функцию doOpen() , вызываемую при нажатии первой кнопки:
function doOpen()
{
$find("cpe")._doOpen();
}
Для закрытия или сворачивания панели _doClose() необходимо выполнить метод . Поэтому, когда пользователь нажимает вторую кнопку, вызывается следующий код JavaScript:
function doClose()
{
$find("cpe")._doClose();
}
Третья кнопка переключает состояние панели: от свернутой до развернутой и наоборот. Предоставляет CollapsiblePanelExtendertoggle() метод , который выполняет именно это: изменяет состояние панели. Однако существует и другой подход (который используется методом toggle() внутренне): get_Collapsed() метод CollapsiblePanelExtender() указывает, свернута панель или нет. В зависимости от возвращаемого значения этой функции панель затем разворачивается (_doOpen() метод) или свернутый (_doClose()).
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
Третья кнопка изменяет состояние панели: с свернутого на развернутое и обратно (щелкните для просмотра полноразмерного изображения)
