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

по Кристиан Венз

Скачать код или скачать PDF

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

Обзор

Элемент управления Коллапсиблепанел в наборе средств управления AJAX ASP.NET расширяет панель и предоставляет возможность сворачивать ее содержимое и расширять ее. Эти два действия также можно активировать из пользовательского кода 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">) для доступа к CollapsiblePanelExtenderнеобходимо использовать метод $find(). $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();
 }
}

третья кнопка изменяет состояние панели: с свернутого на расширенное и обратно.

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