Свертывание и развертывание панели из кода JavaScript (C#)

Кристиан Венц

Загрузить PDF-файл

Элемент управления 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();
 }
}

Третья кнопка изменяет состояние панели: с свернутого на развернутое и обратно (щелкните для просмотра полноразмерного изображения)

Вперед