Свертывание и разворачивание панели с помощью JavaScript (C#)

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

Скачать в формате PDF

Элемент управления CollapsiblePanel в ASP.NET наборе средств управления AJAX расширяет панель и предоставляет ему возможность свернуть содержимое и развернуть его снова. Эти два действия также можно активировать из пользовательского кода JavaScript.

Обзор

Элемент управления CollapsiblePanel в ASP.NET наборе средств управления AJAX расширяет панель и предоставляет ему возможность свернуть содержимое и развернуть его снова. Эти два действия также можно активировать из пользовательского кода JavaScript.

Шаги

Прежде всего, создайте страницу ASP.NET и включите ScriptManager в одном элементе <form>. При этом загружается библиотека AJAX ASP.NET, требуемая набором средств управления:

<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();
}

Третья кнопка переключает состояние панели: от свернутого до развернутого и наоборот. CollapsiblePanelExtender предоставляет доступ к методу toggle(), который делает ровно это: изменяет состояние панели. Однако существует и другой подход (который внутренне используется toggle() методом): get_Collapsed() метод CollapsiblePanelExtender() сообщает нам, является ли панель свернутой или нет. В зависимости от возвращаемого значения этой функции панель затем либо разворачивается (метод _doOpen()), либо свернется (метод _doClose()).

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

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