Rozwijanie i zwijanie panelu z poziomu języka JavaScript (C#)

Autor Christian Wenz

Pobierz kod lub Pobierz plik PDF

Kontrolka CollapsiblePanel w zestawie narzędzi ASP.NET AJAX Control rozszerza panel i udostępnia ją z możliwością zwijania jej zawartości i jej ponownego rozwinięcia. Te dwie akcje mogą być również wywoływane z niestandardowego kodu JavaScript.

Omówienie

Kontrolka CollapsiblePanel w zestawie narzędzi ASP.NET AJAX Control rozszerza panel i udostępnia ją z możliwością zwijania jej zawartości i jej ponownego rozwinięcia. Te dwie akcje mogą być również wywoływane z niestandardowego kodu JavaScript.

Kroki

Najpierw utwórz nową stronę ASP.NET i Uwzględnij ScriptManager w obrębie jednego <form> elementu. Spowoduje to załadowanie biblioteki AJAX ASP.NET, która jest wymagana przez zestaw narzędzi sterowania:

<asp:ScriptManager ID="asm" runat="server" />

Następnie utwórz panel z tekstem, tak aby można było zobaczyć efekt zwijania/rozwijania:

<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>

Jak widać, panel odwołuje się do klasy CSS, która jest wyświetlana w tym miejscu (i w istocie definiuje kolor tła i szerokość panelu):

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Kontrolka CollapsiblePanelExtender wymaga atrybutu TargetControlID, dzięki czemu zestaw narzędzi wie, który panel ma zostać zwinięty lub rozwinięty na żądanie:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

Niestety, rozszerzenie aktualnie nie uwidacznia określonego interfejsu API do zwijania lub rozszerzania panelu, ale niektóre nieudokumentowane metody. Po pierwsze, Dodaj do strony trzy przyciski HTML, które będą wyzwalać kod JavaScript po stronie klienta, aby zwinąć lub rozwinąć zawartość panelu:

<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();" />

W kodzie JavaScript po stronie klienta (rozpoczętym z <script type="text/javascript">) Metoda $find() musi być używana w celu uzyskania dostępu do CollapsiblePanelExtender. $find("cpe") zwróci odwołanie do niego. Z tego miejsca poszczególne metody rozwiązują zadanie.

Metoda otwierająca (rozszerzająca) Panel jest nazywana _doOpen(); Poniższy kod implementuje funkcję doOpen() wywołana po kliknięciu pierwszego przycisku:

function doOpen() 
{
 $find("cpe")._doOpen();
}

Aby zamknąć lub zwinąć panel, należy wykonać metodę _doClose(). Gdy użytkownik kliknie drugi przycisk, zostanie wywołany następujący kod JavaScript:

function doClose() 
{
 $find("cpe")._doClose();
}

Trzeci przycisk przełącza stan panelu: od zwinięte do rozwinięte i na odwrót. CollapsiblePanelExtender uwidacznia metodę toggle(), która dokładnie to oznacza, że: odwraca stan panelu. Istnieje również inne podejście (używane wewnętrznie przez metodę toggle()): Metoda get_Collapsed() CollapsiblePanelExtender() informuje nas o tym, czy panel jest zwinięty, czy nie. W zależności od wartości zwracanej przez tę funkcję panel jest następnie rozwinięty (_doOpen() metodzie) lub zwinięty (_doClose()):

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

trzeci przycisk zmienia stan panelu: od zwinięte do rozwinięte i z powrotem

Trzeci przycisk zmienia stan panelu: od zwiniętej do rozwiniętej i z powrotem (kliknij, aby wyświetlić obraz w pełnym rozmiarze)